能否通过Elastic Beanstalk控制台向React应用传递环境变量？

• 原因1：Create React App（CRA）默认环境变量注入规则限制
  使用CRA搭建的项目，出于安全过滤考虑，只会将前缀为REACT_APP_的环境变量注入到客户端侧的process.env对象中，无此前缀的自定义变量会被默认过滤。
  解决方式：将你在EB中配置的自定义环境变量名统一添加REACT_APP_前缀，例如将API_DOMAIN修改为REACT_APP_API_DOMAIN。
• 原因2：环境变量注入时机错误
  React客户端项目的环境变量是构建阶段被注入到静态代码中的，并非运行时实时读取Node环境的变量。你在EB控制台修改环境变量后，没有重新触发项目构建部署的话，新的变量不会生效。
  解决方式：每次修改EB环境变量后，重新上传代码触发一次完整的构建部署流程。
• 原因3：自定义构建配置未声明注入规则
  如果你没有使用CRA默认配置，而是自行配置Webpack等构建工具，需要在构建配置的DefinePlugin中显式声明需要注入的环境变量，示例配置如下：

  const webpack = require('webpack');
  
  module.exports = {
    // 其他配置项
    plugins: [
      new webpack.DefinePlugin({
        'process.env.REACT_APP_CUSTOM_VAR': JSON.stringify(process.env.REACT_APP_CUSTOM_VAR)
      })
    ]
  }
  

注意：所有注入到客户端process.env的变量都会公开暴露在前端静态代码中，请勿将密钥、凭证等敏感信息配置为客户端可读取的环境变量。

内容的提问来源于stack exchange，提问作者an honest observer