为什么React开发中.env文件的自定义环境变量需要加REACT_APP前缀？

原理说明与场景示例 #

你提到的限制是CRA为了避免前端打包泄露本地敏感信息做的默认安全策略，具体含义可以通过实际场景理解：

• 我们日常用的开发设备、线上打包服务器的系统层面，本身就存储了大量全局环境变量，很多加密工具、云服务、代码托管平台都会把私钥、访问令牌这类敏感信息存在全局环境变量里，比如常见的AWS_SECRET_KEY、GITHUB_TOKEN，这些值一旦泄露会直接导致账号、资产被盗。
• 如果CRA没有做对应的限制，默认会读取系统所有全局环境变量，就很容易出现安全问题：
  1. 你在前端代码里写了读取环境变量的逻辑：const uploadKey = process.env.UPLOAD_PRIVATE_KEY，本意是读取项目根目录.env文件里你自己定义的上传服务密钥
  2. 如果你一时疏忽忘记在.env里定义这个变量，没有限制的CRA就会自动读取你开发机系统全局里同名的UPLOAD_PRIVATE_KEY的真实值，打包进最终的前端产物
  3. 前端代码是所有访问网站的用户都可以直接下载查看的，这就直接导致你本地的私钥被公开暴露。

CRA的实际处理逻辑是：默认只会读取两类环境变量，一是内置的NODE_ENV变量，二是你在项目.env文件里定义、且前缀为REACT_APP_的变量，其余所有名称的环境变量都会直接忽略，从根源上避免了误打包系统敏感信息的风险。

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