記一次基於react、cra二、typescript的pwa項目由開發到部署（三）

該篇文章爲本系列最後一篇文章，由於最近樓主忙於畢設，因此這也是一篇被鴿了好久好久的文章。該文章主要講的是該項目的部署部分，包括：

1. 如何將該項目部署到nginx服務器上。
2. 爲它配置證書，讓它運行在https協議上等。

項目回顧

這是一個基於creat-react-app2的pwa項目。能夠添加到主屏幕，能夠離線運行。項目地址： browseExpbyReact

本篇內容其實徹底能夠脫離這個項目來看，如下內容對於大多數我的 spa 項目的簡單部署都是適用的。

如何部署

該項目完成後如何部署到服務器呢？本項目使用的web服務器是 nginx。nginx是一個異步的web服務器，使用異步事件驅動來處理請求，是一款面向性能設計的HTTP服務器。首先，爲了讓咱們訪問到項目，咱們須要給咱們的項目配置一個反向代理，將咱們對服務器的訪問代理到項目；而後，由於咱們的項目是一個pwa項目，因此須要給它配置證書，升級爲 https，以便讓咱們能夠體驗到pwa的特性。

先編寫一個後端服務

首先咱們要編寫一個後端服務，讓咱們能夠訪問到項目的入口頁 index.html，使用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請求訪問咱們的項目了。