记录第一次vue-nodejs-mongodb项目服务器部署

记录自己第一次部署项目，中间遇到很多errors，但好在花了两天时间成功部署了。先放出部署成功的项目链接

👉👉👉 师大Buy 校园闲置交易平台 👈👈👈

（先注册一个账号使用即可体验）

流程

本项目包含三个子项目

前台展示
后台管理
后端nodejs服务器+mongodb数据库

大概流程

开发好前端与后端程序
购买服务器（和域名）
安全组、开放端口与设置规则
xshell操作
服务器上安装和配置node，mongodb 所需环境
nginx设置代理
上传项目代码到服务器上
启动 express 服务器

购买服务器

我的服务器信息：

腾讯云轻量服务器
运算组件：2核CPU、2GB内存 (通用型-2核2G-40G-300G)
系统盘：40GB SSD云硬盘 (通用型-2核2G-40G-300G)
流量包：300GB/月流量包 (通用型-2核2G-40G-300G)
地域：上海
镜像：CentOS 8

买好服务器后可以进入控制台，对服务器进行操作。可以尝试一下开机关机，之后最重要的是重置密码，这个密码后面通过xshell登录的时候经常用到，所以要记住。

安全组、开放端口与设置规则

在腾讯云控制台的搜索框中搜索安全组，打开云服务器 -网络安全-安全组。里面可以设置一些安全组规则，意思就是这里可以打开一些端口，以便项目使用。

一开始可以新建安全组，使用一些默认的安全组规则。下面这张图展示就是默认的安全组规则，可以看到他已经放通了22,80等端口可以使用。

本项目中的三个项目分别使用了8080（前台），9528(后台)，3000（后端），27017（数据库）端口，所以要用到这些端口，我们就得自己去开放，因为默认的安全组这些端口是没有开放的。

开放这些端口的时候，需要在安全组里添加（可以在原来默认的安全组里新添，也可以新建安全组），也需要在服务器的防火墙里添加，只有这两个地方都放通了，端口才能访问。

登录和操作服务器

xshell操作

我电脑是windows系统，所以安装了xshell来登录服务器。如果是 mac系统，好像可以直接在终端，通过ssh root@公网IP命令行连接到服务器。因为我没用过，所以这里只讲xshell如何登录和操纵。

安装xshell的时候记得顺带安装xftp，可以用来上传文件，不仅如此，我还发现可以用来浏览文件夹，甚至修改编辑文件，很好用！

打开xshell的时候，会弹出一个会话框，选择新建一个会话，然后命名一下，点击连接，这时候会弹出一个输入密码的对话框，输入一开始你在浏览器上的服务器控制台上重置的密码，就登录了。

centos是基于linux建立的操作系统，所以用的指令和linux一样。而linux指令其实和DOS是一样的，只是命令的表达上可能有点儿不一样，所以遇到这个黑框不要害怕。

下面说一下xshell里面常用的linux指令

cd 进入目录
ls 查看当前目录下的文件
mkdir  创建文件夹
mv 移动或重命名
rm -rf  删除整个文件夹

大概知道这些你就有了部署项目的基础了，中途如果遇到其他的需要，可以上网查看。

你可以先试试ls，看看当前文件夹里有什么文件，这感觉就好像是在windows系统上浏览文件夹，只不过在windows上是可视化的操作界面。

xftp使用

xftp是个很好用的可视化界面，一开始我是看别人说用来上传文件的，但是后来我用的时候，我发现它很好用来浏览文件，找回了使用windows一样的感觉。

当你进入xftp软件的时候，首先也会弹出一个会话框，新建会话，重命名，然后连接，输入密码。和使用xshell一样。

要传什么文件给服务器，先在右框中选择文件夹（新建文件夹），找好存放的位置后，在左框中浏览你电脑的文件，找到对应的文件后右键传输。

值得注意的是，在连接服务器后，初始文件夹的位置是/root，你可以从xftp软件的右框中看到，也可以在xshell里面ls看到。

在xftp软件上右框的文件夹中有 … (三个点)，点击一下，可以返回上一级，你会发现，这里有很多初始文件夹。知道这些文件夹的存在，对于我们下一步的操作很重要，这里暂时放开，我们继续后面。

服务器上安装node，mongodb

浏览到这里，我们已经知道一些基本的xshell指令，知道如何通过xshell登录服务器，通过xftp上传文件。下面我们开始在服务器上安装项目所需环境。

一般在新服务器创建后，建议先升级一下 CentOS：

