共计 3115 个字符，预计需要花费 8 分钟才能阅读完成。
该篇文章为本系列最后一篇文章，因为最近楼主忙于毕设，所以这也是一篇被鸽了很久很久的文章。该文章主要讲的是该项目的部署部分，包括：
如何部署将该项目部署到 nginx 服务器上。
为它配置证书，让它运行在 https 协议上等。
项目回顾
这是一个基于 creat-react-app2 的 pwa 项目。可以添加到主屏幕，可以离线运行。项目地址：browseExpbyReact
本篇内容其实完全可以脱离这个项目来看，以下内容对于大多数个人 spa 项目的简单部署都是适用的。
如何部署
该项目完成后如何部署到服务器呢？本项目使用的 web 服务器是 nginx。nginx 是一个异步的 web 服务器，使用异步事件驱动来处理请求，是一款面向性能设计的 HTTP 服务器。首先，为了让我们访问到项目，我们需要给我们的项目配置一个反向代理，将我们对服务器的访问代理到项目；然后，因为我们的项目是一个 pwa 项目，所以需要给它配置证书，升级为 https，以便让我们可以体验到 pwa 的特性。
先编写一个后端服务
首先我们要编写一个后端服务，让我们可以访问到项目的入口页，使用 express 来简单编写一个服务。
const fs = require(‘fs’)
const path = require(‘path’)
const express = require(‘express’)
const app = express();
app.use(express.static(path.resolve(__dirname, ‘./build’)))
app.get(‘*’, function(req, res) {
const html = fs.readFileSync(path.resolve(__dirname, ‘./build/index.html’), ‘utf-8’)
res.send(html)
})
app.listen(3003, function() {
console.log(‘server listening on port 3003!’)
})
通过 express，我们在本地的 3003 端口开启了一个服务，用来访问我们的项目。然后我们需要使用类似于 ftp 等工具将我们的项目上传到我们的服务器，并运行该 node 服务。那么现在我们的项目就在服务器上的 3003 端口运行着。
配置反向代理
我们的项目已经在服务器上的 3003 端口运行着，所以我们需要配置一个反向代理，将我们对服务器的访问反向代理到服务器的 127.0.0.1:3003。在 nginx 相应的文件夹下添加相关配置文件，通常为 nginx 文件夹下的 conf.d 文件夹，本项目在 etc/nginx/conf.d 下添加。在 etc/nginx/conf.d 文件新建针对该项目的配置文件 holyzheng-top-3002，这里的命名通常有一定的约定，方便自己组织区分项目，我的习惯为二级域名 - 一级域名 - 端口。在该文件里添加一下内容：
upstream browseexpreact {
server 127.0.0.1:3003; # 实例，对应我们的项目
}
server {
listen 80; # http 监听的端口
server_name browseexpreact.holyzheng.top; # 我要使用的 ip 域名
error_page 405 =200 @405; # 允许对静态资源进行 POST 请求
location @405 {
proxy_pass http://browseexpreact;
}
rewrite ^(.*) https://$host$1 permanent; # 将 http 重定向到 https
}
这里的配置的意思是将我们对该服务器的 http（默认端口 80）请求反向代理到我们的服务器上 127.0.0.1:3003 正在运行的实例，也就是我们的项目。
升级为 https
要升级到 https，首先要向我们的服务器商申请证书，然后将证书下载到本地，再上传到自己的服务器上，通常放置于 nginx 文件夹下的 cert 文件夹里，本项目为 /etc/nginx/cert。证书上传到服务器后，修改我们的配置：
upstream browseexpreact {
server 127.0.0.1:3003; # 实例
}
server {
listen 80; # http 监听的端口
server_name browseexpreact.holyzheng.top; # 我要使用的 ip 域名
error_page 405 =200 @405; # 允许对静态资源进行 POST 请求
location @405 {
proxy_pass http://browseexpreact;
}
rewrite ^(.*) https://$host$1 permanent; # 将 https 重定向到 https
}
# 增加下面的配置
server {
listen 443;
server_name browseexpreact.holyzheng.top;
# 这部分配置在申请证书的时候会有提示，复制粘贴就好
ssl on;
ssl_certificate /etc/nginx/cert/cert-1540814527008_browseexpreact.holyzheng.top.crt;
ssl_certificate_key /etc/nginx/cert/cert-1540814527008_browseexpreact.holyzheng.top.key;
ssl_session_timeout 5m;
ssl_protocols SSLv2 SSLv3 TLSv1;
ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
ssl_prefer_server_ciphers on;
if ($ssl_protocol = “”) {# 判断用户是否输入协议
rewrite ^(.*) https://$host$1 permanent;
}
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://browseexpreact; # 要代理的实例
}
}
关于证书的配置，再申请证书的时候会有提示，将对应的配置复制到自己的配置文件就好。配置中新增了关于 https 请求（默认断开 443）的配置，将我们对服务器的 https 请求（默认断开 443）反向代理到服务器中的 127.0.0.1:3003 正在运行的实例，就是我们的项目。到目前为止，我们可以通过 https 请求来访问我们的项目了。
让项目持续后台运行
目前我们发现，只要我们把服务器端的控制台关闭，那么 express 服务就会断掉，就无法再访问到这个项目了，所以我们需要一个工具让我们的 express 服务持续的后台运行。本项目选用的工具为 PM2。PM2 是一个带有负载均衡功能的 node 应用的进程管理器，它能保证进程一直运行着，可以利用它在服务器上同时管理多个 node 项目。常用基本指令有：
npm install pm2 -g：全局安装。
pm2 start app.js：启动服务，入口文件是 app.js。
pm2 restart [name or id]：重启服务。
pm2 list : 查看正在运行的项目清单
pm2 delete [name or id]：删除项目
借助 PM2 我们就可以让我们的项目在服务器上持续运行了。然后我们就可以通过 https 请求访问我们的项目了。
