如何在.NET 6+React Docker应用中无需.env获取环境变量？

核心原因是React的process.env变量是构建阶段注入的，而Docker通过docker run -e传入的是容器运行时的环境变量，两者时机不匹配，直接用.env动态引用环境变量自然无效。下面是几个可行的解决方案：

方案1：通过.NET后端接口中转获取 #

把Docker环境变量交给.NET后端读取，前端通过API接口获取这些变量值，这是最稳妥的方式，尤其适合敏感配置。

• .NET后端实现：
  在任意Controller中添加一个接口，读取环境变量并返回：

  [ApiController]
  [Route("api/[controller]")]
  public class ConfigController : ControllerBase
  {
      [HttpGet("env")]
      public IActionResult GetEnvironmentVariables()
      {
          var envVars = new Dictionary<string, string>
          {
              { "ASPNETCORE_ENVIRONMENT", Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") ?? "Production" }
              // 可以添加更多需要传递的变量
          };
          return Ok(envVars);
      }
  }
  

• React前端调用：
  在应用初始化时（比如App.js的useEffect中）调用接口，保存变量到全局状态或本地存储：

  useEffect(() => {
      fetch('/api/config/env')
          .then(res => res.json())
          .then(data => {
              window.appEnv = data;
              // 或者存入React状态管理工具，比如Redux、Zustand
          })
          .catch(err => console.error('Failed to fetch env vars:', err));
  }, []);
  
  // 使用时
  console.log(window.appEnv.ASPNETCORE_ENVIRONMENT);
  

方案2：容器启动时动态替换index.html占位符 #

通过shell脚本在容器启动时，将Docker环境变量替换到React的index.html中，前端直接从全局对象读取变量。

• 步骤1：修改React的public/index.html，添加占位符：

  <script>
      window.dockerEnv = {
          ASPNETCORE_ENVIRONMENT: '<%= ASPNETCORE_ENVIRONMENT %>'
          // 其他需要的变量同理
      };
  </script>
  

• 步骤2：编写shell启动脚本（比如start-app.sh）：

  #!/bin/bash
  # 替换index.html中的占位符为环境变量值
  envsubst '<%= ASPNETCORE_ENVIRONMENT %>' < /app/wwwroot/index.html > /app/wwwroot/index.tmp.html && mv /app/wwwroot/index.tmp.html /app/wwwroot/index.html
  
  # 启动.NET应用
  dotnet YourApp.dll
  

• 步骤3：修改Dockerfile，使用脚本启动：

  # 构建阶段省略...
  COPY --from=build /app/publish .
  COPY start-app.sh .
  RUN chmod +x start-app.sh
  ENTRYPOINT ["./start-app.sh"]
  

• React中使用：

  console.log(window.dockerEnv.ASPNETCORE_ENVIRONMENT);
  

方案3：利用CRA的运行时环境变量（仅适用于Create React App） #

如果你的React项目是用CRA创建的，可以通过自定义环境变量的方式，但需要注意CRA默认只识别以REACT_APP_开头的变量，且通常是构建时注入。不过我们可以通过运行时替换来绕开：

• 步骤1：在public/index.html中添加全局变量定义：

  <script>
      window.REACT_APP_ASPNETCORE_ENVIRONMENT = '%REACT_APP_ASPNETCORE_ENVIRONMENT%';
  </script>
  

• 步骤2：启动容器时，用环境变量替换这个占位符（可以复用方案2的envsubst脚本，或者直接在Docker run时传递）：

  docker run -e ASPNETCORE_ENVIRONMENT=Development -e REACT_APP_ASPNETCORE_ENVIRONMENT=$ASPNETCORE_ENVIRONMENT your-image
  

• React中使用：

  console.log(window.REACT_APP_ASPNETCORE_ENVIRONMENT);
  

方案选择建议 #

• 涉及敏感信息的变量（比如API密钥），优先用方案1，避免暴露在前端代码中。
• 非敏感的配置变量（比如环境标识），用方案2更简单，不需要修改后端逻辑。

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