React静态Web应用部署后MSAL认证失败请求缺失tenant id

我有一个基于React框架开发、集成MSAL认证的静态Web应用。点击认证链接后，通过F12开发者工具的Network面板发现请求URL缺失tenant id，但该参数已配置在静态Web应用的设置中。

本地运行时，应用可正常读取.env文件中的配置：

REACT_APP_AAD_UI_APP_CLIENT_ID= some value
REACT_APP_AAD_API_APP_CLIENT_ID= some value
REACT_APP_AAD_APP_TENANT_ID= some value
REACT_APP_AAD_APP_SERVICE_BASE_URI= some value

部署前已清空.env文件内容：

REACT_APP_AAD_UI_APP_CLIENT_ID= 
REACT_APP_AAD_API_APP_CLIENT_ID= 
REACT_APP_AAD_APP_TENANT_ID= 
REACT_APP_AAD_APP_SERVICE_BASE_URI= 

原本预期部署后应用会读取静态Web应用的配置而非.env文件，但实际无法读取tenant id，请问遗漏了什么配置？

相关代码文件 #

authConfig.ts #

import { Configuration } from "@azure/msal-browser";

// Config object to be passed to Msal on creation
export const msalConfig: Configuration = {
    auth: {
        clientId: `${process.env.REACT_APP_AAD_UI_APP_CLIENT_ID}`,
        authority: `https://login.microsoftonline.com/${process.env.REACT_APP_AAD_APP_TENANT_ID}`,
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    }
};

// scopes
export const loginRequest = {
    scopes: [`api://${process.env.REACT_APP_AAD_API_APP_CLIENT_ID}/user_impersonation`]
  };

// endpoints 
export const config = {
    endpoint: `${process.env.REACT_APP_AAD_APP_SERVICE_BASE_URI}/api/v1/jobs`
};

package.json #

{
  "name": "web-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@azure/msal-browser": "2.34.0",
    "@azure/msal-common": "11.0.0",
    "@azure/msal-react": "1.5.4",
    "@fluentui/react": "8.106.1",
    "@testing-library/react": "13.4.0",
    "@testing-library/user-event": "13.5.0",
    "@types/node": "16.18.11",
    "@types/react": "18.0.27",
    "@types/react-dom": "18.0.10",
    "i18next": "22.4.9",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-i18next": "12.1.4",
    "react-router-dom": "^6.9.0",
    "react-scripts": "5.0.1",
    "typescript": "4.9.4",
    "web-vitals": "2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/node": "7.16.0",
    "@babel/plugin-proposal-class-properties": "7.16.0",
    "@babel/plugin-proposal-private-property-in-object": "7.16.0",
    "@babel/polyfill": "7.12.1",
    "@types/react-router-dom": "^5.3.3",
    "@types/testing-library__jest-dom": "5.14.5"
  }
}

问题核心：React的process.env变量是构建时注入的，而非运行时读取静态Web应用的配置。你清空.env后构建，这些变量会被替换为空字符串，部署后自然无法获取到静态Web应用的配置。

需要调整配置读取逻辑，让应用在运行时读取静态Web应用的配置：

1. 修改配置读取逻辑，从window对象获取变量 #

静态Web应用的平台（如Azure Static Web Apps）会将应用设置注入到window对象中（通常是window.__env__或直接挂载）。修改authConfig.ts：

import { Configuration } from "@azure/msal-browser";

// 优先从window读取，兼容本地开发的process.env
const getEnvVar = (key: string) => {
  // 根据你的静态Web应用平台调整，比如Azure用window.__env__[key]
  return window[key] || process.env[key] || "";
};

export const msalConfig: Configuration = {
    auth: {
        clientId: getEnvVar("REACT_APP_AAD_UI_APP_CLIENT_ID"),
        authority: `https://login.microsoftonline.com/${getEnvVar("REACT_APP_AAD_APP_TENANT_ID")}`,
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    }
};

export const loginRequest = {
    scopes: [`api://${getEnvVar("REACT_APP_AAD_API_APP_CLIENT_ID")}/user_impersonation`]
};

export const config = {
    endpoint: `${getEnvVar("REACT_APP_AAD_APP_SERVICE_BASE_URI")}/api/v1/jobs`
};

2. 确认静态Web应用的配置变量命名 #

确保静态Web应用设置中的变量名和代码中完全一致，比如：

• REACT_APP_AAD_UI_APP_CLIENT_ID
• REACT_APP_AAD_APP_TENANT_ID
• 其他相关变量

3. 本地开发兼容 #

本地开发时，.env文件的配置会被process.env读取，不影响调试流程。

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