React+React-Redux+Webpack+Express+MongoDB完整项目利用PM2+github部署到服务器

简述

本篇文章主要是用来做个人记录，加深印象，也便于日后翻查。项目是基于慕课网视频做出的一个完整项目，从前端到后台到数据库再到部署到服务器, 服务器没有设置防火墙。

项目概述

本篇文章主要集中于项目部署到服务器上,所以对于项目具体内容碰到了就稍微介绍一点：

1. 前端：React 16 、React-Redux、React-Router4、Axios、antd-mobile、webpack4 ；
2. 后端：Express、mongoose、socket . io；
3. 数据库：mongoDB；
4. 服务器：腾讯云 ubuntu 16.04 ；
5. 其他：nginx、git、 Xshell；

项目文件和代码结构

server/server.js是项目后台的入口文件，所以当部署时，只需要启动这个文件即可

在server.js中有一段代码是定义静态资源地址，如下：

//静态资源地址
app.use('/', express.static(path.resolve('build')));
app.use(function(req, res, next) {
    if(req.url.startsWith('/user/') || req.url.startsWith('/static/')) {
        return next();
    }
    return res.sendFile(path.resolve('build/index.html'));
})

中间件拦截所有的请求，如果路由没有/user和/static返回build文件夹下的index.html,反之交给后续中间件处理

登录到服务器

使用Xshell登录到服务器：

注意：当前登录用户为root，腾讯云默认是ubuntu，更改腾讯云默认用户为ubuntu解决方案，更改后使用root用户登录，一般来说不建议用root用户，我部署时候碰到了太多的坑都是因为用户是ubuntu引起、各种权限不足，不知道怎么解决，所以直接用root用户了

输入指令：

第一步：

更新系统：sudo apt-get update

第二步：

更新完后安装相关模块包( 不能全部安装就逐个安装)：sudo apt-get install vim openssl build-essential libssl-dev wget curl git

第三步：

安装nvm(可去官网查)： wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

第四步：

查看nvm版本：nvm --version

第五步：

安装node6.9.5：nvm install v6.9.5

第六步：

指定版本: nvm use v6.9.5

第七步：

指定系统默认node版本：nvm alias default v6.9.5

第八步：

修改默认值: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

第九步：

安装node项目需要的包: npm i pm2 webpack -g

第十步：

如果第九步很慢可以更换npm源: npm --registry=https://registry.npmmirror.com install -g npm

上述十步没错的话，可以编写一个test.js运行一下

输入： cd
在输入：sudo vim test.js
进入vim编辑器，输入如下代码(不会vim操作的可以百度)

//test.js
const httpServer = require("http");
const server = httpServer.createServer(function(req, res){
  res.end("node server start successful on 7777");
}).listen(7777);
console.log("node server start successful on 7777");

保存并退出，用pm2启动该文件

pm2 start test.js

查看当前pm2管理的node进程，app name 为 test就是刚刚启动的进程了，如果restart很多次的话，有可能是代码出错了，一直在重启。

pm2 list

查看pm2打印的日志。成功后也可以进入浏览器输入ip+端口看。

pm2 logs

现在已经完成了登录服务器，并且安装了相关的依赖。

安装和配置nginx

第一步：

云服务器有可能默认有apache服务器，需要将它删除：sudo service apache2 stop

出现：apache2:unrecognized service 说明没有这个服务

第二步：

再执行：sudo service apache stop

出现：apache:unrecognized service 说明没有这个服务，出现类似的结果，说明没有apache服务

第三步：

如果有的话执行：update-rc.d -f apache2 remove
再：sudo apt-get remove apache2

第四步：

再更新列表：sudo apt-get update

第五步：

再安装nginx：sudo apt-get install nginx

第六步：

安装完成之后检查nginx版本：nginx -v

第七步：

进入nginx目录： cd /etc/nginx/
再：ls
有一个conf.d文件夹：cd conf.d

第八步：

再新建一个配置文件：sudo vi test.conf(文件名)

upstream Website { //配置名
  server 127.0.0.1:7777; //监听的本地端口
}
server {
  listen 80;
  server_name www.xxx.com; //域名

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_pass http://Website; //和配置名相同
    proxy_redirect off;
  }
}

完成后保存并退出

第九步：找到nginx配置文件，让新建的配置文件生效

进入nginx目录：cd /etc/nginx/
找到nginx.conf文件并进入：sudo vi nginx.conf

找到： include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*
如果两行前面有#注释掉了，就删除#，因为这是让配置文件生效 完成后保存退出

第十步：

再执行：sudo nginx -t
在重启nginx：sudo nginx -s reload

现在可以在浏览器通过域名来访问，就可以和刚刚的结果一样。

