如何在AWS CodePipeline部署React应用时安全配置环境变量

针对你的场景，最适配现有CDK架构、满足安全合规要求的方案是通过AWS Secrets Manager存储.env文件内容，CodeBuild构建阶段动态拉取生成对应环境变量文件，全程敏感配置不会提交到GitHub，也不会明文暴露在流水线配置中，且完全兼容你现有的React构建逻辑，不需要修改项目构建脚本。

具体实施步骤 #

1. 预先在Secrets Manager创建存储环境变量的密钥 #

和你现有存储PandaWebsite-GitHubToken的操作逻辑一致：

• 进入AWS Secrets Manager控制台新建密钥，类型选择「其他类型的密钥」
• 密钥名称设置为PandaWebsite-ProdEnv
• 明文值直接粘贴本地.env.production文件的完整内容后保存即可

2. 修改CDK中Build阶段的配置 #

需要给CodeBuild构建项目授予读取密钥的权限，同时把密钥映射为构建过程可访问的环境变量，修改你现有代码中的addBuildStage方法即可，修改后代码如下：

private addBuildStage(
  pipeline: codepipeline.Pipeline,
  outputSources: codepipeline.Artifact,
  outputWebsite: codepipeline.Artifact
) {
  const buildspecFile = FS.readFileSync("./config/buildspec.yml", "utf-8");
  const buildspecFileYaml = YAML.parse(buildspecFile, {
    prettyErrors: true,
  });

  // 初始化构建项目
  const buildProject = new CodeBuild.PipelineProject(this, "BuildWebsite", {
    projectName: "BuildeWebsite",
    environment: {
      buildImage: CodeBuild.LinuxBuildImage.STANDARD_5_0,
    },
    buildSpec: CodeBuild.BuildSpec.fromObjectToYaml(buildspecFileYaml),
  });

  // 给构建执行角色附加Secrets Manager读权限
  buildProject.addToRolePolicy(new IAM.PolicyStatement({
    actions: ["secretsmanager:GetSecretValue"],
    resources: [
      `arn:aws:secretsmanager:${this.region}:${this.account}:secret:PandaWebsite-ProdEnv-*`
    ]
  }));

  pipeline.addStage({
    stageName: "Build",
    actions: [
      new codepipeline_actions.CodeBuildAction({
        actionName: "BuildeWebsite",
        project: buildProject,
        input: outputSources,
        outputs: [outputWebsite],
        // 将Secrets Manager中的密钥映射为构建环境变量
        environmentVariables: {
          PROD_ENV_FILE: {
            type: CodeBuild.BuildEnvironmentVariableType.SECRETS_MANAGER,
            value: "PandaWebsite-ProdEnv"
          }
        }
      }),
    ],
  });
}

3. 修改buildspec.yml构建配置 #

在构建执行前的pre_build阶段增加命令，将环境变量中存储的.env内容写入项目根目录的.env.production文件，后续执行yarn build:prod时会自动读取该文件完成构建。参考配置片段如下：

version: 0.2
phases:
  pre_build:
    commands:
      # 动态生成生产环境变量文件，禁止添加打印该文件内容的命令避免敏感信息泄露到日志
      - echo "$PROD_ENV_FILE" > .env.production
      - yarn install --frozen-lockfile
  build:
    commands:
      - yarn build:prod
artifacts:
  base-directory: build
  files:
    - "**/*"

可选替代方案 #

如果你的环境变量数量较少，也可以将每个REACT_APP_开头的环境变量单独存储在AWS Systems Manager Parameter Store或Secrets Manager中，逐个映射为CodeBuild环境变量，React构建时会自动读取符合命名规范的环境变量，不需要额外生成.env文件。但如果环境变量数量多、调整频繁，直接存储整个.env文件内容的方案维护成本最低。

安全注意事项 #

• 禁止在buildspec中添加cat .env.production、echo $PROD_ENV_FILE这类打印敏感内容的命令，避免环境变量泄露到CloudWatch构建日志
• 测试、预发、生产等不同环境分别创建独立的密钥，配合多分支流水线做环境隔离
• 密钥权限严格收敛，仅开放给CodeBuild构建角色和必要的运维人员

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