K8s中Nginx部署React应用旧静态文件404问题求解决方案

针对你在Kubernetes中部署React+Nginx镜像时，滚动更新出现旧静态资源404的问题，以下是几个无需依赖外部存储的简洁解决方案：

1. 调整Deployment滚动更新策略，延长旧Pod存活时间 #

默认滚动更新策略下，旧Pod会在新Pod就绪后快速销毁，导致仍持有旧资源引用的请求（比如LogRocket的缓存）无法找到对应文件。可以通过调整策略让旧Pod在新Pod稳定后再保留一段时间：

• 设置maxUnavailable: 0：确保更新过程中始终有足够的旧Pod提供服务，不会出现无可用旧Pod的情况
• 增加minReadySeconds: 30：让新Pod就绪后等待30秒，确认服务稳定后再开始销毁旧Pod
• 调大terminationGracePeriodSeconds: 120：给旧Pod额外2分钟的时间处理剩余请求，之后再彻底销毁

示例Deployment配置片段：

spec:
  strategy:
    rollingUpdate:
      maxSurge: 25%
      maxUnavailable: 0
    type: RollingUpdate
  minReadySeconds: 30
  terminationGracePeriodSeconds: 120

2. 新镜像中包含最近1-2个版本的静态资源 #

在CI打包时，将上一版本的静态资源（仅哈希命名的文件，不覆盖index.html）复制到新镜像中，这样新Pod也能响应旧资源的请求。这种方案无需外部存储，仅通过Dockerfile调整即可实现：

• 在CI流程中记录上一版本的镜像标签，作为构建参数传入Dockerfile
• 从旧镜像中复制静态资源到新镜像的对应目录

示例Dockerfile片段：

# 拉取上一版本镜像（CI传入PREVIOUS_IMAGE_TAG参数）
ARG PREVIOUS_IMAGE_TAG
FROM your-react-app:${PREVIOUS_IMAGE_TAG} AS previous-build

# 构建新版本应用
FROM node:18-alpine AS new-build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 最终镜像基于Nginx
FROM nginx:alpine
# 复制新版本静态文件
COPY --from=new-build /app/build /usr/share/nginx/html
# 复制上一版本的JS/CSS及sourcemap文件
COPY --from=previous-build /usr/share/nginx/html/static/js/*.js* /usr/share/nginx/html/static/js/
COPY --from=previous-build /usr/share/nginx/html/static/css/*.css* /usr/share/nginx/html/static/css/

3. 针对LogRocket AssetCacher优化缓存策略 #

既然多数404来自LogRocket的缓存，可以直接调整它的配置，减少对旧资源的缓存依赖：

• 缩短缓存时长，让LogRocket更快获取新版本资源
• 忽略sourcemap文件的缓存（因为map文件仅用于调试，不影响用户体验）

示例LogRocket初始化配置：

LogRocket.init('your-app-id', {
  assetCacheOptions: {
    cacheDuration: 3600, // 缓存时长改为1小时（默认可能更长）
    ignoreAssets: [/\.map$/], // 跳过对.map文件的缓存
  },
});

4. 优化React打包的资源命名与引用 #

可以调整React的打包配置，给静态资源添加版本前缀（比如/static/v2/xxx.js），同时确保index.html只引用对应版本的资源。这种方式下，旧版本的资源路径与新版本完全隔离，滚动更新时旧Pod仍服务旧路径的请求，新Pod服务新路径，配合maxUnavailable:0的策略，能彻底避免跨版本的资源请求冲突。

示例craco.config.js（针对Create React App）配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.output.assetModuleFilename = 'static/v[contenthash]/[name][ext]';
      webpackConfig.output.filename = 'static/v[contenthash]/[name].js';
      webpackConfig.output.chunkFilename = 'static/v[contenthash]/[name].chunk.js';
      return webpackConfig;
    },
  },
};

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