React Web项目能否使用.env？Azure环境变量配置问题求助

• 检查变量命名规则：React项目中，只有以REACT_APP_开头的环境变量会被Create React App这类构建工具自动注入应用。确保你在Azure Portal配置的变量名符合此规则，比如将API_URL改为REACT_APP_API_URL。

• 匹配Azure部署类型的配置要求：

  • 若部署为Azure静态Web Apps：在Portal「配置」→「应用程序设置」添加变量后，必须重新触发构建部署（比如推送代码到关联仓库）——静态Web Apps的环境变量是在构建阶段注入的，不重新构建不会生效。
  • 若部署为Azure App Service：在「配置」→「应用程序设置」添加变量后，确认项目构建脚本能读取系统环境变量，Create React App构建时会自动识别REACT_APP_前缀的变量。

• 运行时注入环境变量（无需重新构建）：
  不想每次改变量都重新构建的话，可通过运行时注入实现：

  1. 在Azure Portal应用设置中添加目标变量（如REACT_APP_API_URL）。
  2. 在项目public/index.html中添加脚本占位：

     <script>
       window.__env = {
         API_URL: "%REACT_APP_API_URL%"
       };
     </script>
     

  3. 在React代码中通过window.__env.API_URL直接访问变量。
     注：静态Web Apps需通过自定义构建脚本替换%REACT_APP_API_URL%占位符。

• 验证构建环节的变量传递：
  查看Azure构建日志（如GitHub Actions、Azure Pipelines日志），确认REACT_APP_前缀变量是否被正确传递到构建环境。若日志中无对应变量，说明配置未生效。

• 自定义Webpack配置的处理：
  若未使用Create React App，而是自定义Webpack配置，需手动配置DefinePlugin注入变量：

  const webpack = require('webpack');
  
  module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.REACT_APP_API_URL': JSON.stringify(process.env.REACT_APP_API_URL)
      })
    ]
  };
  

内容的提问来源于stack exchange，提问作者Rikelme Gonçalves Carneiro