在 Create React App 中配置 Firebase 环境变量-js教程-PHP中文网

在 Create React App 中配置 Firebase 环境变量

DDD

发布： 2025-07-14 18:50:12

原创

759人浏览过

在 create react app 中配置 firebase 环境变量

本文旨在指导开发者如何在 Create React App (CRA) 项目中正确配置 Firebase 环境变量。通过使用 .env 文件安全地存储和访问 Firebase 密钥，避免硬编码敏感信息，确保应用程序的安全性和可维护性。本文将详细介绍配置步骤，并提供示例代码，帮助你快速解决 "auth/invalid-api-key" 等常见错误。

使用 .env 文件配置 Firebase 环境变量

在开发 Web 应用时，尤其是使用 Firebase 这样的后端服务，安全地管理 API 密钥和其他敏感配置至关重要。将这些信息直接硬编码到代码中是不安全的，因此使用 .env 文件来存储环境变量是一种常见的最佳实践。

1. 安装 dotenv

首先，确保你的项目中已经安装了 dotenv 依赖。如果没有，可以使用 npm 或 yarn 安装：

npm install dotenv
# 或者
yarn add dotenv

登录后复制

虽然 Create React App (CRA) 默认支持 .env 文件，但显式安装 dotenv 可以确保在其他环境中也能正常工作。

2. 创建 .env 文件

在项目的根目录下创建一个名为 .env 的文件。在这个文件中，添加你的 Firebase 配置信息。注意：在 Create React App 中，自定义环境变量必须以 REACT_APP_ 开头。

REACT_APP_API_KEY="your_api_key"
REACT_APP_AUTH_DOMAIN="your_auth_domain"
REACT_APP_PROJECT_ID="your_project_id"
REACT_APP_STORAGE_BUCKET="your_storage_bucket"
REACT_APP_MESSAGING_SENDER_ID="your_messaging_sender_id"
REACT_APP_APP_ID="your_app_id"

登录后复制

请务必将 your_api_key、your_auth_domain 等替换为你的实际 Firebase 配置值。

冬瓜配音

AI在线配音生成器

查看详情

3. 在 firebase.js 中使用环境变量

在你的 firebase.js 文件中，使用 process.env 对象来访问这些环境变量。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getAuth,GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider,GithubAuthProvider  } from "firebase/auth";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export const db = getFirestore(app)
export const storage = getStorage(app)
export const authentication = getAuth();
export const google = new GoogleAuthProvider()
export const facebook = new FacebookAuthProvider()
export const twitter = new TwitterAuthProvider()
export const github = new GithubAuthProvider()

登录后复制

4. 重启开发服务器

在修改 .env 文件后，需要重启 Create React App 的开发服务器，以使新的环境变量生效。

npm start
# 或者
yarn start

登录后复制

5. 将 .env 添加到 .gitignore

为了防止敏感信息泄露，将 .env 文件添加到你的 .gitignore 文件中，确保它不会被提交到版本控制系统。

.env

登录后复制

注意事项

环境变量命名： 在 Create React App 中，所有自定义环境变量必须以 REACT_APP_ 开头，否则 CRA 将忽略它们。
安全性： 避免在客户端代码中直接处理敏感信息。尽量将敏感操作放在后端处理。
构建环境： 确保在生产环境中也设置了相应的环境变量。可以使用 CI/CD 工具或云平台提供的配置功能来管理生产环境下的环境变量。
调试： 如果遇到 "auth/invalid-api-key" 错误，首先检查 .env 文件中的 REACT_APP_API_KEY 是否正确，并确保已经重启了开发服务器。