Web应用环境变量解析机制及React在Netlify平台的取值相关问题

1. process.env的取值逻辑、是全局对象还是实时解析？ #

你在React前端代码里用到的process.env.REACT_APP_XXX，和Node.js运行环境里的全局process对象没有任何关系，也不存在实时解析的逻辑。
React官方脚手架（CRA）的底层构建工具会在代码编译阶段做静态字符串替换：扫描所有代码里的process.env.REACT_APP_*字段，直接替换成对应环境变量的字面量值。也就是说你写的代码：

const someId = process.env.REACT_APP_SOME_ID;
const otherId = process.env.REACT_APP_OTHER_ID;

构建完成后实际的代码会变成类似下面的形式：

const someId = "你配置的SOME_ID实际值";
const otherId = "你配置的OTHER_ID实际值";

生产环境的打包产物里根本不存在process这个全局对象，你直接在控制台输入process.env会报未定义错误，只有本地开发环境为了调试方便才会做process的polyfill模拟。

2. 为什么环境变量能提升敏感数据防护能力？ #

首先必须澄清一个常见误区：所有带REACT_APP_前缀的环境变量都会被打包到前端公开产物中，天生就是公开可访问的，绝对不能用来存储敏感数据（比如服务密钥、数据库密码）。
它的安全价值体现在以下两点：

• 避免配置硬编码进代码仓库：如果把配置值直接写在代码里，一旦代码仓库泄露，所有配置都会直接暴露，而把配置存在托管平台的环境变量里，只有拥有平台项目权限的人才能查看，大幅降低了配置泄露的概率。
• 多环境隔离无需修改代码：开发、测试、生产环境的配置可以单独管理，不用在代码里来回修改切换，避免了误把测试环境的敏感配置提交到生产的问题。
  你提到的“控制台直接调用取变量”的情况只会在本地开发环境出现，生产环境没有这个全局对象，用户要拿这些配置只能去解析混淆后的打包JS文件，比直接看代码仓库拿值的成本高很多。

3. 环境变量的赋值阶段，是否会随托管平台变化？ #

变量赋值分为两个环节：

1. 构建环境注入环节：你在Netlify部署面板配置的环境变量，会在平台触发构建任务时，注入到构建任务运行的Node.js环境中，这一步的实现逻辑会随托管平台变化：比如Netlify/Vercel是在项目设置面板配置，自己服务器构建的话可以通过命令行传入、或者读取本地.env文件配置。
2. 静态替换环节：React构建工具读取Node环境中的REACT_APP_*变量，替换到代码中的环节是固定的，和托管平台无关，所有静态前端应用的环境变量替换逻辑都发生在构建阶段，构建完成后变量值就已经固定在产物里了，后续部署、运行阶段都不会再修改。

内容的提问来源于stack exchange，提问作者Spray'n'Pray