如何修改部署在AWS EC2上的生产环境ReactJS项目？新build替换不生效求助

1. 优先排除浏览器本地缓存干扰 #

• 直接打开无痕/隐私窗口访问线上地址，如果改动在无痕窗口正常显示，说明是本地浏览器强缓存导致旧页面被加载，清理对应站点的浏览器缓存即可解决
• 常规强制刷新操作：Windows/Linux 系统按 Ctrl + Shift + R，Mac 系统按 Cmd + Shift + R，跳过本地缓存直接拉取最新资源
• 打开浏览器开发者工具的Network面板，校验当前加载的JS、CSS文件的命名：React生产构建的静态资源会自带内容哈希（例如static/js/main.7c29e0d1.js），如果面板里显示的文件哈希和你本地新build文件夹里的文件哈希不一致，说明页面拉取的根本不是新上传的资源

2. 校验服务器端文件实际状态 #

• 登录AWS对应的实例（EC2托管就通过SSH登录服务器，S3静态托管就进入S3控制台查看对象列表），找到Web服务实际读取静态文件的根目录，核对目录下文件的修改时间、文件大小，和本地新生成的build内容逐一比对，排除FTP上传中断、文件权限不足导致旧文件没被成功覆盖的问题
• 核对Web服务的根路径配置：比如Nginx的root指令、Apache的DocumentRoot配置，确认服务实际读取静态文件的目录，就是你通过FTP上传新build的目录，避免出现新文件传到目录A、服务一直读目录B旧文件的低级失误

3. 排查中间层缓存影响 #

• 如果你的AWS架构中用了CloudFront做静态资源分发，CloudFront默认会把静态资源缓存到全球边缘节点，哪怕源站文件已经替换完成，只要边缘节点的旧缓存还没到过期时间，用户访问时拉到的还是旧内容，需要手动触发对应资源路径的缓存失效操作，等边缘节点回源拉取新文件后，改动才会对用户可见
• 检查Web服务本身的缓存配置：如果Nginx配置给静态资源设置了过长的强缓存时间，且没有针对新构建的带哈希资源做正确的缓存规则匹配，也会导致用户一直命中服务端的旧缓存

4. 校验本地构建产物有效性 #

• 先核对本地新build的实际内容：确认打build的代码分支包含你的全部改动，没有出现代码未保存、构建时加载了旧环境变量、打包流程拉取了旧分支代码的问题，避免上传的包本身和旧包没有差异
• 检查package.json里的homepage配置，确保构建出的资源引用路径和实际线上的托管路径匹配，避免出现资源路径错配，导致页面一直加载旧路径下的历史文件

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