安装MongoDB

这个可以参考官方文档： 选择installation,选择intall MongoDB Community Edition社区版本 for Linux on Ubuntu。（记得选择文档版本为3.4，本次安装的版本为3.4。ubuntu的版本为16.04）

按照官网版步骤来：
1.导入包管理系统使用的公钥
2.为MongoDB创建一个列表文件
3.重新加载本地包数据库
4.安装MongoDB包

安装完成之后显示：Setting up mongodb-org (3.4.20)

启动mongoDB：sudo service mongod start
查看mongoDB是否启动： netstat -lanp | grep “27017”

打通三端，客户端+github+服务器

本次部署是本地代码上传到github仓库，然后再在本地上利用pm2 deployment 来让服务器拉取github代码实现部署，所以需要三端的配合

本地到github

第一步：

生成密钥对: ssh-keygen -t rsa -b 4096 -C “你的邮箱地址”

操作中会有三步需要输入，不用输入，直接Enter键，完成后生成三个文件：
id_rsa是私钥，id_rsa.pub是公钥

第二步：

公钥：cat ~/.ssh/id_rsa.pub

复制生成的公钥到github,点击头像，setting, SSH and GPG keys,粘贴到 new SSH key

第三步：测试，本地打开git bush

git clone (项目地址)

成功克隆下来了，这一步走通了

服务器到github

和本地到github的操作一样

第一步：

生成密钥对: ssh-keygen -t rsa -b 4096 -C “你的邮箱地址”

操作中会有三步需要输入，不用输入，直接Enter键，完成后生成三个文件：
id_rsa是私钥，id_rsa.pub是公钥

第二步：

公钥：cat ~/.ssh/id_rsa.pub

复制生成的公钥到github,点击头像，setting, SSH and GPG keys,粘贴到 new SSH key

第三步：创建一个文件夹mkdir test;进入cd test

git clone (项目地址,用ssh格式)

克隆下来了，这一步就走通了

本地到服务器

第三步：进入到服务器，新建一个填写公钥的文件

vim ~/.ssh/authorized_keys

第三步：到本地复制本地的公钥到上一步的文件中，保存并退出

cat ~/.ssh/id_rsa.pub

第三步：测试

ssh username@xxx.xxx.xxx.xxx

如果不行的话，可以进入服务器，然后输入红色命令修改这个配置文件三个字段如下：

vi /etc/ssh/sshd_config
RSAAuthentication yes
PubkeyAuthentication yes
PasswordAuthentication no

进一步测试，通过，三端就打通了。

pm2部署

在本地安装pm2,打开gitbush并输入命令

npm install pm2 -g

检查版本

pm2 -v

用pm2部署，在部署的项目根目录下新建一个ecosystem.json文件，文件配置参照官网(官网有可能会被墙，多刷新几次)配置
贴出我的配置。

{
    "apps": [
        {
            "name": "Website",//项目名
            "script": "./server/server.js", //入口文件
            "env": {
                "COMMON_VARIABLE": "true"
            },
            "env_production": { //注入node的环境变量
                "NODE_ENV": "production"
            }
        }
    ],
    "deploy": {
        "production": {
            "user": "root", //服务器登录用户
            "host": "118.25.16.173",//服务器ip
            "ref": "origin/master",//分支
            "repo": "git@github.com:chengminying/react-demos.git", //git仓库
            "path": "/www/Website/production",//项目在服务器的路径
            "ssh_options": "StrictHostKeyChecking=no",
            //克隆到服务器后项目需要执行的命令
            "post-deploy": "npm install --registry=https://registry.npm.taobao.org && pm2 startOrRestart ecosystem.json --env production && npm run build",
            "env": { //注入node的环境变量
                "NODE_ENV":"production"
            }
        }
    }
}

保存

初始化pm2

pm2 deploy ecosystem.json production setup

在这一步中最容易碰到文件夹权限不够问题，可以自己根据配置文件中服务器项目路径自己创建好文件夹。然后更改文件夹权限例：chmod 700 test

部署项目

pm2 deploy ecosystem.json production

这一步容易碰到服务器依赖包找不到的问题。具体问题百度一下

总结

这次部署是我第一次在部署项目，所以碰到了太多坑，就不能一一例举出来了，我部署项目上线花了三天时间，每次碰到一个坑就卡主2-3个小时(一个ubuntu权限卡了一天)，中途差点放弃了。
所以需要记录下来加深印象，也便于以后出现类似问题好查找。此文章中有什么错误的还希望指出.。
这篇文章说到的都是我从慕课网上学习的一套视频上所讲的，视频上更加全面。《Node.js项目线上服务器部署与发布》。