Using environment variables in React and Vite

在 React 和 Vite 中使用环境变量

环境变量是管理应用程序中的密钥和配置设置的有效方法。它们允许您将敏感信息（如 API 密钥、数据库凭证和其他配置设置）存储在代码库之外。这样可以更轻松地管理应用程序的配置，并降低在代码中暴露敏感信息的风险。使用 React 时，了解如何在 React 中使用环境变量可以大大提高应用程序的安全性和灵活性。

当您计划将代码开源或与他人共享时，这将非常有用。在本文中，我们将学习如何使用 React 和 Vite 中的环境变量来管理应用程序中的 secret 和配置设置。

在 React 中使用环境变量

在 React 项目的根目录中创建一个文件。您可以手动创建此文件，也可以在终端中使用该命令。.envtouch

touch .env

将环境变量添加到文件中。在变量前面加上，使它们在 React 应用程序中可用。.envREACT_APP_

REACT_APP_API_KEY=your-api-key
REACT_APP_API_URL=https://api.example.com

使用访问 React 组件中的环境变量。process.env

const apiKey = process.env.REACT_APP_API_KEY;
const apiUrl = process.env.REACT_APP_API_URL;

console.log("API Key:", apiKey);
console.log("API URL:", apiUrl);

请记住，在文件中添加或更新环境变量后重新启动开发服务器。.env

在 Vite 中使用环境变量

Vite 使用这些文件为环境变量提供内置支持。您可以为不同的环境（如开发、生产和测试）创建不同的文件。.env.env

在 Vite 项目的根目录中创建一个文件。您可以手动创建此文件，也可以在终端中使用该命令。.envtouch

touch .env

将环境变量添加到文件中。在你的变量前面加上，使它们在你的 Vite 应用程序中可用。.envVITE_

VITE_API_KEY=your-api-key
VITE_API_URL=https://api.example.com

使用访问 Vite 应用程序中的环境变量。import.meta.env

const apiKey = import.meta.env.VITE_API_KEY;
const apiUrl = import.meta.env.VITE_API_URL;

console.log("API Key:", apiKey);
console.log("API URL:", apiUrl);

请记住，在文件中添加或更新环境变量后重新启动开发服务器。.env

在 Production 中使用环境变量

将 React 或 Vite 应用程序部署到生产环境时，管理环境变量对于维护安全性和灵活性至关重要。以下是有效处理它们的方法：

环境的单独配置

为不同的环境（如开发、暂存和生产）创建不同的文件。这可确保您的应用程序对每个环境使用正确的设置。.env

.env.development：用于本地开发
.env.production：用于实时制作

专业提示：用于不应共享的计算机特定设置。.env.local

安全管理 Secret

确保 API 密钥和数据库凭证等敏感信息的安全：

使用密钥管理工具：考虑使用 AWS Secrets Manager、Azure Key Vault 或 HashiCorp Vault 等工具来管理敏感数据。
存取控制： 限制谁可以查看和修改这些密钥。

使用 CI/CD 实现自动化

将环境变量管理合并到 CI/CD 管道中：

环境注入：在构建过程中注入特定于环境的变量。
密钥管理：使用 CI/CD 工具的密钥管理功能安全地处理环境变量。

将 Vite 用于环境变量的好处

Vite 使用文件来加载环境变量。您可以为不同的环境创建不同的文件：.env.env

.env：在所有情况下加载。
.env.local：在所有情况下都加载，被 git 忽略。
.env.[mode]：仅在指定模式下加载（例如，.env.production）。
.env.[mode].local：仅在指定模式下加载，被 git 忽略。

TypeScript 支持

对于 TypeScript 项目，您可以通过定义自定义环境变量来增强 IntelliSense。在 src 目录中创建一个文件：vite-env.d.ts

/// 

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  // more env variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

如果您的代码依赖于浏览器环境中的类型（如 DOM 和 WebWorker），则可以更新中的 lib 字段。tsconfig.json

{
  "lib": ["WebWorker"]
}

注意

以为前缀的环境变量由 Create React App 自动嵌入到构建中。你不需要使用包来加载 React 应用程序中的环境变量。REACT_APP_dotenv
Vite 会自动从文件中加载环境变量，并使用 .你不需要使用像 package 这样的包来在你的 Vite 应用程序中加载环境变量。.envimport.meta.envdotenv
确保将文件添加到文件中，以防止它们被提交到版本控制系统。.env.gitignore

在 React 和 Vite 中使用环境变量是管理应用程序中的秘密和配置设置的好方法。它允许你将敏感信息存储在代码库之外，并更容易管理应用程序的配置。我希望这篇文章能帮助你理解如何在 React 和 Vite 中使用环境变量。祝您编码愉快！ 🚀