如何在部署至Amazon S3的React应用中访问环境变量

你本地使用的process.env.REACT_APP_*调用方式是React的默认规则，这类变量是构建阶段就被硬编码到打包后的静态文件中的，不需要S3支持运行时读取环境变量，只需要把变量配置到你的CI/CD构建环节即可，具体操作如下：

操作步骤 #

1. 把变量配置到CodeBuild项目中 #

• 进入AWS控制台的CodeBuild页面，打开你当前用的构建项目，点击「编辑」→「环境」
• 下拉找到「环境变量」板块，依次添加你的两个变量：
  • 名称填REACT_APP_API_KEY，值填写对应密钥，普通场景选「明文」即可；如果需要加密存储就选「密钥管理器」，提前把密钥存在AWS Secrets Manager中调用即可
  • 用同样的规则添加REACT_APP_FIREBASE_API_KEY
• 保存环境配置

2. 确认buildspec.yml配置规则 #

CodeBuild会自动把你配置的环境变量注入到构建容器的运行环境中，不需要额外做导出操作，只需要保证构建命令是正常执行React打包即可，参考配置片段如下：

version: 0.2
phases:
  install:
    commands:
      - npm install
  build:
    commands:
      # 可选：加一行打印命令，构建后可以在CodeBuild日志里验证变量是否正确注入
      - echo $REACT_APP_FIREBASE_API_KEY
      - npm run build
artifacts:
  files:
    - '**/*'
  base-directory: build # 对应React打包默认的输出目录

3. 调用方式无需修改 #

你本地原来的process.env.REACT_APP_FIREBASE_API_KEY调用逻辑完全可以沿用，构建完成后变量会自动替换为你配置的值，打包后的静态文件上传到S3后就可以正常生效。

注意事项 #

• 所有需要注入到React客户端代码的环境变量必须以REACT_APP_为前缀，否则会被React构建程序自动忽略，不会打包到静态文件中
• 这类注入的变量会明文出现在打包后的静态JS文件里，所有访问网站的用户都可以通过浏览器控制台查到，不要用这种方式传递后端敏感密钥（比如数据库密码、服务端AWS密钥），你当前用的Firebase客户端API Key、Google前端API Key本身就是允许公开的，符合使用规范
• 如果你修改了CodeBuild的环境变量值，需要重新触发CodePipeline执行构建，新的变量才会生效

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