1	yum -y update

在升级之后，我的yum指令就下载不了东西了，报错Fix Failed to download metadata for repo，解决办法是

Step 1: Go to the /etc/yum.repos.d/ directory.

1	[root@autocontroller ~]# cd /etc/yum.repos.d/

Step 2: Run the below commands

1
2

[root@autocontroller ~]# sed -i 's/mirrorlist/#mirrorlist/g' /etc/yum.repos.d/CentOS-*
[root@autocontroller ~]# sed -i 's|#baseurl=http://mirror.centos.org|baseurl=http://vault.centos.org|g' /etc/yum.repos.d/CentOS-*

**Step 3:**现在yum就可以使用了

nodejs

网上的博客描写安装Nodejs很多，甚至还不一样，很容易踩坑，但是我推荐看这篇博客，另外我也在这讲一下步骤。

# 1 安装wget
yum -y install wget

# 2 切换到/usr/local/src目录，选择这个文件夹存放nodejs
cd /usr/local/src

# 3 去nodejs下载官网复制下载链接，我的服务器是centos 8, 64位，所以我选择了
https://nodejs.org/dist/v16.15.1/node-v16.15.1-linux-x64.tar.xz

# 4 使用 wget 安装方式
wget https://nodejs.org/dist/v16.15.1/node-v16.15.1-linux-x64.tar.xz

# 这时候这个压缩包就在当前文件夹下，现在需要解压它
# 5 解压
xz -d node-v16.15.1-linux-x64.tar.xz
tar -xvf node-v16.15.1-linux-x64.tar

# 6 建立软连接
ln -s /node-v16.15.1-linux-x64/bin/node /usr/local/bin
ln -s /node-v16.15.1-linux-x64/bin/npm /usr/local/bin

# 这时候你可以切换到/usr/local/bin目录，看看有没有npm，node文件夹，有的话说明成功了
# 7 试试node,npms是否能使用
node -v
npm -v

# 打印出了版本好就说明没问题

mongodb

推荐看官网的步骤（有官方看官方，否则看别人的博客很容易踩坑）

官网给出了如何在centos上下载mongodb 5，我也在这里写出步骤

1 配置yum

xftp的作用来了，打开该软件，在/etc/yum.repos.d文件夹下创建mongodb-org-5.0.repo文件，选择记事本打开，粘贴下面代码

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

这个操作就好像告诉yum去指定的baseurl去下载资源，不配置的话yum不指导哪里找资源下载。

2 安装mongodb安装包

1	yum install -y mongodb-org

3 验证安装结果

1	rpm -qa \|grep mongodb

如果输出很多Mongodb相关的包时，说明你的服务器已经有这些包了

默认情况下，MongoDB 会创建一下mongod用户，该用户会使用data和log目录

/var/lib/mongo (the data directory)
/var/log/mongodb (the log directory)

我们这里就使用它默认的一个位置来存放mongodb的data和log。

5 启动MongoDB服务

1	systemctl start mongod.service

我这里启动报错，后来我看到了这篇文章，（看高赞回答），我发现权限错误，我的/tmp/mongodb-27017.lock所有者是root，需要改为mongod。

permission settings on /var/lib/mongodb and /tmp/mongodb-27017.lock are wrong. You will have to change the owner to monogdb user

在xshell输入一下指令即可

1 2	chown -R mongod:mongod /var/lib/mongodb chown mongod:mongod /tmp/mongodb-27017.sock

6 验证服务开启

执行: mongo
输出： MongoDB shell version v5.0.9
connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb

到现在我们已经完成了部署难点的很大一部分。下面我们看看怎么在服务器运行我们三个项目

nginx设置代理

不需要懂nginx原理，我们可以先使用它看看。

参考这篇文章，我这里也引用一下

先查看服务器是否有nginx

1	whereis nginx

安装nginx

1	yum install -y nginx

查看nginx安装目录

命令如下：

1	whereis nginx

启动nginx

启动

nginx

直接输入nginx即可启动服务，打开浏览器，访问服务器公网地址，出现如下界面则代表启动成功。

这里访问默认的是80端口，因为nginx服务就是默认的80端口，如果不能访问，大致有几种原因：

nginx未启动
服务器安全组未加入80端口
nginx配置错误

停止

停止nginx服务，命令如下：

1	nginx -s stop

此时访问浏览器则无法访问。

重启

重启nginx服务，一般用于修改配置文件之后，命令如下：

