如何通过CI/CD用Docker构建React静态文件并部署到S3

核心思路 #

不需要改用ECS/Fargate持续运行容器，而是在CodeBuild环境内通过Docker容器完成React项目的构建，将容器内生成的build目录同步到宿主环境后，再推送至S3存储桶。这种方式既保证了本地与部署构建环境的一致性，又保留了S3静态托管的低成本优势。

实现步骤 #

1. 调整CodeBuild项目配置 #

• 开启特权模式：在CodeBuild项目的"环境"设置中，勾选Privileged选项，允许CodeBuild环境内运行Docker命令。
• 权限确认：确保CodeBuild服务角色已具备以下权限：
  • S3存储桶的写入权限（原有流水线已配置，可复用）
  • 若使用ECR托管自定义构建镜像，需添加AmazonEC2ContainerRegistryReadOnly权限

2. 适配Docker构建的buildspec.yaml #

替换原有buildspec文件，改为通过Docker容器完成构建并提取产物：

version: 0.2

phases:
  pre_build:
    commands:
      # 若使用本地项目中的Dockerfile构建镜像，执行以下命令
      - docker build -t react-build-image .
      # 若使用ECR中的预构建镜像，替换为登录ECR并拉取镜像的命令：
      # - aws ecr get-login-password --region <你的AWS区域> | docker login --username AWS --password-stdin <你的ECR仓库URI>
      # - docker pull <你的ECR仓库URI>:latest

  build:
    commands:
      # 运行容器执行构建，将容器内的build目录复制到CodeBuild宿主环境
      - docker run --name temp-build-container react-build-image
      - docker cp temp-build-container:/app/build ./build
      # 清理临时容器
      - docker rm temp-build-container

  post_build:
    commands:
      # 直接同步build目录到S3（也可保留原有CodePipeline的S3部署阶段，此步骤可选）
      - aws s3 sync ./build s3://<你的S3存储桶名称> --delete

artifacts:
  files:
    - '**/*'
  base-directory: 'build'

3. 配套Dockerfile示例（项目根目录） #

使用多阶段构建专注于产物生成，无需包含运行时环境：

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN yarn install --frozen-lockfile
COPY . .
RUN yarn build

# 无需运行阶段，仅保留build目录供后续提取

4. 保留原有CodePipeline流程 #

不需要修改Pipeline的结构，继续沿用：

• GitHub源触发 -> CodeBuild执行上述构建 -> S3存储桶部署（通过CodePipeline的Deploy阶段或buildspec内的aws s3 sync）

关键注意事项 #

• CodeBuild环境需选择支持Docker的标准镜像，例如aws/codebuild/standard:6.0
• 确保Dockerfile内的WORKDIR和yarn build输出路径与docker cp命令中的路径一致
• 若使用私有ECR镜像，需在buildspec的pre_build阶段添加ECR登录命令

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