記一次基于react、cra2、typescript的pwa項(xiàng)目由開發(fā)到部署（三）

Betta 發(fā)布于2019-07-25 14:36 / 2006人閱讀

摘要：配置反向代理我們的項(xiàng)目已經(jīng)在服務(wù)器上的端口運(yùn)行著，所以我們需要配置一個(gè)反向代理，將我們對(duì)服務(wù)器的訪問反向代理到服務(wù)器的。

該篇文章為本系列最后一篇文章，因?yàn)樽罱鼧侵髅τ诋呍O(shè)，所以這也是一篇被鴿了很久很久的文章。該文章主要講的是該項(xiàng)目的部署部分，包括：

如何部署將該項(xiàng)目部署到nginx服務(wù)器上。

為它配置證書，讓它運(yùn)行在https協(xié)議上等。

項(xiàng)目回顧

這是一個(gè)基于creat-react-app2的pwa項(xiàng)目。可以添加到主屏幕，可以離線運(yùn)行。項(xiàng)目地址： browseExpbyReact

本篇內(nèi)容其實(shí)完全可以脫離這個(gè)項(xiàng)目來看，以下內(nèi)容對(duì)于大多數(shù)個(gè)人 spa 項(xiàng)目的簡單部署都是適用的。

如何部署

該項(xiàng)目完成后如何部署到服務(wù)器呢？本項(xiàng)目使用的web服務(wù)器是 nginx。nginx是一個(gè)異步的web服務(wù)器，使用異步事件驅(qū)動(dòng)來處理請(qǐng)求，是一款面向性能設(shè)計(jì)的HTTP服務(wù)器。首先，為了讓我們?cè)L問到項(xiàng)目，我們需要給我們的項(xiàng)目配置一個(gè)反向代理，將我們對(duì)服務(wù)器的訪問代理到項(xiàng)目；然后，因?yàn)槲覀兊捻?xiàng)目是一個(gè)pwa項(xiàng)目，所以需要給它配置證書，升級(jí)為 https，以便讓我們可以體驗(yàn)到pwa的特性。

先編寫一個(gè)后端服務(wù)

首先我們要編寫一個(gè)后端服務(wù)，讓我們可以訪問到項(xiàng)目的入口頁，使用express來簡單編寫一個(gè)服務(wù)。

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，我們?cè)诒镜氐?003端口開啟了一個(gè)服務(wù)，用來訪問我們的項(xiàng)目。然后我們需要使用類似于 ftp 等工具將我們的項(xiàng)目上傳到我們的服務(wù)器，并運(yùn)行該node服務(wù)。那么現(xiàn)在我們的項(xiàng)目就在服務(wù)器上的3003端口運(yùn)行著。

配置反向代理

我們的項(xiàng)目已經(jīng)在服務(wù)器上的3003端口運(yùn)行著，所以我們需要配置一個(gè)反向代理，將我們對(duì)服務(wù)器的訪問反向代理到服務(wù)器的127.0.0.1:3003。在nginx相應(yīng)的文件夾下添加相關(guān)配置文件，通常為nginx文件夾下的conf.d文件夾，本項(xiàng)目在 etc/nginx/conf.d 下添加。在etc/nginx/conf.d 文件新建針對(duì)該項(xiàng)目的配置文件holyzheng-top-3002，這里的命名通常有一定的約定，方便自己組織區(qū)分項(xiàng)目，我的習(xí)慣為二級(jí)域名-一級(jí)域名-端口。在該文件里添加一下內(nèi)容：

upstream browseexpreact {
  server 127.0.0.1:3003; # 實(shí)例，對(duì)應(yīng)我們的項(xiàng)目
}

server {
  listen 80; # http監(jiān)聽的端口
  server_name browseexpreact.holyzheng.top; # 我要使用的ip域名
  error_page 405 =200 @405; # 允許對(duì)靜態(tài)資源進(jìn)行POST請(qǐng)求
  location @405 {
    proxy_pass http://browseexpreact;
  }
  rewrite ^(.*) https://$host$1 permanent; # 將http 重定向到 https
}

這里的配置的意思是將我們對(duì)該服務(wù)器的http（默認(rèn)端口80）請(qǐng)求反向代理到我們的服務(wù)器上 127.0.0.1:3003正在運(yùn)行的實(shí)例，也就是我們的項(xiàng)目。

升級(jí)為 https

要升級(jí)到https，首先要向我們的服務(wù)器商申請(qǐng)證書，然后將證書下載到本地，再上傳到自己的服務(wù)器上，通常放置于nginx文件夾下的cert文件夾里，本項(xiàng)目為/etc/nginx/cert。證書上傳到服務(wù)器后，修改我們的配置：

upstream browseexpreact {
  server 127.0.0.1:3003; # 實(shí)例
}

server {
  listen 80; # http監(jiān)聽的端口
  server_name browseexpreact.holyzheng.top; # 我要使用的ip域名
  error_page 405 =200 @405; # 允許對(duì)靜態(tài)資源進(jìn)行POST請(qǐng)求
  location @405 {
    proxy_pass http://browseexpreact;
  }
  rewrite ^(.*) https://$host$1 permanent; # 將https 重定向到 https
}

# 增加下面的配置
server {
  listen 443;
  server_name browseexpreact.holyzheng.top;
  # 這部分配置在申請(qǐng)證書的時(shí)候會(huì)有提示，復(fù)制粘貼就好
  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 = "") { # 判斷用戶是否輸入?yún)f(xié)議
    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; # 要代理的實(shí)例
  }
}

關(guān)于證書的配置，再申請(qǐng)證書的時(shí)候會(huì)有提示，將對(duì)應(yīng)的配置復(fù)制到自己的配置文件就好。配置中新增了關(guān)于https請(qǐng)求（默認(rèn)斷開443）的配置，將我們對(duì)服務(wù)器的https請(qǐng)求（默認(rèn)斷開443）反向代理到服務(wù)器中的127.0.0.1:3003正在運(yùn)行的實(shí)例，就是我們的項(xiàng)目。到目前為止，我們可以通過https請(qǐng)求來訪問我們的項(xiàng)目了。

讓項(xiàng)目持續(xù)后臺(tái)運(yùn)行

目前我們發(fā)現(xiàn)，只要我們把服務(wù)器端的控制臺(tái)關(guān)閉，那么express服務(wù)就會(huì)斷掉，就無法再訪問到這個(gè)項(xiàng)目了，所以我們需要一個(gè)工具讓我們的express服務(wù)持續(xù)的后臺(tái)運(yùn)行。本項(xiàng)目選用的工具為 PM2。PM2是一個(gè)帶有負(fù)載均衡功能的node應(yīng)用的進(jìn)程管理器，它能保證進(jìn)程一直運(yùn)行著，可以利用它在服務(wù)器上同時(shí)管理多個(gè)node項(xiàng)目。常用基本指令有：

npm install pm2 -g ： 全局安裝。
pm2 start app.js ： 啟動(dòng)服務(wù)，入口文件是app.js。
pm2 restart  [name or id] ： 重啟服務(wù)。
pm2 list : 查看正在運(yùn)行的項(xiàng)目清單
pm2 delete [name or id] ：刪除項(xiàng)目

借助 PM2 我們就可以讓我們的項(xiàng)目在服務(wù)器上持續(xù)運(yùn)行了。然后我們就可以通過https請(qǐng)求訪問我們的項(xiàng)目了。