前端项目上线

爱工作的小白
124 阅读4分钟

新项目大概做了两个多月.... 准备上线, 准确的说应该是要进行灰度测试

生产环境项目的部署

  • EC2虚拟机部署
    记得第一个项目上线的时候自己前后端一块写,就是用虚拟机, 要安装各种环境, jdk, mysql, 安装完把打包好的jar包通过ssh放到Tomcat里面

    后来开始前端段分离, 前端项目开始用nginx容器, 但还是在EC2里面,需要自己搭建环境
    需要注意单页面应用下history路由模式下的nginx配置

    location / {
    try_files $uri $uri/ /index.html;
}

  • docker和Pass
    之后为了解决环境每次搭建的问题, 开始推荐docker, 需要自己写dockerfile. 但公司内部有pass的话很简单, dcokerfile都帮自己写好了,不需要改动. 但需要提前在pass里面配置好nginx.conf, 公司有模板, 自己只需要简单修改下接口代理部分

    我司是有ci/cd那一套, 都是在pass里面完成了. 就是各种资源申请比较麻烦, 但部署很简单了.

    项目发布我是花了两天, 公司开通pass权限需要考试, 考了好几次才通过, 之后又熟悉各种运维平台.

    所以刚进入公司的一定要看看对应的网课视频

开发环境的部署

记得之前项目有开发环境,测试环境,生产环境. 最少3个.

  • 一般开发环境没必要再走这一套配置, 直接在EC2上, git clone, npm install , npm dev即可, 这样更敏捷一点, 有bug了,也可以直接ssh连到服务器修改. bug 改好了再提交

  • 小项目的话, 测试环境其实也没必要... . 我写代码，都是在开发环境测试好了才提交。 没必要单独再测试。。 （背景主要是因为前端就自己一个人开发，测试也是自己一个人测试）

  • 生产环境， 发布之前一定要记得灰度。

  • 项目灰度期间的一些bug.

    这些bug 基本是开发测试环境无法复现的问题, 梳理一下

nohub

前面说过开发环境可以直接在ec2上npm dev运行,但如果dev对应的控制台关闭, 应用就会停止,所以要使其后台启动

nohup是Linux和Unix系统中的一个命令，其作用是在终端退出时，让进程在后台继续运行。它的全称为“no hang up”，意为“不挂起”。nohup命令可以让你在退出终端或关闭SSH连接后继续运行命令。

要在后台运行命令，只需要在命令行中输入以下命令即可：

nohup COMMAND &

比如npm dev

nohup npm dev &

juejin.cn/post/721585…

mac OS：两个小命令:

lsof -i :端口 kill -9 进程ID

linux ： 查看端口： netstat -an | grep 23

开发环境容易忽略的bug

Mixed Content xx错误

错误一

Mixed Content the site was loaded over a secure connection but the file at was loaded over an insecu

错误二

Mixed Content: The site at 'https://' was loaded over a secure connection, but the file at 'files.xxxx.cn/' was redirected through an insecure connection. This file should be served over HTTPS. See blog.chromium.org/2020/02/pro… for more details.

https页面上对http资源的请求bug

开发测试我们用的是http协议, 如果引入http资源是正常的 ,
但生产环境为https协议, 生产环境https协议页面下不能去请求和下载http的资源. 这个不注意的话只有项目上线才能复现

解决: 有以下几种方法

  1. 服务器设置资源请求头 CSP : upgrade-insecure-requests

  2. 页面设置meta
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> www.cnblogs.com/hustskyking…

  3. 对于a标签下载文件, 只能让对应资源文件支持https. 好在现在基本资源都支持了https

    function downloadResource(url: string) {
    if (url.startsWith('http:')) {
      url = url.replace('http:', 'https:');
    } 
     const anchor =  document.createElement('a');
     anchor.href = url;
     anchor.click();

}

Nginx相关

window下nginx的安装和配置

blog.csdn.net/strggle_bin…

docker+nginx+react具体配置流程和这篇博文差不多 docker+react+nginx部署

FROM nginx
COPY ./build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
# COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

nginx的配置写在项目根目录下面, 使用的时候直接把他拷贝到指定位置即可

但大部分公司的docker和nginx都配置好看了, 直接在pass上修改接口代理即可

nginx.org/en/docs/beg…

segmentfault.com/a/119000004…

history路由模式下的nginx配置 

try_files字段

location / { 
   try_files $uri $uri/ /index.html; 
}
avatar
文章
阅读
粉丝