前后端分离项目Vue+NodeJS+MongoDB的服务器部署

前几天我的个人网站部署上线，然而一路上遇到的坑不少。所以来写一篇记录一下。
我的网站是前后端分离项目，前端使用的是Vue，后端使用的是NodeJS，数据库使用的是MongoDB，服务器使用的是腾讯云，因为之前购买过阿里云的学生套餐，没有优惠了，所以使用了腾讯云。云服务器的系统是CentOS7。
关于前后端搭建和云服务器和域名购买、备案解析就不多讲了，这些网上教程很多，我们从部署来开始讲起。

准备工作

安装FileZilla

先在电脑上安装FileZilla，这是一款免费的FTP软件，在官网下载Client版本安装即可。
打开软件后，主机填写你的云服务器IP地址，用户名和密码填写你云服务器登录的账号密码，端口号为22，点击快速连接即可。
接下来我们就可以用这个软件进行文件传输。

安装Robo 3T

Robo3T可以远程连接你服务端的MongoDB数据库，虽然操作不了太多东西，但至少可以查看你数据库里的内容。
进入Robo3T官网即可下载安装，具体操作在安装MongoDB步骤会提到。

安装NodeJS

升级yum

登录云服务器。
我们云服务器都知道yum，它是CentOS中的Shell前端软件包管理器，犹如NPM。
我们先升级一下yum。

yum update

安装NodeJS

我们先来安装NodeJS，然后cd到usr路径下。

cd /usr

然后下载NodeJS，下载连接可以去Node官网获取最新版的。

wget https://nodejs.org/dist/v12.14.1/node-v12.14.1-linux-x64.tar.xz

然后解压下载的压缩包。

tar xvJf node-v12.14.1-linux-x64.tar.xz

然后你可以删除你下载的压缩包，当然容量大的可以无视这一步。

rm node-v12.14.1-linux-x64.tar.xz

将解压后的文件重命名。

 mv node-v12.14.1-linux-x64 node

配置软连接

其实我们需要来配置node，npm软连接，这样就可以在所有目录下使用。

ln -s /usr/node/bin/node /usr/local/bin/node
ln -s /usr/node/bin/npm /usr/local/bin/npm

这时我们就可以来测试一下。

node -v
npm -v

有显示node和npm的版本号就表示安装成功了。

安装forever

项目中我是用forever来运行后端代码，当然你也可以使用pm2。
这里我就讲forever，先安装全局安装forever。

npm install forever -g

然而在CentOS里，我们还需要设置软连接。
我们全局npm安装的默认路径在/root/node/lib/node_modules下。
所以我们勇敢下面命令设置软连接。

ln -s /root/node/lib/node_modules/forever/bin/forever /usr/bin/

设置好后，我们就可以全局使用forever了。

forever

安装MongoDB

安装MongoDB

我安装的MongoDB是4.0+的版本，网上大部分教程都是4.0一下的版本，它们的配置是有很大不一样的。

首先回到本地，用记事本或者编程软件新建一个文件，命名为mongodb-org-4.0.repo。
内容如下

[mongodb-org-4.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc

然后通过FileZilla上传到服务器，到下面这个目录下。

/etc/yum.repos.d/

回到服务器，使用下面命令下载安装MongoDB

sudo yum install -y mongodb-org

安装好后，我们修改/etc/yum.conf文件，加入如下信息，禁用自动升级。

exclude=mongodb-org,mongodb-org-server,mongodb-org-shell,mongodb-org-mongos,mongodb-org-tools

这里讲一下修改文件内容操作，后面就不多说了。

cd /etc
vi yum.conf

然后按一下键盘上的"A"键，进入编辑模式。
添加完成后，按下"esc"按键推出编辑模式，输入下列命令保存退出。

:wq

修改完文件后，我们启动MongoDB服务。

sudo service mongod start

配置开机自启动。

sudo chkconfig mongod on
systemctl enable mongod.service

配置用户

输入以下命令进入mongodb shell。

mongo --port 27017

进入admin数据库。

use admin

创建一个超级用户。

db.createUser({
     user: "root",pwd: "12345678",roles: [ {
      role: "userAdminAnyDatabase", db: "admin" }, "readWriteAnyDatabase" ]})

ctrl+c退出mongodb shell，重新进入一次mongodb shell，验证用户是否存在。

use admin
db.auth("root","12345678")

输出1表示验证成功。

启用身份验证

修改MongoDB的配置文件（/etc/mongod.conf）。
bindIp改为0.0.0.0这样外网也能访问（默认是127.0.0.1，只能在内网访问）

net:
  port: 27017
  bindIp: 0.0.0.0

启用身份验证配置。

security:
  authorization: enabled

保存文件，然后重启MongoDB服务。

sudo service mongod restart

用密码连接MongoDB

尝试用密码连接mongodb服务（命令执行完成后，输入密码就可以连接成功，进入mongodb shell）。

mongo --port 27017 -u "root" --authenticationDatabase "admin" -p

回到本地，打开前面安装好的Robo 3T，新建新的连接。
然后再Connection中，Name自己随便取，Address填写你的IP地址，后面端口号填写27017。

然后在Authentication，将Perform authentication打勾，User Name和Password填写你刚刚配置用户的账号密码。

点击Save保存，然后再点击Connect，就连接成功。

修改后端项目数据库连接url

如果你之前在本地测试使用的数据库是安装在本地的MongoDB，这一步就可以直接跳过。
如果你是使用MongoDB Atlas，你就需要将你的后端代码的url修改为下面连接url。
将username和password改成你配置用户的账号密码，如果你设置了其他管理员用户也可以设置为它们的，然后dbname改成你使用的数据库名。
如果该数据库名在数据库中不存在的话它会自动新建。

'mongodb://[username]:[password]@localhost:27017/[dbname]?authSource=admin'

上传项目代码

打包项目

下面是我的项目结构。
dist文件夹是前端Vue打包后的代码，而其他的是后端代码。

上传代码

这一步就不用多说，使用前面安装好的FileZilla进行上传。
我的文件上传路径是/home/website。
后面会使用到这个路径。

测试后端代码即数据库连接

来到你项目文件的路径下。

cd /home/website

然后用forever运行一下。

forever index.js

因为我后端代码中，端口号监听和数据库连接都有提示，所以它会显示是否运行成功和数据库舒服连接成功。

确定成功后，Ctrl+C退出运行。

安装Nginx

安装Nginx

在云服务器上输入下列命令安装Nginx。

yum install nginx

启动Nginx。

service nginx start

配置nginx.conf

来到Nginx的目录下。

cd /etc/nginx

编辑里面的nginx.conf。
我们主要修改server这一块，依旧监听80端口。
location / 里面，root写的是你前端代码的路径，即/home/website/dist，index写的是你的前端的html文件名。try_files填写$uri $uri/ /index.html。
然后location /api中，proxy_pass填写你后端监听的端口号，我后端端口号是5000，所以我就填写 http://127.0.0.1:5000。

    server {
     
        listen       80 default_server;
        server_name  localhost;

        location / {
     
            root /home/website/dist;
            index index.html;
            try_files $uri $uri/ /index.html;
        }

        location /api{
     
            proxy_pass http://127.0.0.1:5000;
        }

        error_page 404 /404.html;
            location = /40x.html {
     
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
     
        }
    }

保存后，重启一下nginx。

service nginx restart

项目上线

现在所有工作都准备好了，只需来到你的项目路径下，运行你的后端代码即可。

cd /home/website
forever start index.js

这时候登录你的域名就可以看到你的网页了。