如何在AWS EC2实例的React.js应用中读取环境变量并适配多环境

嘿，这两个问题我刚好有经验，给你详细拆解一下！

首先得明确：React是运行在浏览器端的，没法直接读取EC2实例的系统环境变量——浏览器根本访问不到服务器的系统变量。所以通常有两种可行的方案：

方案一：构建时注入环境变量 #

这是最常用的方式，在构建React应用的过程中，把环境变量打包到静态文件里：

• 如果用create-react-app脚手架：环境变量必须以REACT_APP_开头（比如REACT_APP_API_URL）。在EC2上构建前，先设置好这些变量：

  export REACT_APP_API_URL=https://your-dev-api.com
  npm run build
  

  之后在React组件里直接用process.env.REACT_APP_API_URL就能拿到值了。
• 如果是自定义webpack配置（像你正在做的），可以通过dotenv类工具加载.env文件，再用webpack.DefinePlugin把变量注入到应用中，具体方法看下面的多环境配置部分。

方案二：运行时通过后端传递（适合敏感信息） #

如果有些凭证不能打包到前端代码里，你可以在EC2上部署一个简单的Node.js后端接口，让后端读取EC2的系统环境变量，然后前端通过API请求获取需要的信息。这种方式更安全，适合处理敏感凭证。

你已经写了一个根据NODE_ENV加载不同.env文件的函数，接下来可以把这个方案完善起来：

第一步：安装依赖 #

先安装dotenv和dotenv-expand（后者用来处理变量之间的引用，比如REACT_APP_API_URL=https://${REACT_APP_DOMAIN}/api）：

npm install dotenv dotenv-expand --save-dev

第二步：完善webpack配置 #

把你的函数补全，再加上变量注入的逻辑：

const webpack = require('webpack');
const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');

function getDotenvFilePath() {
  switch(process.env.NODE_ENV) {
    case 'local':
      return './.env.local';
    case 'dev':
      return './.env.development';
    case 'int': // 这里改成'staging'会更直观，对应预发布环境
      return './.env.staging';
    case 'prod':
      return './.env.production';
    default:
      return './.env'; // 兜底的默认配置文件
  }
}

// 加载对应环境的.env文件，并处理变量引用
const envConfig = dotenv.config({ path: getDotenvFilePath() });
dotenvExpand.expand(envConfig);

module.exports = {
  // ...你的其他webpack配置项
  plugins: [
    // ...你的其他插件
    // 把环境变量注入到React应用中，让浏览器端能访问到process.env
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(envConfig.parsed)
    })
  ]
};

第三步：在EC2上部署不同环境 #

• 方式一：把对应环境的.env文件上传到EC2实例的项目目录（注意：绝对不要把包含敏感凭证的.env文件提交到Git仓库）。
• 方式二：用AWS的Secrets Manager或Parameter Store管理敏感凭证，在部署脚本里拉取这些凭证，设置为EC2的系统环境变量——dotenv会自动合并系统环境变量和.env文件的变量，系统变量优先级更高，这样更安全。

重要提醒 #

浏览器端的React应用，所有注入的环境变量都会被打包到静态JS文件里，任何人都能通过查看源码看到这些值。所以绝对不要把数据库密码、API密钥这类高度敏感的信息放到前端环境变量里，这类信息应该放在后端服务中，前端通过调用后端接口来间接使用。

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