AWS Amplify环境变量配置完成但构建时无法取值，该如何修复？

解决方案 #

1. 检查环境变量命名规则

• 基于 Create React App 搭建的项目，默认只会打包注入带 REACT_APP_ 前缀的环境变量，非此前缀的变量会在构建阶段被自动过滤，你在 Amplify 控制台配置的变量名必须带上此前缀，比如 REACT_APP_API_BASE_URL。
• 代码中取值语法为 process.env.REACT_APP_XXX，大小写完全匹配才可以正常读取。
• 如果你是用 Vite 搭建的 React 项目，前缀需要换成 VITE_，取值语法为 import.meta.env.VITE_XXX。

2. 修改 Amplify 构建配置

Amplify 默认只会把环境变量暴露给构建节点的系统环境，不会自动注入到前端打包产物中，需要你在构建阶段手动把变量写入 .env 文件，修改你的 amplify.yml 配置如下：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        # 将所有符合前缀规则的环境变量写入.env文件
        - env | grep -e REACT_APP_ >> .env
        # 如果是Vite项目替换为下面这条
        # - env | grep -e VITE_ >> .env
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

3. 确认配置生效范围

• Amplify 控制台配置环境变量时支持指定仅对单个部署环境生效，确认你配置的变量和你当前访问的部署环境（生产/测试/预览分支）是匹配的。
• 修改变量后需要触发一次无缓存的全新构建，旧的缓存构建产物会保留之前的变量值，不会更新。

4. 验证注入结果

构建完成后可以下载 Amplify 生成的打包产物，打开 build/static/js 目录下的压缩JS文件，搜索你配置的变量值，确认已经被写入到打包文件中，如果未找到则回到前三个步骤逐一排查。

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