执行npm run build后React应用Docker容器退出/重启问题排查

容器自动退出原因 #

• 原Dockerfile中CMD ["npm", "run", "build"]仅用于编译生成静态产物，命令执行完成后无任何常驻前台进程，容器会随命令执行结束自然退出
• 配置的restart: always规则会在容器退出后自动重启，进入“编译完成→退出→重启编译”的循环

访问404原因 #

• 若使用serve -s build仍出现404，多为React使用BrowserHistory路由模式时，静态服务未配置路由 fallback 规则导致，直接访问非根路径时无法映射到index.html
• 部分场景下也可能是静态服务端口配置错误、路径映射错误导致

方案1：生产环境推荐使用Nginx托管静态产物（性能更优） #

修改后的Dockerfile #

# 第一阶段：编译阶段，仅用于生成构建产物
FROM node:14 AS builder
WORKDIR /code
COPY ./code/package.json ./code/package-lock.json /code/
RUN npm install
COPY ./code /code
RUN npm run build

# 第二阶段：运行阶段，仅保留运行所需的Nginx和构建产物
FROM nginx:alpine
# 复制编译好的产物到Nginx默认静态目录
COPY --from=builder /code/build /usr/share/nginx/html
# 添加Nginx配置，解决BrowserRouter路由404问题
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    location / { \
        try_files $uri $uri/ /index.html; \
    } \
}' > /etc/nginx/conf.d/default.conf
# Nginx前台运行，作为常驻进程
CMD ["nginx", "-g", "daemon off;"]

修改后的docker-compose.yml #

version: '3'

services:
  medace-lecture-capsules:
    build: ./app
    container_name: medace-lecture-capsules
    restart: always
    # 若需要直接对外暴露端口可添加ports配置，仅走内部共享网络则无需配置
    # ports:
    #   - "3000:80"
    expose:
      - "80"
    networks:
      - shared

networks:
  shared:
    external:
      name: shared

方案2：使用serve托管静态产物 #

修改后的Dockerfile #

FROM node:14
WORKDIR /code
COPY ./code/package.json ./code/package-lock.json /code/
RUN npm install
COPY ./code /code
# 先执行编译，再全局安装serve，最后启动静态服务
RUN npm run build \
    && npm install -g serve
# 常驻前台进程，启动serve并指定路由 fallback
CMD ["serve", "-s", "build", "-l", "3000"]

注：-l 3000显式指定端口为3000，和原有docker-compose配置的暴露端口匹配

执行以下命令重启服务即可：

docker-compose down
docker-compose build --no-cache
docker-compose up -d

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