ToB企服应用市场:ToB评测及商务社交产业平台

标题: 从零部署Vue+Node+MongoDB到服务器 [打印本页]
作者: 饭宝    时间: 2024-9-8 00:41
标题: 从零部署Vue+Node+MongoDB到服务器


一、前言

        最近在阿b学了解了一下全栈开辟，用 Vue3+ElementPuls+Express+MongoDB 做了一个项目，为了有一个本身的网站，于是又了解了如何部署。经过网上一番搜索和本身的一顿操作后，也是终于捣鼓好了，在这里记录一下部署过程，方便以后查阅，也给没有部署经验的前端友友们一个参考。

参考资料：
        禹神：前端项目部署指南，前端项目打包上线_哔哩哔哩_bilibili
        禹神：一小时彻底搞懂跨域&解决方案_哔哩哔哩_bilibili
二、环境

        腾讯云服务器（轻量应用服务器）
        Vue3
        Node（Express框架）
        跨域（Cors）
三、部署

        在这里就不讲服务器如何购买了，前言参考资料 中有详细解说，这里只解说服务器的一些设置。
1、服务器体系安装

        这里演示重装体系如何操作，刚购买服务器时就直接选使用应用模板 ==> 宝塔Linux面板

                

  
        选好后往下滑，设置好暗码，点击确定

         重装或购买后体系安装完成是这个样子

2、服务器设置

        点击防火墙 ==> 添加规则，添加放行端口规则，80端口默认已添加
        主要是为了添加 前端(80)、后端(3000)、数据库(27017) 和 宝塔面板(8888) 的放行端口。


 3、宝塔账密获取




4、宝塔登录 

        点击外网面板地点，输入账号暗码登录宝塔



5、宝塔软件安装 

        安装Node、MongoDB、Nginx
 
6、文件夹准备 

 


7、后端文件上传

        由于用的是 cors 解决跨域，后端上传文件前，先安装好 cors 插件。
  1. npm i cors
复制代码

         确认后端监听端口，我这里是 3000，记住本身的监听端口就行


8、后端部署 

 
 

 9、前端文件上传

        前端打包前修改 axios 的请求设置，将基地点改为刚刚部署的后端接口地点

         我把前端署理给注释掉了，用的 cors 解决跨域，原因是试过好几次用宝塔的 nginx 设置署理出现页面的图片请求不表现的问题，索性用 cors 解决，后面会详细解说 cors 设置。


        打包后会天生一个 dist 文件夹，只用将 dist 拖拽上传即可。

10、前端部署 

 

        只用输入本身的公网ip即可访问，这边是路由重定向进入了 /webhome。 

 11、nginx -- 革新页面404问题


         打开设置，设置文件，添加 nginx 设置

         这里有可能打开是空的，就需要卸载 nginx ，重新安装，大概换低一点的版本。
 

         添加后革新就不会 404 了
  1. location / {
  2.     try_files $uri $uri/ /index.html;
  3. }
复制代码
12、数据库设置

        数据库名肯定要与本地数据库同名 ！！！
        数据库名肯定要与本地数据库同名 ！！！
        数据库名肯定要与本地数据库同名 ！！！

13、cors -- 跨域问题解决

        双击打开 app.js 

         设置 cors ，详细设置请看 前言参考资料，cors 使用在路由之前。

  1. const cors = require('cors');
  3. const corsOptions = {
  4.   origin:'http://公网ip',// 允许访问的源
  5.   methods: ['GET','HEAD','PUT','PATCH','POST','DELETE','OPTIONS'],// 方法
  6. }
  7. app.use(cors(corsOptions))
复制代码
        设置好后 Ctrl + S 保存，重启后端项目即可，如许前端就可以向后端发送请求了。 
四、 增补 --- 宝塔防火墙设置





免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4