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

鉴于这篇去年写的教学文章已经在CSDN和掘金上收获20多个收藏（没几个点赞，全是白嫖怪），决定把它搬过来
详细介绍了如何利用Nginx部署前后端项目

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

博客地址

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

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

  

  1.png

  点击设置修改MongoDB配置

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

  

  2.png

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

  

  3.png

  紧接着在宝塔的安全中以及腾讯云的防火墙中开放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，显然接着需要去开放该端口

  • 连接数据库的地址

    将原来的本地地址改成如下

    

    4.png

  • 最后进入www/wwwroot 目录下，上传（文件太多先压缩再上传，然后解压）整个项目（包括node_modules)到你自己喜欢的位置

    
    注：be为后端项目文件夹，dist为前端项目打包文件夹

  • 启动node服务

    安装PM2管理器

    

    6.png

    添加项目，在启动文件里选择你后台项目的启动文件路径。其它项会自动填写

    

    7.png

  • 测试接口

    去postman测试一下你的后端接口，有问题的话可以检查进入PM2检查日志，查看有无报错

    

    8.png

  注：以上数据库以及后端部署流程可以借鉴这篇文章：全栈项目部署

• 前端项目部署

  • 先把vue.config.js里的代理配置删除，我们之后用Nginx反向代理

    npm run build
    

    后便会生成dist文件夹，直接上传就好了

  • 添加站点

    在宝塔上点击网站，添加站点，然后按自己的IP地址、文件地址填写如下信息

    

    9.png

  • 设置代理

    点击设置

    

    10.png

    修改配置文件

    

    11.png

    代理地址改成里后端接口地址，也就是服务器IP+端口号，‘’api‘’加不加取决你自己前后端接口的对接设置

    注：前端项目是默认部署在80端口的，已经默认放行过了，不出意外，此时访问 http://`服务器IP` ，就可以看到网站支棱起来了。好耶！

    以上过程再推荐一篇博客：使用宝塔将Vue2+Nodejs全栈项目打包部署到腾讯云服务器

添加域名

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

• 购买域名

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

• 域名备案

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

• 域名解析

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

  

  12.png

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

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

总结

回想起自己有问题时总是想找到优质解答，暗暗立誓以后要写出优质博客，真到这时候才发现不仅费时间而且难，呜呜~~

虽然拖延了这么久，但总算写完了，最近看到一句话：

"好像好厉害"这几个字大概是人生中各种入坑的原因

貌似的确是这样