Docker 部署 React 项目的配置优化

构建阶段优化
使用多阶段构建减少镜像体积。第一阶段基于 node:alpine 安装依赖并构建项目，第二阶段基于 nginx:alpine 仅复制构建后的静态文件。示例 Dockerfile 片段：

FROM node:alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80

环境变量处理
通过 .env 文件或 Docker 运行时参数注入环境变量。修改 React 项目的 package.json，确保构建时能读取环境变量：

"scripts": {
  "build": "react-scripts build",
  "start": "react-scripts start",
  "test": "react-scripts test"
}

运行验证与性能调优

镜像运行与验证
构建并运行容器后，访问 http://localhost:80 验证部署结果。使用以下命令启动容器：

docker build -t react-app .
docker run -d -p 80:80 react-app

Nginx 配置优化
在 Dockerfile 中自定义 Nginx 配置，例如启用 gzip 压缩。创建 nginx.conf 文件并添加到镜像：

server {
  listen 80;
  gzip on;
  gzip_types text/plain application/xml application/javascript;
  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

通过 COPY nginx.conf /etc/nginx/conf.d/default.conf 替换默认配置。

生产环境最佳实践

安全加固
使用非 root 用户运行 Nginx，在 Dockerfile 中添加：

RUN chown -R nginx:nginx /usr/share/nginx/html
USER nginx

健康检查配置
添加健康检查确保服务可用性：

HEALTHCHECK --interval=30s --timeout=3s \
  CMD curl -f http://localhost/ || exit 1

缓存策略优化
通过 Docker 构建缓存加速后续构建。合理安排 COPY 指令顺序，将不常变动的文件（如 package.json）放在前面：

COPY package*.json ./
RUN npm install
COPY . .