React应用Docker容器80端口权限报错及CrashLoopBackOff问题求助

核心问题分析 #

1. 生产环境误用开发服务器：你设置了NODE_ENV=production，但仍通过react-scripts start（开发环境服务器）启动应用。生产环境下该命令会直接退出，导致K8s不断重启Pod，出现CrashLoopBackOff状态。
2. 非root用户端口权限限制：node用户属于非root身份，无法绑定1024以下的特权端口（如80），会触发启动失败。

解决方案步骤 #

1. 修正应用启动逻辑（生产环境用静态文件服务器）

修改package.json，添加生产环境专用的启动脚本，并引入serve依赖托管构建后的静态文件：

{
  "scripts": {
    "start": "react-scripts start", // 仅开发环境使用
    "build": "react-scripts build",
    "serve": "serve -s build -l 3000" // 生产环境用非特权端口3000启动
  },
  "dependencies": {
    // 新增静态文件服务器依赖
    "serve": "^14.2.1"
  }
}

2. 重构Dockerfile（多阶段构建优化生产镜像）

采用多阶段构建，先完成React应用的编译，再用轻量环境运行，避免冗余依赖：

# 阶段1：构建React应用
FROM node:lts-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install --silent
COPY . .
RUN npm run build

# 阶段2：运行生产环境服务
FROM node:lts-alpine
WORKDIR /app
# 复制编译后的静态文件
COPY --from=builder /app/build ./build
COPY package*.json ./
# 安装生产依赖（仅包含serve）
RUN npm install --production --silent
# 暴露非特权端口3000
EXPOSE 3000
# 授权node用户访问应用目录
RUN chown -R node /app
USER node
# 启动生产服务
CMD ["npm", "run", "serve"]

3. 调整K8s配置（匹配容器端口）

修改Service和Deployment的端口映射，保持对外服务端口为80，内部指向容器的3000端口：

# Service部分
spec:
  ports:
  - protocol: TCP
    port: 80 # 对外暴露80端口
    targetPort: 3000 # 指向容器内的3000端口

# Deployment部分
containers:
- name: <app name>
  ports:
  - containerPort: 3000
  readinessProbe:
    httpGet:
      path: /
      port: 3000

4. （可选）强制使用80端口运行容器

若必须在容器内用80端口，可给node用户添加端口绑定权限（需安装libcap工具），修改Dockerfile的运行阶段：

FROM node:lts-alpine
# ...其他步骤
RUN apk add --no-cache libcap && \
    setcap 'cap_net_bind_service=+ep' /usr/local/bin/node && \
    apk del libcap
EXPOSE 80
USER node
CMD ["serve", "-s", "build", "-l", "80"]

此时K8s配置的containerPort和targetPort保持80即可。

5. 验证排查步骤

• 本地测试镜像：docker run -p 8080:3000 <image>，访问http://localhost:8080确认应用正常启动
• 查看Pod日志：kubectl logs <pod-name> -n development，排查启动错误信息
• 检查Pod状态：kubectl describe pod <pod-name> -n development，查看事件和状态详情

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