部署在Azure静态Web应用的React项目如何传递构建环境变量？

问题背景 #

现有Azure静态Web应用的部署YAML任务配置如下：

- task: AzureStaticWebApp@0
    name: DeployStaticWebApp
    displayName: Deploy Static Web App
    inputs:
      app_location: 'web-app'
      app_build_command: 'npm ci && npm run build:int'
      cwd: '${{ parameters.root }}/webapp_package'
      azure_static_web_apps_api_token: $(deployment_token)
    env:
      REACT_APP_AAD_UI_APP_CLIENT_ID: $(REACT_APP_AAD_UI_APP_CLIENT_ID)
      REACT_APP_AAD_API_APP_CLIENT_ID: $(REACT_APP_AAD_API_APP_CLIENT_ID)
      REACT_APP_AAD_APP_TENANT_ID: $(REACT_APP_AAD_APP_TENANT_ID)
      REACT_APP_AAD_APP_SERVICE_BASE_URI: $(REACT_APP_AAD_APP_SERVICE_BASE_URI)

项目package.json的脚本配置：

"scripts": {
    "start": "react-scripts start",    
    "start:int": "env-cmd -f .env.int npm start",    
    "build": "react-scripts build",    
    "build:int": "env-cmd -f .env.int npm run-script build",   
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

需要实现在构建部署过程中传递指定的REACT_APP_前缀环境变量。

解决方案 #

方案一：移除env-cmd，直接利用DevOps注入的环境变量 #

React的react-scripts在构建时会自动拾取所有前缀为REACT_APP_的系统环境变量，并将其打包到构建产物中，无需额外工具：

1. 修改package.json中的build:int脚本，删除env-cmd相关调用：

"build:int": "npm run-script build"

2. 保持YAML任务中的env配置不变。Azure DevOps会将该块中的变量注入到任务执行环境，react-scripts build会自动读取这些变量并完成注入。

方案二：保留env-cmd，允许系统变量覆盖文件配置 #

如果需要保留.env.int作为默认配置，同时让DevOps变量覆盖对应值，可调整env-cmd的调用参数：

1. 修改package.json中的build:int脚本，添加--override参数（env-cmd默认会用系统变量覆盖文件变量，该参数可显式启用此行为）：

"build:int": "env-cmd -f .env.int --override npm run-script build"

2. 保持YAML任务的env配置不变，构建时DevOps注入的变量会优先于.env.int中的值生效。

注意事项 #

• 确保Azure DevOps流水线已配置好REACT_APP_AAD_UI_APP_CLIENT_ID等目标变量，且流水线有权限访问这些变量（如链接了变量组）。
• 若.env.int包含敏感信息，请勿提交到代码仓库，完全通过DevOps变量传递配置即可。

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