React应用MSAL认证配置读取失败，寻求多环境配置替代方案

错误原因 #

当前抛出的endpoints_resolution_error是因为process.env.REACT_APP_AAD_APP_TENANT_ID未被正确读取，导致MSAL的authority字段缺失租户ID，请求了错误的OpenID配置端点（https://login.microsoftonline.com/v2.0/.well-known/openid-configuration），正确的端点必须包含租户ID。

替代环境变量注入方案 #

除了Azure Static Web Apps的内置配置项，以下几种方式可以按环境（TEST1、TEST2、TEST3、TEST4、INT、UA、PROD）提供所需变量：

1. 用staticwebapp.config.json按环境配置 #

Azure Static Web Apps支持通过指定不同的配置文件注入环境变量：

• 为每个环境创建独立的配置文件，比如staticwebapp.test1.json：

  {
    "environmentVariables": {
      "REACT_APP_AAD_UI_APP_CLIENT_ID": "test1-ui-client-id",
      "REACT_APP_AAD_API_APP_CLIENT_ID": "test1-api-client-id",
      "REACT_APP_AAD_APP_TENANT_ID": "test1-tenant-id",
      "REACT_APP_AAD_APP_SERVICE_BASE_URI": "https://test1-api.example.com"
    }
  }
  

• 在CI/CD部署流程中，指定对应环境的配置文件路径（以GitHub Actions为例）：

  jobs:
    build_and_deploy_test1:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v3
        - name: Deploy to TEST1
          uses: Azure/static-web-apps-deploy@v1
          with:
            azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN_TEST1 }}
            repo_token: ${{ secrets.GITHUB_TOKEN }}
            action: "upload"
            app_location: "/"
            config_file_path: "./staticwebapp.test1.json"
  

  每个环境对应一个独立的部署任务，使用各自的配置文件和部署令牌。

2. CI/CD构建阶段直接注入环境变量 #

在构建过程中直接传入环境变量，React会在打包时将这些值嵌入静态文件：

• GitHub Actions示例（TEST1环境）：

  jobs:
    build_deploy_test1:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v3
        - uses: actions/setup-node@v3
          with:
            node-version: '18'
        - run: npm install
        - name: Build with TEST1 variables
          run: |
            REACT_APP_AAD_UI_APP_CLIENT_ID=${{ secrets.TEST1_UI_CLIENT_ID }} \
            REACT_APP_AAD_API_APP_CLIENT_ID=${{ secrets.TEST1_API_CLIENT_ID }} \
            REACT_APP_AAD_APP_TENANT_ID=${{ secrets.TEST1_TENANT_ID }} \
            REACT_APP_AAD_APP_SERVICE_BASE_URI=${{ secrets.TEST1_API_BASE_URI }} \
            npm run build
        - name: Deploy to Azure Static Web Apps
          uses: Azure/static-web-apps-deploy@v1
          with:
            azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN_TEST1 }}
            repo_token: ${{ secrets.GITHUB_TOKEN }}
            action: "upload"
            app_location: "/"
            output_location: "build"
  

  将各环境的敏感变量存储在CI/CD的机密存储中（如GitHub Secrets），避免明文泄露。

3. .env模板文件+CI/CD替换 #

通过模板文件生成对应环境的.env文件，再进行构建：

• 创建.env.template模板：

  REACT_APP_AAD_UI_APP_CLIENT_ID={{UI_CLIENT_ID}}
  REACT_APP_AAD_API_APP_CLIENT_ID={{API_CLIENT_ID}}
  REACT_APP_AAD_APP_TENANT_ID={{TENANT_ID}}
  REACT_APP_AAD_APP_SERVICE_BASE_URI={{API_BASE_URI}}
  

• 在CI/CD中替换模板变量（以GitHub Actions为例）：

  - name: Generate TEST1 .env file
    run: |
      sed -e 's/{{UI_CLIENT_ID}}/${{ secrets.TEST1_UI_CLIENT_ID }}/' \
          -e 's/{{API_CLIENT_ID}}/${{ secrets.TEST1_API_CLIENT_ID }}/' \
          -e 's/{{TENANT_ID}}/${{ secrets.TEST1_TENANT_ID }}/' \
          -e 's/{{API_BASE_URI}}/${{ secrets.TEST1_API_BASE_URI }}/' \
          .env.template > .env
  - run: npm run build
  

注意事项 #

• React的环境变量仅在构建阶段生效，运行时无法动态修改，必须确保变量在打包时被正确注入。
• 所有敏感变量（如Client ID、Tenant ID）都应存储在CI/CD的机密存储中，避免明文提交到代码仓库。

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