如何在不影响UI的情况下更新AWS部署的Web应用生产代码？

一、蓝绿部署（最稳妥的无停机方案） #

• 准备两套独立部署环境：蓝环境是当前对外提供服务的版本，绿环境用来部署待更新的新版本
  • 在AWS上可以用EC2实例、ECS容器服务，或者Amplify的分支部署功能快速搭建两套环境
• 先在绿环境完成全流程更新：执行git pull拉取最新代码 → npm run build完成构建 → pm2 start app启动服务，确认绿环境的页面和接口都正常
• 通过AWS负载均衡器（ALB/NLB）切换流量：把所有用户请求从蓝环境直接切到绿环境
• 验证绿环境运行稳定后，再销毁蓝环境（也可以保留作为回滚备用）
• 回滚简单：如果绿环境出问题，直接把流量切回蓝环境就能恢复服务

二、滚动更新+静态资源版本化 #

• 给静态资源加版本哈希：修改前端框架的构建配置，让打包后的JS、CSS、图片等文件自动带上唯一哈希后缀（比如app.abc123.js），这样新老版本的静态资源不会互相覆盖，避免浏览器加载混合资源导致的错误
  • Vue、React这类主流框架的脚手架默认支持这个配置，只要确保publicPath设置正确就行
• 用pm2重载替代重启：不要直接用pm2 restart app，改用pm2 reload app——pm2会先启动新的应用进程，等新进程完全就绪后再杀死旧进程，全程不会断服务
• 离线构建：把npm run build的操作放到CI/CD流水线（比如AWS CodeBuild）或者本地完成，不要在生产服务器上构建，减少服务器负载，也避免构建期间占用资源导致的服务不稳定

三、静态资源托管到S3+CloudFront #

• 把前端build产物上传到AWS S3桶，用CloudFront作为CDN分发静态资源
• 更新时，先把新的build产物上传到S3（保留旧版本文件），然后触发CloudFront的缓存失效，或者修改缓存策略让用户加载新资源
• 后端服务（pm2管理的部分）单独部署，更新后端时用pm2 reload实现无停机重启
• 优势：静态资源更新和后端服务更新完全隔离，不会互相影响；CloudFront的全球缓存能加速用户访问，而且旧资源还在S3里，不会出现404错误

四、Nginx反向代理过渡流量 #

• 如果用Nginx做反向代理，可以配置两个upstream，分别指向旧版本和新版本的应用实例
• 更新时，先在服务器上启动新版本的应用（比如监听3001端口），然后修改Nginx配置，把流量逐步从旧实例（3000端口）转到新实例
• 比如先切10%流量验证没问题，再全量切换；如果出问题，改回旧配置重载Nginx就能回滚
• 简单配置示例：

  upstream app_old {
      server 127.0.0.1:3000;
  }
  upstream app_new {
      server 127.0.0.1:3001;
  }
  server {
      listen 80;
      location / {
          proxy_pass http://app_old; # 初始指向旧版本
      }
  }
  

  更新时把proxy_pass改成http://app_new，执行nginx -s reload重载配置即可

内容的提问来源于stack exchange，提问作者smzapp