vue+nodejs+MongoDB全栈web项目部署到云服务器

kaji6

已于 2023-08-13 17:04:14 修改

阅读量1.7k

点赞数 5

文章标签：前端 vue.js mongodb node.js 腾讯云

于 2022-08-24 15:12:03 首次发布

本文链接：https://blog.csdn.net/kj_2020/article/details/126505124

版权

文章目录

建站小结（全栈项目部署）

建站小结（全栈项目部署）

博客地址

www.kaji6.top

前置准备

前端后端代码在本地可以完全跑通
一台云服务器
一个已过审备案的域名

代码

前端

主要是vue2框架，由于先前就写了一点这个项目，那时候还没用上vue3，确实是个小缺陷。

技术栈：

vue2+vuex+vue-router

（是的没用任何UI库，纯手码CSS

后端

身为一名主攻前端的开发人员，这里使用的使nodejs，可以方便快捷地搭建出一个轻量web服务器。

技术栈：

koa2+mongoose

显然数据库使用的是MongoDB，选这个仅仅是因为只接触过这个哈哈。

这部分就不多说了，因为技术开发方面的问题太多，这篇博客主要想记录一下部署一个web全栈项目的过程。

服务器

目前做云服务器的厂家有很多，主要看了两家：阿里云和腾讯云，简单选择后（挑便宜的），在腾讯云新人专区买了一台一年的轻量云服务器，如下图：

挂个链接：腾讯云

服务器配置选择的是宝塔Linux面板，方便后面不用自己安装宝塔面板了。

部署流程

服务器就绪后，就可以（快乐地捣鼓这台远程电脑了。

登入宝塔面板

整个部署过程都是借助宝塔面板完成的，它是一款服务器管理软件，支持windows和linux系统，可以通过Web端轻松管理服务器，提升运维效率，所以第一步就是登录进入宝塔面板。
先通过云服务器控制台登入服务器，然后在新弹出的网页（webshell）中键入
```
sudo /etc/init.d/bt default
```
接着便会返回宝塔面板的Bt-Panel-URL、username和password，分别是宝塔面板地址和你的初始用户名及密码。
你会发现它的地址是http://服务器IP:8888/tencentcloud，所以我们还要去服务器控制台的防火墙中开放8888端口（因为服务器默认开放端口仅有几个），然后才能正常访问。

若一切正常，输入地址后你会看到：

注意：也有可能你觉得你一切操作正常却访问不了登录页面，九九成可能就是你自己的问题（本人在这踩坑两小时）。注意检查自己有没有开网络代理加速器、梯子之类的东西，关掉他们再尝试登录，OK反正我是这个原因。

此环节腾讯云有官方教程：安装和配置宝塔 Linux 面板腾讯云专享版

配置环境

安装数据库MongoDB

直接在软件商店里搜索并安装

点击设置修改MongoDB配置

bindIp 由127.0.0.1改为0.0.0.0，放开ip限制

authorization 默认disabled，如需要权限验证改为enabled（注意保留空格）

紧接着在宝塔的安全中以及腾讯云的防火墙中开放27017端口，后续开放端口都需要两处同时开放。

然后进入宝塔的终端初始化并启动MongoDB
```
cd /www/server/mongodb/bin
mongo
```
输入以上后便可以操作数据库了，需要设置管理员、添加数据库登操作…懒得写了
部署后端项目

上传代码文件前需要修改两个地发
- 监听端口
```
const app = require('./app');
const dev_port = 8888;
const serve_port = 8889;
const port = serve_port;
app.listen(port, () => {
  console.log(`http://`服务器IP`/:${port}`);
})
```
  我监听的服务端口为8889，显然接着需要去开放该端口
- 连接数据库的地址
  
  将原来的本地地址改成如下
- 最后进入www/wwwroot 目录下，上传（文件太多先压缩再上传，然后解压）整个项目（包括node_modules)到你自己喜欢的位置
  
  注：be为后端项目文件夹，dist为前端项目打包文件夹
- 启动node服务
  
  安装PM2管理器
  
  添加项目，在启动文件里选择你后台项目的启动文件路径。其它项会自动填写
- 测试接口
  
  去postman测试一下你的后端接口，有问题的话可以检查进入PM2检查日志，查看有无报错
注：以上数据库以及后端部署流程可以借鉴这篇文章：全栈项目部署
前端项目部署
- 先把vue.config.js里的代理配置删除，我们之后用Nginx反向代理
```
npm run build
```
  后便会生成dist文件夹，直接上传就好了
- 添加站点
  
  在宝塔上点击网站，添加站点，然后按自己的IP地址、文件地址填写如下信息
- 设置代理
  
  点击设置
  
  修改配置文件
  
  代理地址改成里后端接口地址，也就是服务器IP+端口号，‘’api‘’加不加取决你自己前后端接口的对接设置
  
  注：前端项目是默认部署在80端口的，已经默认放行过了，不出意外，此时访问http://服务器IP，就可以看到网站支棱起来了。好耶！
  
  以上过程再推荐一篇博客：[使用宝塔将Vue2+Nodejs全栈项目打包部署到腾讯云服务器]（https://blog.csdn.net/qq_45890970/article/details/123611747）

添加域名

**差点以为写完了，现在还有个问题，目前网站只能通过IP地址访问，谁愿意记一段数字啊，也不够酷对吧，于是我们就需要一个好记的域名。

购买域名

依旧从腾讯云（服务器入坑了，干脆all in了，方便）上买的一个一年的（长期很贵，越长越贵）
域名备案

腾讯云里有一套流程教程，跟着走完就好（就是填一堆个人信息并上传证件之类），大概两周不到网信办给我审过了，颁发了备案号如“皖ICP备案XXXXXXX号”（后续还要公安备案，但此时域名就可以用了，不管了先用再说）
域名解析

在腾讯云里面找到我的域名，点击解析进入域名管理，添加DNS解析

点击快速添加解析，选择你的服务器IP就OK了

过几分钟后，浏览器输入域名就可以访问到网站啦（兴奋