React应用更新Heroku配置变量后process.env未同步更新问题

你踩了react-scripts（Create React App）环境变量机制的典型坑：所有REACT_APP_开头的环境变量，是在执行npm run build的构建阶段被静态替换、硬编码进最终打包的JS文件里的，属于构建时变量，根本不会在应用运行时动态读取Heroku dyno的环境变量。

你现在通过API修改Heroku配置变量、触发dyno重启，只是更新了dyno运行环境里的变量值，但你的前端静态资源早在上次部署构建时就把旧的变量值写死在打包产物里了。Heroku修改配置触发的重启只会重新拉起dyno进程，不会重新执行构建流程，所以你代码里读process.env永远拿到的是上次构建时注入的旧值。你能通过GET接口拉到最新的配置值，是因为你直接请求了Heroku平台侧存储的配置数据，和你前端打包文件里硬编码的值没有任何关系。

• 方案1：更新配置后触发重新构建
  既然变量是构建时注入，每次修改完配置变量后，额外调用Heroku平台API触发一次全新的应用构建，让构建流程重新拉取最新的环境变量打包进静态资源，构建完成后新的dyno上线，用户刷新就能拿到最新值。
  缺点是每次改配置都要等完整的构建流程，耗时久，不适合需要频繁变更配置的场景。
• 方案2：运行时动态拉取配置（推荐）
  放弃用process.env存需要动态更新的配置，直接利用你已经实现的配置拉取逻辑做运行时配置加载：
  1. 把需要动态变更的配置从REACT_APP_*构建变量中剥离，不要在构建阶段注入
  2. 不要把Heroku的API Token直接写在前端代码里，先写一个极薄的后端接口做代理，由后端持有Token请求Heroku的配置接口，过滤掉敏感信息后再返回给前端，避免Token泄露导致应用被恶意篡改
  3. 在React应用初始化阶段（根组件挂载、入口文件加载时）请求这个代理接口拿到最新配置，存入全局状态（Context、Redux、全局变量都可以），整个应用统一从全局状态读取配置即可
     这种方案不需要重新构建，配置更新后用户刷新页面就能拿到最新值，甚至可以加简单的轮询逻辑实现不刷新同步配置。
• 方案3：启动时动态生成前端配置文件
  调整Heroku的启动流程，在dyno每次启动时先把当前最新的环境变量生成一个前端可访问的静态配置文件，再启动静态资源服务：
  1. 提前在public/index.html里预留一个config.js的引用位置
  2. 修改Heroku的启动命令，不要直接启动静态服务，先执行配置生成脚本：

  # 把当前最新的环境变量写入config.js，挂到window全局对象
  echo "window.__APP_CONFIG__ = { REACT_APP_VAR: '$REACT_APP_VAR' }" > ./build/config.js
  # 再启动静态服务
  npx serve -s build
  

  这种方案下每次dyno重启（包括修改配置触发的自动重启）都会生成带最新配置的config.js，不需要重新构建，前端直接读window.__APP_CONFIG__上的配置值即可，注意不要读process.env。

• Heroku Platform API的鉴权Token有极高的操作权限，绝对不能硬编码在前端代码中，所有涉及Heroku API的操作必须经后端代理
• 所有REACT_APP_*前缀的变量都会被完整打包到公开的前端静态资源中，永远不要用这种方式存储密钥、密码等敏感信息，哪怕是存放在Heroku配置变量中也一样会泄露给所有访问用户。

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