从零部署Vue+Node+MongoDB到服务器
一、前言
最近在阿b学了解了一下全栈开辟，用 Vue3+ElementPuls+Express+MongoDB 做了一个项目，为了有一个本身的网站，于是又了解了如何部署。经过网上一番搜索和本身的一顿操作后，也是终于捣鼓好了，在这里记录一下部署过程，方便以后查阅，也给没有部署经验的前端友友们一个参考。
参考资料：
禹神：前端项目部署指南，前端项目打包上线_哔哩哔哩_bilibili
禹神：一小时彻底搞懂跨域&解决方案_哔哩哔哩_bilibili
二、环境
腾讯云服务器（轻量应用服务器）
Vue3
Node（Express框架）
跨域（Cors）
三、部署
在这里就不讲服务器如何购买了，前言参考资料 中有详细解说，这里只解说服务器的一些设置。
1、服务器体系安装
这里演示重装体系如何操作，刚购买服务器时就直接选使用应用模板 ==> 宝塔Linux面板
https://i-blog.csdnimg.cn/direct/f922bef4f5804f36b67acb658cf0402c.png
https://i-blog.csdnimg.cn/direct/e9e7e67873734d27b0654752fe121bce.png
选好后往下滑，设置好暗码，点击确定
https://i-blog.csdnimg.cn/direct/143a16c7b92f4ec3b5ae30ad6b3157e8.png
重装或购买后体系安装完成是这个样子
https://i-blog.csdnimg.cn/direct/9f4e96319923466791c6bcd7ba3357b2.png
2、服务器设置
点击防火墙 ==> 添加规则，添加放行端口规则，80端口默认已添加
主要是为了添加 前端(80)、后端(3000)、数据库(27017) 和 宝塔面板(8888) 的放行端口。
https://i-blog.csdnimg.cn/direct/74e2979f20c24290982b5ae623507f57.png
https://i-blog.csdnimg.cn/direct/d5d316eefaba44d88df03e5455e4986e.png
3、宝塔账密获取
https://i-blog.csdnimg.cn/direct/b1503b5844044f3582417748527de5ef.png
https://i-blog.csdnimg.cn/direct/3a02832d8f4e4bf682056509d27eb9b3.png
4、宝塔登录
点击外网面板地点，输入账号暗码登录宝塔
https://i-blog.csdnimg.cn/direct/d1e7dd727ee645b1892ed22bf62e111f.png
https://i-blog.csdnimg.cn/direct/fec1610a02f545899d03b75b159aa0d6.png
https://i-blog.csdnimg.cn/direct/f4c04721be0f4c6da96da885fa551467.png
5、宝塔软件安装
安装Node、MongoDB、Nginx
https://i-blog.csdnimg.cn/direct/2a1378de9ec64686809eb4b4f3445f50.pnghttps://i-blog.csdnimg.cn/direct/c330717ddcda466fb7e00c07df5680a6.png
6、文件夹准备
https://i-blog.csdnimg.cn/direct/7b4fd8128bfc46b78bc2a0558fd108b4.png https://i-blog.csdnimg.cn/direct/5ba8ed4ddd2f4961aea4b14feaf2b6df.png
7、后端文件上传
由于用的是 cors 解决跨域，后端上传文件前，先安装好 cors 插件。
npm i cors https://i-blog.csdnimg.cn/direct/75297b1b65da43e4ad86791159be7fe4.png
确认后端监听端口，我这里是 3000，记住本身的监听端口就行
https://i-blog.csdnimg.cn/direct/0c51a6f4a13040f0a718e56a3ca4edd4.png
8、后端部署
https://i-blog.csdnimg.cn/direct/1d903ff6c1ae4224b89547333d041556.pnghttps://i-blog.csdnimg.cn/direct/744fa0053e794cd986c543fd7dbf373c.png
https://i-blog.csdnimg.cn/direct/3b52b96cb3a74da3864230be4c2b29c0.png https://i-blog.csdnimg.cn/direct/ed3893bf0f9745b48da6cc7af5dab99f.png
9、前端文件上传
前端打包前修改 axios 的请求设置，将基地点改为刚刚部署的后端接口地点
https://i-blog.csdnimg.cn/direct/553a08e530924c59beeb72f4ad122773.png
我把前端署理给注释掉了，用的 cors 解决跨域，原因是试过好几次用宝塔的 nginx 设置署理出现页面的图片请求不表现的问题，索性用 cors 解决，后面会详细解说 cors 设置。
https://i-blog.csdnimg.cn/direct/0fb1b12d6ab240e09fd8e3ca50db024a.png
https://i-blog.csdnimg.cn/direct/e8736ada99dc4f21ae0329316bb749e2.png
打包后会天生一个 dist 文件夹，只用将 dist 拖拽上传即可。
https://i-blog.csdnimg.cn/direct/91e8ef0cc37446bc9b8ef0e5aa60d25c.png
10、前端部署
https://i-blog.csdnimg.cn/direct/0096439c5d9242419643e5d781bdc6db.png
只用输入本身的公网ip即可访问，这边是路由重定向进入了 /webhome。
https://i-blog.csdnimg.cn/direct/817141d399104a2f9c6f7944b3fb87db.png
11、nginx -- 革新页面404问题
https://i-blog.csdnimg.cn/direct/1ef693a0175b457ea284fd2221a81415.png
打开设置，设置文件，添加 nginx 设置
https://i-blog.csdnimg.cn/direct/7a4f957d34ca41de84dc3c096fb38928.png
这里有可能打开是空的，就需要卸载 nginx ，重新安装，大概换低一点的版本。
https://i-blog.csdnimg.cn/direct/1b9aa8da035a4f1795e54c118bd12241.png
添加后革新就不会 404 了
location / {
try_files $uri $uri/ /index.html;
} 12、数据库设置
数据库名肯定要与本地数据库同名 ！！！
数据库名肯定要与本地数据库同名 ！！！
数据库名肯定要与本地数据库同名 ！！！
https://i-blog.csdnimg.cn/direct/b5e1d502bf31429f9d49a605f7b5eff5.png
13、cors -- 跨域问题解决
双击打开 app.js
https://i-blog.csdnimg.cn/direct/9da7485e103d4e0c9463f2e1c17a36fd.png
设置 cors ，详细设置请看 前言参考资料，cors 使用在路由之前。
https://i-blog.csdnimg.cn/direct/96f68ba936fd443eaea0ef1f9d27211f.png
const cors = require('cors');
const corsOptions = {
origin:'http://公网ip',// 允许访问的源
methods: ['GET','HEAD','PUT','PATCH','POST','DELETE','OPTIONS'],// 方法
}
app.use(cors(corsOptions)) 设置好后 Ctrl + S 保存，重启后端项目即可，如许前端就可以向后端发送请求了。
四、 增补 --- 宝塔防火墙设置
https://i-blog.csdnimg.cn/direct/e34a983f1a704104b34a5685f0fb44e2.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]