Docker构建时Yarn build不生成index.html，手动执行正常（Nginx/React/Django）

一、解决yarn build构建阶段不生成index.html的问题 #

核心排查方向 #

1. Docker构建上下文与缓存问题
   • 执行docker-compose build --no-cache frontend强制清理缓存重新构建，避免旧缓存层导致依赖不完整或构建命令未执行。
   • 检查前端Dockerfile是否在构建阶段完整复制了项目文件：

     # 正确的多阶段构建示例
     FROM node:18-alpine as builder
     WORKDIR /app
     # 先复制依赖文件，利用缓存层优化构建速度
     COPY package.json yarn.lock ./
     RUN yarn install --frozen-lockfile  # 锁定依赖版本，避免不一致
     # 再复制全部项目文件
     COPY . .
     # 确保构建命令正确，若需要环境变量需提前传入
     RUN yarn build
     
     # 生产阶段用Nginx托管静态文件
     FROM nginx:alpine
     # 从构建阶段复制生成的build目录
     COPY --from=builder /app/build /usr/share/nginx/html
     COPY nginx.conf /etc/nginx/nginx.conf
     EXPOSE 80
     # 强制Nginx前台运行，保证日志输出
     CMD ["nginx", "-g", "daemon off;"]
     

2. 权限问题
   • 若Dockerfile中使用非root用户执行构建，需确保该用户拥有/app目录的写入权限：

     RUN chown -R node:node /app
     USER node
     RUN yarn build
     

3. 卷挂载覆盖问题
   • 检查docker-compose.yml中前端服务的卷配置，若挂载了本地目录到容器内的build路径（如./frontend/build:/usr/share/nginx/html），会覆盖构建阶段生成的文件，直接删除该卷配置即可。

二、解决前端容器无日志输出的问题 #

1. Nginx日志配置
   • 在前端容器的nginx.conf中添加日志输出到标准流的配置：

     http {
       server {
         listen 80;
         # 将日志输出到stdout/stderr，确保docker logs能捕获
         access_log /dev/stdout;
         error_log /dev/stderr;
     
         location / {
           root /usr/share/nginx/html;
           try_files $uri $uri/ /index.html;
         }
       }
     }
     

2. 容器启动命令检查
   • 若使用serve命令托管静态文件，确保命令为前台运行并输出日志：

     CMD ["npx", "serve", "-s", "build", "-l", "3000"]
     

3. Docker日志配置
   • 检查docker-compose.yml中前端服务是否有日志限制，移除不必要的logging配置（若存在）。

三、解决Nginx"rewrite or internal redirection cycle"错误 #

该错误本质是index.html不存在时，重写规则无限循环指向自身，需两步修复：

1. 先确保前端容器内/usr/share/nginx/html目录下存在index.html（通过前面的构建问题修复即可解决）。
2. 修改Nginx配置，添加文件存在性检查，避免循环：

   location / {
     root /usr/share/nginx/html;
     # 优先尝试访问文件/目录，不存在再重定向到index.html
     try_files $uri $uri/ @rewrite;
   }
   
   location @rewrite {
     rewrite ^ /index.html last;
   }
   

   若Nginx是反向代理到前端容器，则配置改为：

   upstream frontend {
     server frontend:3000;
   }
   
   location / {
     proxy_pass http://frontend;
     proxy_set_header Host $host;
     proxy_set_header X-Real-IP $remote_addr;
   }
   

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