跳到主要内容

谈谈部署相关问题

缓存问题​

原因: 一些文件,比如配置文件,每次修改,部署发版,都导致因为缓存,拿不到最新的文件,可能会报错或者拿不到最新的数据

  • 1、打包的静态文件,生成随机数hash
  • 2、配置文件加上参数随机数,每次发版部署请求文件都会是拿到最新的文件
js
<script
type="text/javascript"
src="config.js?t=<%=+new Date()%>"
></script>
  • 3、禁止index.html缓存
    • 比如缓存了index.html,静态资源都放在了CDN,那么前端每次部署更新的时候,由于了缓存了index.html,页面及时强刷新了,也是看到旧的内容,旧的index.html。因为index.html引用的js、css的脚本都是旧的,如果不禁止缓存index.html, 会导致需要刷新CDN (去源站拿到最新资源), 用户才能看到最新的内容

html禁止缓存​

  • 通过 html meta 标签禁用缓存:
  • 这些meta标签有助于兼容旧版浏览器,但现代浏览器主要依赖HTTP响应头来决定缓存策略。因此,结合服务器端配置会更有效
html
<!DOCTYPE html>
<html lang="en">
<head>

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

</head>
</html>

静态资源存放到CDN问题​

  • 1、前端打包好的静态资源放到CDN、进行资源内容分发的网络加速

  • 2、利用CDN加速访问资源

  • 3、设置CDN的静态资源缓存策略

  • 4、每次发布之后,需要刷新CDN,可以通过刷新CDN的脚本

修改pm2启动node端口​

  • 1、通过pm2的配置文件
  • 2、指定env参数,设置node的环境变量端口PORT
js
module.exports = {
apps: [
{
name: 'my-nuxt-demo',
// 多进程集群模式、让PM2 管理多个 Node.js 实例
exec_mode: 'cluster',
instances: 'max',
script: './.output/server/index.mjs',
autorestart: true,
watch: false,
max_memory_restart: '1G',
env: {
"PORT": 3000,
"NODE_ENV": 'production',
},
// 预发布环境
env_pre: {
"PORT": 3001,
"NODE_ENV": "production",
},
// 生产环境
env_prod: {
"PORT": 3002,
"NODE_ENV": "production",
},
out_file: './logs/pm2-out.log',
error_file: './logs/pm2-error.log',
log_date_format: 'YYYY-MM-DD HH:mm:ss',
},
],
}
  • 使用指定的环境变量
bash
pm2 start ecosystem.config.js --env pre # 使用 env_pre
pm2 start ecosystem.config.js --env prod # 使用 env_prod

查看监听的端口​

  • node应用
    • 通过pm2来启动的话,可以通过pm2 logs查看
  • netstat命令
    • 网络状态分析命令
  • curl命令
    • 发送网络请求命令工具
    • 检查是否有返回响应体内容
bash
# 查看pm2日志 可以通过pm2 log查看pm2启动的日志,里面可以看到监听的端口
pm2 log
# 使用netstat命令
# windows
netstat -ano | findstr 3002
# linux
netstat -tulnp | grep 3002
# curl命令
curl 127.0.0.1:3002

前端部署新版本,旧版本访问报错问题​

当你重新部署前端时:

  1. 旧版本用户 正在访问页面
  2. 浏览器依赖 旧的 HTML,里面引用的是旧的 *.js、*.css
  3. 你上传新版本时 直接覆盖 dist 文件夹
  4. 服务器删掉了旧版本文件
  5. 用户刷新前访问旧 JS → 文件 404 → 页面报错或白屏

否则老用户还没刷新页面,就找不到旧文件了

方案1:

  • 静态文件开启 Hash + 保留多版本 dist 文件

  • 解决方式:为每次发布保留一个独立目录

    bash
    /var/www/html/web-app/20251114/dist
    /var/www/html/web-app/20251113/dist
    /var/www/html/web-app/20251112/dist
    • 然后修改 nginx:
    text
    root /var/www/html/releases/20251114/dist;
    • 或者使用一个软链接:
    text
    /var/www/html/current -> /var/www/html/releases/20251114/dist
    • 发布时:
    text
    ln -sfn /var/www/html/releases/20251115/dist /var/www/html/current

新用户访问新版本

  • 老用户继续访问旧版本(因为旧资源仍然存在)
  • 不会 404、不白屏
  • 等老用户全部关闭/刷新浏览器后,旧版本自然不再访问

总结​

该方案,也是企业级方案推荐

  • 每次发布使用一个独立 dist 目录
  • Nginx root 指向当前版本(软链接切换)
  • HTML 禁止缓存,JS/CSS 可缓存

前端上线时永远不要覆盖旧版本资源,而是「发布新版本」+「保留旧版本资源」,让老用户能继续访问旧资源,新用户访问最新版本。