1	nginx -s reload

配置nginx

nginx启动后，在浏览器上输入公网地址，就可以打开默认的一个html页面。

但是这个页面和端口都是默认的，如果需要显示我们自己的页面，就需要配置nginx，配置文件为/etc/nginx/nginx.conf，使用xftp找到该文件夹，并打开编辑。

也可以在xshell上cd找到并vim打开，但是这个很不方便，不能快速复制粘贴和定位。所以推荐使用我用xftp发现的隐藏功能。

在配置文件中，重点看server 对象，要改的也是这个对象，我的配置如下

  
# 默认端口
   server {
       listen       80 default_server;
       listen       [::]:80 default_server;
       server_name  _;
       root         /usr/share/nginx/html;

       # Load configuration files for the default server block.
       include /etc/nginx/default.d/*.conf;
       location / {
       }
       error_page 404 /404.html;
           location = /40x.html {
       }
       error_page 500 502 503 504 /50x.html;
           location = /50x.html {
       }
   }

# 前台展示的打开的服务代理
server {
       listen       8080;
       server_name  localhost;
	root         /root/lan/schoolstore/frontshop/dist;

       # Load configuration files for the default server block.
       # include /etc/nginx/default.d/*.conf;

       location / {
		root   /root/lan/schoolstore/frontshop/dist;
           index  index.html;
           try_files $uri $uri/ @router;
           autoindex on;
      }
   
    location @router{
           rewrite ^.*$ /index.html last;
       }

       location /api/ {
           proxy_set_header X-Real-IP $remote_addr;
           proxy_pass http://0.0.0.0:3000;
       }

       gzip on;

       gzip_buffers 32 4k;

       gzip_comp_level 6;

       gzip_min_length 200;

       gzip_types text/css text/xml application/javascript;

       gzip_vary on;

       #error_page  404              /404.html;
       # redirect server error pages to the static page /50x.html
       #
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }
   }

# 后台管理的服务代理
server {
       listen       9528;
       server_name  localhost;
	root         /root/lan/schoolstore/cms/dist;

       # Load configuration files for the default server block.
       # include /etc/nginx/default.d/*.conf;

	# 找到要渲染的页面
       location / {
           # try_files $uri $uri/ /index.html;
		root   /root/lan/schoolstore/cms/dist;
           index  index.html;
           try_files $uri $uri/ @router;
           autoindex on;
      }
   # 找到路由
    location @router{
           rewrite ^.*$ /index.html last;
       }
      # 后端数据
       location /api/ {
           proxy_set_header X-Real-IP $remote_addr;
           proxy_pass http://0.0.0.0:3000;
       }

       gzip on;

       gzip_buffers 32 4k;

       gzip_comp_level 6;

       gzip_min_length 200;

       gzip_types text/css text/xml application/javascript;

       gzip_vary on;

       #error_page  404              /404.html;
       # redirect server error pages to the static page /50x.html
       #
       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
           root   html;
       }
   }

主要就是修改root 和 location。

我开了两个代理的：前台展示打开的服务代理8080，和管理后台打开的服务代9528，这个项目是分开端口访问的。
修改配置文件后执行 nginx -s reload，如果项目已经上传，理论上访问ip:8080可以打开前台展示项目，访问ip:9528，可以打开后台展示项目。但是我们现在没讲到上传文件。所以会访问不成功，而80端口我还保留了默认的页面，还是可以访问到的，不妨试一试。

上传项目代码到服务器

主要有三个项目的文件需要上传：前台，后台，后端

我们先把后端部署好，前台上传比较容易，并且后端部署好后，前台部署可以拿到数据。

在服务器上使用nodejs

不着急直接上传nodejs文件，我们先看看服务器上nodejs怎么使用，因为一开始对于一个服务器小白来说，我们要上传什么东西都不知道，要不要打包也不知道，上传后端和前台一样也不知道。所以带着这些疑问，我们先上网搜搜，怎么在服务器上使用nodejs。

参考文章，主要看【步骤二：部署测试项目】，本文这里也给出步骤，主要是参考了这篇文章。

1 打开vscode，在自己电脑里新建一个example.js文件，复制一下代码，然后node example.js就可以在http://localhost:3000/看到·`hello word`

const http = require('http');
const hostname = '0.0.0.0';
const port = 3000;
const server = http.createServer((req, res) => { 
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World\n');
}); 

server.listen(port, hostname, () => { 
    console.log(`Server running at http://${hostname}:${port}/`);
});