部署React应用到AWS Amplify时如何使用.env环境变量？

根因说明 #

CRA 框架本身有安全限制，仅会在构建阶段将以REACT_APP_为前缀的环境变量注入到客户端包中，其余前缀的变量会默认被过滤；同时AWS Amplify默认不会将控制台配置的环境变量主动透传到前端构建进程，需要手动显式声明。 #

修复步骤 #

• 首先确认所有你需要在前端代码中读取的环境变量，命名都以REACT_APP_为前缀，比如REACT_APP_API_URL，同时Amplify控制台配置的变量键名也要和这个命名完全一致。
• 修改 Amplify 应用的构建配置amplify.yml，在前端构建配置的env.variables字段中，显式声明所有需要透传的环境变量，示例配置如下：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  # 新增env字段声明要透传的变量
  env:
    variables:
      REACT_APP_VAR1: $REACT_APP_VAR1
      REACT_APP_VAR2: $REACT_APP_VAR2
      # 按上述格式把所有你需要用到的REACT_APP_开头的变量都列全
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

• 如果你将.env文件提交到了GitHub仓库，建议将其加入.gitignore，避免构建时优先读取仓库内的.env文件覆盖Amplify控制台配置的变量。
• 所有配置修改完成后，触发一次全量重新部署，不要使用增量构建缓存，新的变量才会被注入到构建产物中。

验证方式 #

部署完成后，打开浏览器控制台执行console.log(process.env)，即可看到所有注入成功的环境变量。

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