部署在Azure Windows Web App的React应用无法读取Auth0环境变量

核心原因 #

Create React App的REACT_APP_*前缀环境变量是构建时注入的，而非运行时动态读取。如果你在本地执行npm run build后再将build文件夹部署到Azure，构建过程中并没有获取到Azure的环境变量，导致最终静态产物里的变量值为空，运行时自然触发配置缺失的错误。

可行解决方案 #

方案1：让Azure Web App负责构建React应用 #

放弃本地构建，直接让Azure从代码仓库拉取源码并完成构建，这样构建阶段就能读取到Azure配置的环境变量：

• 在Azure Web App的「部署中心」选择代码源（如GitHub、Azure Repos），配置自动部署。
• 确保项目根目录的package.json中包含正确的构建脚本，例如：

  "scripts": {
    "build": "cd client && npm install && npm run build",
    "start": "node server.js"
  }
  

• 部署时Azure会执行npm run build，此时配置的REACT_APP_AUTH0_DOMAIN和REACT_APP_AUTH0_CLIENT_ID会被注入到React的build产物中。

方案2：通过后端server.js转发环境变量给前端 #

利用你的Express服务（server.js），在运行时将Azure环境变量注入到前端静态文件中：

1. 修改server.js，读取环境变量并替换前端index.html的占位符：

   const express = require('express');
   const path = require('path');
   const fs = require('fs');
   const app = express();
   
   // 托管静态资源
   app.use(express.static(path.join(__dirname, 'client/build')));
   
   // 处理所有路由，返回注入环境变量的index.html
   app.get('*', (req, res) => {
     const indexPath = path.join(__dirname, 'client/build/index.html');
     let indexContent = fs.readFileSync(indexPath, 'utf8');
     
     // 替换占位符为Azure环境变量
     indexContent = indexContent.replace('{{AUTH0_DOMAIN}}', process.env.REACT_APP_AUTH0_DOMAIN || '');
     indexContent = indexContent.replace('{{AUTH0_CLIENT_ID}}', process.env.REACT_APP_AUTH0_CLIENT_ID || '');
     
     res.send(indexContent);
   });
   
   const PORT = process.env.PORT || 3000;
   app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
   

2. 在client/public/index.html中添加全局配置占位符：

   <script>
     window.auth0Config = {
       domain: '{{AUTH0_DOMAIN}}',
       clientId: '{{AUTH0_CLIENT_ID}}'
     };
   </script>
   

3. 修改React的src/index.js，从全局对象读取配置：

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   import { Auth0Provider } from '@auth0/auth0-react';
   
   const { domain, clientId } = window.auth0Config || {};
   
   if (!domain || !clientId) {
     console.error('Missing Auth0 configuration');
   }
   
   ReactDOM.render(
     <React.StrictMode>
       <Auth0Provider
         domain={domain}
         clientId={clientId}
         authorizationParams={{
           redirect_uri: window.location.origin,
         }}
       >
         <App />
       </Auth0Provider>
     </React.StrictMode>,
     document.getElementById('root')
   );
   

部署后，Express服务会在运行时将Azure的环境变量注入到前端，实现动态读取。

方案3：Azure静态文件变量替换（纯静态站点场景） #

如果不需要后端服务，可通过Azure Web App的内置替换功能处理静态文件中的占位符：

1. 本地构建时，将React代码中的环境变量替换为自定义占位符：

   const domain = process.env.REACT_APP_AUTH0_DOMAIN || '__AUTH0_DOMAIN__';
   const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID || '__AUTH0_CLIENT_ID__';
   

2. 执行npm run build生成静态产物。
3. 在Azure Web App的「配置」-「应用设置」中添加：
   • 新增设置WEBSITE_REPLACE_KEYWORDS_IN_FILES = index.html
   • 新增设置__AUTH0_DOMAIN__ = 你的Auth0域名
   • 新增设置__AUTH0_CLIENT_ID__ = 你的Auth0客户端ID
     Azure会在应用启动时自动替换index.html中的占位符为对应环境变量值。

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