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

Betta 發布于2019-07-25 14:36 / 1999人閱讀

摘要：配置反向代理我們的項目已經在服務器上的端口運行著，所以我們需要配置一個反向代理，將我們對服務器的訪問反向代理到服務器的。

該篇文章為本系列最后一篇文章，因為最近樓主忙于畢設，所以這也是一篇被鴿了很久很久的文章。該文章主要講的是該項目的部署部分，包括：

如何部署將該項目部署到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請求訪問我們的項目了。

云服務器 GPU云服務器怎么部署react項目記一次在阿里云搭建服務器記一次阿里云服務器集體中毒把做好的項目部署到云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/40275.html

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

摘要：在上一篇文章記一次基于的項目由開發到部署一中，我們了解到了給我們提供了哪些支持，也了解到了有哪些不足。項目回顧這是一個移動端的應用，使用，，，，基于開發。可以添加到主屏幕，可以斷網條件下正常打開和訪問數據。在上一篇文章記一次基于react、cra2、typescript的pwa項目由開發到部署（一）中，我們了解到了create-react-app 給我們提供了哪些pwa支持，也了解到...

Prasanta 2019-08-23 12:37 評論0 收藏0
2018前端值得關注的技術

摘要：年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。自從谷歌提出后，就持續的獲得了業界的關注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應用同等的待遇與權限。但是無論都值得關注。 1.前言 2017悄然過去，2018已經來到。人在進步，技術在發展。2018年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。下面就我個人的判斷進行一個預測判斷，希望能對大家...

xiao7cn 2019-08-29 14:12 評論0 收藏0
2018前端值得關注的技術

摘要：年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。自從谷歌提出后，就持續的獲得了業界的關注，熱度可見一斑。就在今年，谷歌也宣布將獲得與安卓原生應用同等的待遇與權限。但是無論都值得關注。 1.前言 2017悄然過去，2018已經來到。人在進步，技術在發展。2018年前端有哪些領域，技術值得關注，哪些技術會興起，哪些技術會沒落。下面就我個人的判斷進行一個預測判斷，希望能對大家...

用戶84 2019-08-21 18:42 評論0 收藏0
2017前端發展回顧

摘要：前端開發在年依然持續火熱，本文將對熱點事件做一個總結。版的和協議在前端領域，一直獨占鰲頭。年又發布了一個重大的版本更新。主要是配合使用了服務工作線程。而且還提供了供前端開發者接入。快速發布了和在悄悄地跳過之后，在月號正式發布。譯者按：老技術日趨成熟，新技術層出不窮。原文: A recap of front-end development in 2017 譯者: Fundebu...

lmxdawn 2019-08-22 13:47 評論0 收藏0
2017前端技術大盤點

摘要：同時，前端技術也慢慢的趨于穩固，自成一套體系。從月份開始，微信正式將公測了小程序。基于小程序的開發，也將成為國內的前端的一大重點。前言臨近2017的尾聲，總是希望來盤點一下這一年中前端的發展。到目前為止，前端的井噴期也快臨近尾聲了。并不像幾年前一樣，總是會有層出不窮的新東西迸發出來。同時，前端技術也慢慢的趨于穩固，自成一套體系。如果你喜歡我的文章，歡迎評論，歡迎Star~。歡迎關注...

y1chuan 2019-08-29 14:07 評論0 收藏0