如何通过React Amplify和Amplify CLI在React应用中获取环境名称？

方法1：通过Amplify CLI命令直接获取当前环境名 #

使用amplify env get命令直接从Amplify配置中读取当前激活的环境名称，这是最可靠的方式，不受分支变量的影响：

frontend:
  phases:
    preBuild:
      commands:
        # 从Amplify CLI获取当前环境名
        - export AMPLIFY_ENV=$(amplify env get --name current --json | jq -r '.name')
        # 写入.env文件
        - echo "REACT_APP_AMPLIFY_ENV=${AMPLIFY_ENV}" > .env
        - npm ci

说明：Amplify托管的构建镜像默认已安装jq，如果遇到缺失的情况，可以在命令前添加yum install jq -y（Amazon Linux镜像）或apt-get install jq -y（Ubuntu镜像）来安装。

方法2：直接读取Amplify本地配置文件 #

Amplify会在本地amplify/.config/local-env-info.json文件中存储当前环境信息，直接读取这个文件可以跳过CLI调用，更轻量：

frontend:
  phases:
    preBuild:
      commands:
        # 从本地配置文件读取环境名
        - export AMPLIFY_ENV=$(cat amplify/.config/local-env-info.json | jq -r '.envName')
        - echo "REACT_APP_AMPLIFY_ENV=${AMPLIFY_ENV}" > .env
        - npm ci

方法3：分支变量兜底方案 #

如果仍想保留分支变量的逻辑，可以添加兜底判断，当USER_BRANCH为空时自动切换到CLI获取的环境名：

frontend:
  phases:
    preBuild:
      commands:
        - export AMPLIFY_ENV=$USER_BRANCH
        # 当USER_BRANCH为空时，用CLI命令获取环境名
        - if [ -z "$AMPLIFY_ENV" ]; then AMPLIFY_ENV=$(amplify env get --name current --json | jq -r '.name'); fi
        - echo "REACT_APP_AMPLIFY_ENV=${AMPLIFY_ENV}" > .env
        - npm ci

在React应用中使用环境名 #

完成上述配置后，在React代码中可以通过process.env.REACT_APP_AMPLIFY_ENV直接访问环境名称：

console.log("当前Amplify环境：", process.env.REACT_APP_AMPLIFY_ENV);

为什么之前的方法会失效？
USER_BRANCH变量依赖于Amplify托管的分支映射规则，在手动触发构建、分支名称与环境名不匹配、或者某些特殊构建场景下，该变量可能为空。而直接从Amplify的环境配置或本地文件获取环境名，是直接关联到当前部署的Amplify环境，可靠性更高。

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