记一次基于react、cra2、typescript的pwa项目由开发到部署（三）

Betta 发布于2019-07-25 14:36 / 1997人阅读

摘要：配置反向代理我们的项目已经在服务器上的端口运行着，所以我们需要配置一个反向代理，将我们对服务器的访问反向代理到服务器的。

该篇文章为本系列最后一篇文章，因为最近楼主忙于毕设，所以这也是一篇被鸽了很久很久的文章。该文章主要讲的是该项目的部署部分，包括：

如何部署将该项目部署到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项目记一次在阿里云搭建服务器记一次阿里云服务器集体中毒把做好的项目部署到云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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