Azure Static Web Apps中dotEnv环境变量优先级及覆盖机制咨询

覆盖机制原理 #

React项目依赖Create React App内置的dotenv加载环境变量，它的核心逻辑是先读取进程级环境变量，再读取.env系列文件。Azure Static Web Apps的流水线（不管是GitHub Actions还是Azure DevOps）中配置的环境变量，是直接注入到构建进程的系统环境里的，属于优先级最高的进程级变量。当构建脚本运行时，dotenv检测到进程中已经存在REACT_APP_API_URL这类变量，就会直接使用这个值，完全跳过.env文件里的同键配置，这就是你看到的覆盖现象。

优先级规则（从高到低） #

实际构建时，环境变量的加载优先级明确如下：

• 流水线/构建平台配置的进程级环境变量（比如GitHub Actions yml里的env字段、Azure门户中Static Web Apps的构建环境变量）
• .env.production.local（仅production环境生效，默认被.gitignore忽略，适合本地生产调试）
• .env.production（你创建的生产环境配置文件）
• .env.local（所有环境生效，默认被.gitignore忽略）
• .env（基础环境配置文件）

补充说明：Azure Static Web Apps默认以production环境触发构建，所以会优先加载带production后缀的.env文件，但只要流水线里配置了同名的REACT_APP_前缀变量，就会直接覆盖所有文件中的对应值。

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