谈下vue+nodejs+nginx+mongodb的网站部署到服务器

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/theoneEmperor/article/details/79567275

    回顾一下不久前的一次网站部署经历吧,过程颇为坎坷,过来人应该深有体会这种爬坑感受。

    最近有往nodejs方面学习,官方的文档写的有点深奥,浏览了个两三遍后,就直接从实战上手了。去慕课网找了个视频学习了一下,想了想,我还是喜欢前后端分离的开发模式,于是就没有用nodejs的jade开发,最主要的我也不太喜欢那种编码风格,太容易出错了。稍微写了个页面,然后去百度云租了个9块首月的云服务器,当然便宜的效果可想而知。

   远程进入服务器主机后,在角色里面把IIS的东西全装了,方法看我的另一篇在本地部署FTP服务器吧如何部署FTP服务器,或者直接用FTPserver也行,使用方法搜索得到,就不多说了。搭好服务器后,怎么也连不上,一阵摸索后,我想起了防火墙,于是去把它全关了,发现连上了,这样的做法不是很正确,应该是在防火墙里开启指定端口就好了比如21(ftp),80(http),443(https)。

于是我直接把npm run build编译后的文件丢了上去,一切正常没什么问题,打包的时候要注意一下build的的一些路劲问题,否则找不到东西,build时配置。然后可以在IIS服务器上部署网站了,步骤也有网站部署,可能本地和服务器主机有点不同但也大同小异。随即也把nodejs文件和mongo.exe也丢了上去,全部运行了起来。然而问题出现了,除了在我自己电脑上用vue-cli打开项目能访问到接口,其他方式全是not found 404。而且用IP地址加端口加路由路径可以拿到数据,这个问题很恼火,想了很久之后,应该是后台没有代理服务器,毕竟访问的是80端口,所以找不到。之后我便换成了nginx服务器来部署我的网站,修改了它的.conf文件后,把/api的路由代理到我接口所在的3000端口,发现还是项目详情地址找不到,又是一阵蛋疼的思考,打开浏览器把请求头那里的信息看了又看,突然发现路由前面多了个/api,这是前端为了解决跨域问题,在前端加的代理导致的,问题也在于我没对AXIOS进行封装,跑通服务心切,造成很多问题,所以开发的一些前提配置,是非常必要的。我就想是不是这个原因,把nodejs的路由前都加了个,发现可以了,真的是欣喜万分,我想此刻的你也应该有点开心的眉头了。其实解决这个问题前端的解决办法就是在vue-cli设置代理的时候,不要用/api直接用‘’空字符,如果不太懂,我这里也有前端跨域(可能此时的你用的已经不是vue-cli 2.0,但是万变不离其宗,看下所用版本脚手架的说明文档就好了)。跨域正确解法,需要后端来做支持,把你的请求地址,添加进后端跨域请求里面的白名单就好了,有问题可以随时交流。

   项目详情地址

猜你喜欢

转载自blog.csdn.net/theoneEmperor/article/details/79567275