React生产构建部署Nginx后，.env文件未读取变量为Null求助

1. 先核对.env文件的位置和命名 #

• 生产环境优先用.env.production文件，或者根目录下的.env文件，必须和package.json放在同一级，不能丢进子文件夹。
• 别写错文件名：.env.local是本地开发专用，生产构建不会读取；文件名大小写敏感，.env.Production这类写法会被判定为无效文件。

2. 检查变量名和值的格式 #

React要求自定义环境变量必须以REACT_APP_开头，你的REACT_APP_API和REACT_APP_CODE命名符合规则，但要注意变量值别加多余空格或引号，示例格式如下：

REACT_APP_API=https://你的真实API地址
REACT_APP_CODE=你的授权码

3. 确保构建时变量已被注入 #

• 本地构建部署：先确认.env.production文件存在，再执行npm run build，构建过程中create-react-app会自动把环境变量注入到静态文件中。
• GitLab CI/CD构建：不要依赖本地.env文件（通常.env会被加入.gitignore，不会提交到仓库），直接在GitLab项目的Settings > CI/CD > Variables中添加REACT_APP_API和REACT_APP_CODE变量，CI构建时会自动将这些变量注入构建环境。

4. 验证构建结果 #

完成构建后，打开build/static/js目录下的主JS文件，搜索REACT_APP_API：能找到对应的真实值说明注入成功；如果显示null或未被替换，说明构建时未读取到.env文件。

5. 检查.gitignore配置 #

如果.env或.env.production在.gitignore中，仓库内不会存在该文件，CI构建自然无法读取，这种情况下必须用GitLab CI变量配置，不要将.env文件存入仓库。

补充说明 #

• 前端静态文件运行在浏览器端，无法在运行时读取服务器上的.env文件，必须在构建阶段就将变量替换为真实值，不要尝试在代码中动态读取。
• 你的Nginx配置是正常的，仅负责静态文件路由转发，与环境变量读取问题无关。

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