Azure存储账户中能否设置环境变量？有哪些替代方案及实现方式？

Azure存储账户的静态网站功能本身不支持直接设置环境变量，因为它仅提供纯静态资源托管能力，没有服务器端运行环境来解析或注入环境变量。以下是几种实用的替代方案及具体实现方法：

1. 构建时注入环境变量 #

这是React项目最常用的方式，直接在构建阶段将环境变量嵌入静态文件：

• 在项目根目录创建.env、.env.production等环境文件，变量名必须以REACT_APP_开头：

  # .env.production
  REACT_APP_API_URL=https://your-api.azurewebsites.net
  REACT_APP_APP_NAME=My Static App
  

• 执行npm run build构建生产包，React会自动将这些变量替换进代码
• 将生成的build文件夹内容上传到$web容器即可
• 在React组件中直接调用：

  const apiUrl = process.env.REACT_APP_API_URL;
  

2. 静态配置文件 #

通过独立的JSON文件存放配置，无需重新构建即可修改：

• 在项目public目录下创建config.json：

  {
    "apiUrl": "https://your-api.azurewebsites.net",
    "appName": "My Static App"
  }
  

• 在React应用中动态加载这个文件：

  async function loadConfig() {
    const response = await fetch('/config.json');
    const config = await response.json();
    // 使用config中的配置项
  }
  loadConfig();
  

• 部署时将config.json和其他静态文件一起上传到$web容器，后续修改配置只需更新这个文件即可。

3. Azure Front Door/CDN注入请求头（进阶） #

适合需要动态切换配置的场景：

• 在Azure Front Door或CDN的规则中设置自定义响应头，比如X-API-URL: https://your-api.azurewebsites.net
• 配置CDN允许前端获取这些响应头（需在响应头规则中添加Access-Control-Expose-Headers）
• 在React应用中通过document.headers或请求拦截器获取这些值

4. 结合Azure Functions作为配置中间层 #

适合需要复杂动态配置的场景：

• 创建一个HTTP触发的Azure Function，通过Function的应用设置管理环境变量
• Function代码示例（Node.js）：

  module.exports = async function (context, req) {
      context.res = {
          body: {
              apiUrl: process.env.API_URL,
              appName: process.env.APP_NAME
          }
      };
  };
  

• 在React应用中调用这个接口获取配置：

  async function loadConfig() {
    const response = await fetch('https://your-function.azurewebsites.net/api/getconfig');
    const config = await response.json();
  }
  

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