如何消除Azure上React网站硬编码值并读取Node.js环境变量

1. 代码中读取环境变量的规则 #

React项目（基于Create React App）对环境变量有约定：必须以REACT_APP_为前缀，否则无法在客户端代码中访问到。你可以直接通过process.env.REACT_APP_XXX读取，同时设置本地 fallback 值。

TypeScript类型补充 #

因为TypeScript默认不识别自定义的环境变量，需要在项目根目录的src/env.d.ts（如果没有就新建）中添加类型声明：

declare namespace NodeJS {
  interface ProcessEnv {
    REACT_APP_BASE_URL?: string;
  }
}

2. MSAL配置中动态设置重定向URL #

在你的MSAL配置文件中，直接替换硬编码的redirectUri：

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

export const msalConfig: Configuration = {
  auth: {
    clientId: '你的ClientID',
    // 优先读取环境变量，不存在则用本地地址
    redirectUri: process.env.REACT_APP_BASE_URL || 'http://localhost:3000',
    authority: 'https://login.microsoftonline.com/你的租户ID'
  }
};

3. Azure Web App中配置环境变量 #

1. 登录Azure门户，找到你的Web App实例
2. 进入配置 > 应用程序设置
3. 点击新建应用程序设置，添加：
   • 名称：REACT_APP_BASE_URL
   • 值：你的线上网站基础URL（比如https://yourapp.azurewebsites.net）
4. 保存设置，Web App会自动重启加载新的环境变量

4. 本地开发的便捷处理 #

本地开发时，不需要每次手动改代码，只需在项目根目录创建.env.development文件，写入：

REACT_APP_BASE_URL=http://localhost:3000

Create React App会自动加载这个文件的环境变量，本地运行时直接生效。

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