内容简介:该篇文章为本系列最后一篇文章,因为最近楼主忙于毕设,所以这也是一篇被鸽了很久很久的文章。该文章主要讲的是该项目的部署部分,包括:这是一个基于creat-react-app2的pwa项目。可以添加到主屏幕,可以离线运行。项目地址:本篇内容其实完全可以脱离这个项目来看,以下内容对于大多数个人 spa 项目的简单部署都是适用的。
该篇文章为本系列最后一篇文章,因为最近楼主忙于毕设,所以这也是一篇被鸽了很久很久的文章。该文章主要讲的是该项目的部署部分,包括:
- 如何将该项目部署到nginx服务器上。
- 为它配置证书,让它运行在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请求访问我们的项目了。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- linux 部署golang 项目(直接部署和基于nginx部署)
- 【Vue项目总结】项目nginx部署
- CentOS 部署 flask项目
- Docker 部署Python项目
- 【前端打包部署】谈一谈我在SPA项目打包=>部署的处理
- 「实战篇」开源项目docker化运维部署-后端java部署(七)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。