基于Create-React-App与Heroku，如何按启动命令切换环境变量？

完全没问题，Create React App（CRA）本身就支持环境变量的区分，结合Heroku的部署流程，刚好能满足你对接不同API的需求。下面我把具体步骤拆解清楚：

一、本地开发环境的多环境变量配置 #

CRA默认支持development、test、production三个基础环境，但如果你需要额外的staging环境，得借助工具来扩展：

1. 创建对应环境的.env文件
   在项目根目录下创建以下文件：

   • .env.development：本地开发环境用

     REACT_APP_API_URL=https://localhost/react_api
     

   • .env.staging：预发布环境本地调试用

     REACT_APP_API_URL=https://your-staging-api-domain.com
     

   • .env.production：生产环境本地模拟用

     REACT_APP_API_URL=https://your-production-api-domain.com
     

   注意：所有自定义环境变量必须以REACT_APP_开头，CRA才会把它注入到应用中，否则会被忽略。

2. 安装env-cmd工具
   因为CRA默认不支持自定义命名的环境文件（比如.env.staging），我们需要用env-cmd来指定加载哪个环境变量文件。执行安装命令：

   npm install env-cmd --save-dev
   # 或者用yarn
   yarn add env-cmd --dev
   

3. 修改package.json的scripts命令
   给不同环境添加启动/构建命令：

   "scripts": {
     "start": "react-scripts start", // 默认加载.env.development
     "start:staging": "env-cmd -f .env.staging react-scripts start", // 本地调试预发布环境
     "build": "react-scripts build", // 默认加载.env.production（本地构建生产包）
     "build:staging": "env-cmd -f .env.staging react-scripts build" // 构建预发布包
   }
   

   这样你想本地调试哪个环境，就运行对应的命令就行，比如npm run start:staging就会加载预发布的API地址。

二、Heroku部署的环境变量配置 #

因为你已经搭建了staging和production两个Heroku应用，只需要分别给这两个应用配置对应的环境变量即可：

1. 在Heroku后台设置环境变量

   • 打开你的staging Heroku应用，进入「Settings」页面，找到「Config Vars」区域，添加键值对：
     REACT_APP_API_URL=https://your-staging-api-domain.com
   • 同样操作你的production Heroku应用，添加：
     REACT_APP_API_URL=https://your-production-api-domain.com

2. 部署时的注意事项

   • 把所有.env文件加入.gitignore，避免敏感信息提交到代码库，Heroku会用后台设置的环境变量来构建应用。
   • 部署staging环境时，用对应的git远程分支推送（比如你给staging应用设置的远程叫heroku-staging）：

     git push heroku-staging main
     

   • 部署production环境时，推送到主远程：

     git push heroku main
     

   Heroku在构建应用时，会自动读取当前应用的Config Vars，注入到你的React应用中，完全不需要依赖本地的.env文件。

三、代码中使用环境变量 #

在你的组件或API请求代码里，直接通过process.env.REACT_APP_API_URL调用即可，比如：

// 示例API调用
fetch(`${process.env.REACT_APP_API_URL}/users`)
  .then(res => res.json())
  .then(data => console.log(data))

额外提醒 #

• 不要在.env文件里存放敏感信息（比如API密钥），Heroku的Config Vars是加密存储的，更安全。
• 本地构建不同环境的包时，用对应的build:*命令，比如npm run build:staging生成的就是预发布环境的包。

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