本文详细阐述了如何在react应用中配置和使用环境变量，特别是针对`create-react-app`项目的标准实践。我们将探讨环境变量的命名约定、在`.env`文件中定义变量的方法、以及如何在react组件中通过`process.env`访问它们。此外，文章还将针对`.env`文件位于项目外部（如`config`文件夹）的特殊场景，提供实用的解决方案和注意事项，确保开发者能够灵活高效地管理应用配置。
引言：理解React应用中的环境变量
在现代Web应用开发中，环境变量扮演着至关重要的角色。它们允许我们在不修改代码的情况下，根据不同的部署环境（如开发、测试、生产）调整应用的配置，例如API地址、数据库连接字符串或第三方服务密钥。对于React这类前端应用，环境变量尤其有助于管理不同环境下的后端服务地址、功能开关或公开的API密钥。
React应用环境变量的核心机制
create-react-app (CRA) 是构建React应用的主流工具，它内置了对环境变量的良好支持。以下是其核心机制：
-
命名约定：REACT_APP_ 前缀 为了避免与系统环境变量冲突，CRA规定所有面向客户端的自定义环境变量必须以 REACT_APP_ 开头。只有带有此前缀的变量才会被webpack打包进客户端代码中。
-
定义环境变量：.env 文件 环境变量通常定义在项目根目录下的 .env 文件中。这是一个纯文本文件，每行定义一个 KEY=VALUE 对。CRA支持多种 .env 文件，例如：
- .env: 默认环境变量。
- .env.development: 开发环境特有的变量。
- .env.production: 生产环境特有的变量。
- .env.test: 测试环境特有的变量。
- .env.local: 本地覆盖变量，不会被版本控制。
CRA会根据当前运行模式（通过node_ENV确定）加载相应的 .env 文件，并按优先级覆盖。
-
访问环境变量：process.env 在React代码中，你可以通过 process.env 对象来访问这些环境变量。例如，如果你在 .env 文件中定义了 REACT_APP_API_URL，那么在你的组件中可以通过 process.env.REACT_APP_API_URL 来获取其值。
示例：定义与使用环境变量
假设我们有一个React应用，需要根据环境切换不同的API域名和一些计数器初始值。
步骤一：在.env文件中定义变量
在你的React项目（例如frontend文件夹）的根目录下创建或编辑 .env 文件：
# frontend/.env REACT_APP_COUNT=0 REACT_APP_DOMAIN_NAME=api.development.com REACT_APP_ANALYTICS_KEY=dev-analytics-123
如果你有生产环境的特定配置，可以创建 frontend/.env.production：
# frontend/.env.production REACT_APP_DOMAIN_NAME=api.production.com REACT_APP_ANALYTICS_KEY=prod-analytics-xyz
步骤二：在React组件中访问变量
在你的React组件或任何javaScript文件中，可以直接使用 process.env：
// frontend/src/App.js import React from 'react'; function App() { const count = process.env.REACT_APP_COUNT; const domainName = process.env.REACT_APP_DOMAIN_NAME; const analyticsKey = process.env.REACT_APP_ANALYTICS_KEY; console.log("Current Count:", count); console.log("API Domain:", domainName); console.log("Analytics Key:", analyticsKey); return ( <div> <h1>React Environment Variables Example</h1> <p>Count from .env: {count}</p> <p>Domain Name from .env: {domainName}</p> <p>Analytics Key: {analyticsKey}</p> </div> ); } export default App;
当你运行 npm start (开发模式) 时，domainName 将是 api.development.com。当你运行 npm run build 并部署 (生产模式) 时，它将是 api.production.com。
重要注意事项
-
重启应用生效： 每当你修改 .env 文件后，必须重启你的开发服务器（例如，npm start 或 yarn start）才能使新的环境变量生效。这是因为环境变量是在应用启动时加载并注入到构建过程中的。
-
.env 文件位置： create-react-app 默认期望 .env 文件位于 React 应用的根目录。例如，如果你的React项目在 frontend/ 文件夹中，那么 .env 文件应该放在 frontend/.env。
-
安全性考量： 切勿将敏感信息（如私有API密钥、数据库凭据等）直接存储在客户端可访问的环境变量中。 客户端代码在构建后是公开的，任何用户都可以通过浏览器开发者工具查看这些变量。对于需要保密的密钥，应通过后端服务进行代理或在后端进行处理。前端环境变量更适合存储公开的配置信息，如公共API URL、功能标志等。
-
构建时注入： 环境变量是在构建时被静态注入到javascript包中的。这意味着它们的值在应用运行时是固定的，不会动态变化。
处理特殊项目结构（如.env在外部config文件夹）
根据你提供的项目结构：
. ├── backend │ └── ... ├── frontend │ └── ... ├── config │ ├── .env
你的 .env 文件位于 config/.env，而不是 frontend/.env。默认情况下，create-react-app 运行在 frontend 目录下时，是无法直接识别 config/.env 文件的。
要解决这个问题，你有以下几种方案：
-
推荐方案：将.env文件移动到React应用根目录 最简单、最符合CRA标准实践的方法是将 .env 文件直接移动到 frontend 文件夹的根目录。
. ├── backend │ └── ... ├── frontend │ ├── .env <-- 移动到这里 │ └── ... └── config └── ... (如果 config 文件夹还有其他用途，可以保留)
这是最推荐的做法，因为它避免了额外的配置和复杂性。
-
替代方案：使用构建脚本复制文件 如果你因为某种原因不能将 .env 文件移动到 frontend 目录，你可以在启动或构建React应用之前，通过一个简单的脚本将 config/.env 文件复制到 frontend/.env。
在 frontend/package.json 的 scripts 部分，你可以修改 start 和 build 命令：
// frontend/package.json { "name": "frontend", "version": "0.1.0", "private": true, "dependencies": { // ... }, "scripts": { "copy-env": "cp ../config/.env ./.env", // 复制 .env 文件 "start": "npm run copy-env && react-scripts start", // 启动前复制 "build": "npm run copy-env && react-scripts build", // 构建前复制 "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { // ... }, "browserslist": { // ... } }
注意：
总结
在React应用中管理环境变量是实现灵活配置和多环境部署的关键。通过遵循 create-react-app 的 REACT_APP_ 命名约定和 process.env 访问机制，开发者可以轻松地在 .env 文件中定义和使用环境变量。对于 .env 文件位于项目外部的特殊情况，最直接的解决方案是将其移动到React应用根目录，或者通过简单的构建脚本在应用启动前将其复制到正确位置。始终牢记环境变量的安全性考量，避免在客户端存储敏感信息，是构建健壮和安全应用的重要一环。