React项目根目录.env环境变量的安全性问题咨询

1. 能不能在.env文件存储密钥？ #

绝对不行。React执行npm run build打包时，所有以REACT_APP_开头的环境变量都会被直接注入到打包后的前端代码中。哪怕你现在在源文件或控制台看不到完整值，本质上这些变量是暴露在客户端环境的，任何用户都能通过技术手段获取到。密钥这类敏感信息必须放在后端服务中，前端只通过调用后端接口间接使用，绝不能直接存在前端的.env文件里。

2. 为什么控制台执行process.env.REACT_APP_API_URL返回null？ #

React打包过程中，process.env.REACT_APP_*这类写法会被直接替换成对应的变量值，而不是把process.env这个对象保留在浏览器全局环境里。比如你代码里写process.env.REACT_APP_API_URL，打包后会变成"https://your-api.com"这种字符串，浏览器里根本不存在全局的process.env对象，所以控制台直接执行会返回null。

3. 怎么在浏览器中获取到这些注入的变量信息？ #

虽然直观看不到，但可以通过这些方式获取：

• 打开浏览器开发者工具的Sources面板，找到打包后的主JS文件（一般是main.xxx.js），用搜索功能（Ctrl+F）查找URL片段或REACT_APP_前缀（如果代码没被完全混淆压缩的话）
• 在代码里临时添加console.log(process.env.REACT_APP_API_URL)，重新打包部署后，打开控制台就能看到实际值
• 查看网络请求记录：如果你的项目用这个URL发起了API请求，在开发者工具的Network面板里，找到对应的请求就能看到完整的接口地址

4. 关于webpack和dotenv的配置说明 #

如果你是用Create React App（CRA）初始化的项目，默认已经集成了dotenv的处理逻辑，会自动读取根目录的.env文件，所以不需要额外导入或配置这两个包。只要变量名以REACT_APP_开头，就能被自动注入到打包后的代码中。如果是自定义webpack配置的项目，才需要手动配置dotenv-webpack插件来处理.env变量。

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