如何在React项目中结合Hashicorp Vault适配CI/CD Concourse流水线？

1. 配置Vault访问权限 #

• 给Concourse服务账号创建Vault访问政策，允许读取存放React配置的路径（比如secret/react/app），政策示例：

path "secret/react/app/*" {
  capabilities = ["read"]
}

• 在Concourse的全局配置中启用Vault credential manager，指定Vault地址和认证方式（比如AppRole），确保流水线能合法访问Vault。

2. 在Vault中存储配置 #

把原.env里的键值对存入Vault对应路径，比如：

• 路径：secret/react/app/prod
• 键值：API_END_POINT=https://test.com

3. 修改Concourse流水线配置 #

3.1 添加Vault资源定义 #

在流水线的resources块中加入Vault资源，用于拉取配置：

resources:
- name: react-app-config
  type: vault
  source:
    url: https://your-vault-address.com
    path: secret/react/app/prod
    auth:
      app_role:
        role_id: ((vault-app-role-id))
        secret_id: ((vault-app-secret-id))

注：((vault-app-role-id))和((vault-app-secret-id))是Concourse的安全变量，需提前存入Concourse的 credential 管理系统。

3.2 在构建任务中注入环境变量 #

React仅识别前缀为REACT_APP_的环境变量，所以在构建任务里拉取配置后，需将变量转换为符合要求的格式，再执行构建：

jobs:
- name: build-react-app
  plan:
  - get: react-app-config
  - get: react-app-source
    trigger: true
  - task: build-app
    config:
      platform: linux
      image_resource:
        type: docker-image
        source: {repository: node, tag: 20}
      inputs:
      - name: react-app-source
      - name: react-app-config
      run:
        path: bash
        args:
        - -c |
            # 读取Vault拉取的配置并导出为带前缀的环境变量
            export REACT_APP_API_END_POINT=$(cat react-app-config/API_END_POINT)
            # 进入源码目录执行构建
            cd react-app-source
            npm install
            npm run build

或者直接生成.env文件供React读取：

cat > react-app-source/.env << EOF
REACT_APP_API_END_POINT=$(cat react-app-config/API_END_POINT)
EOF

4. 验证构建结果 #

构建完成后，检查生成的静态资源文件，确认环境变量已正确编译到代码中。

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