Firebase 的 Vercel 部署问题：环境变量

Question

我正在尝试通过 vercel 部署我的 nextjs 项目。我在项目中使用 firebase，因此我已将 firebase 密钥上传到环境变量下的 vercel。在本地环境中，它运行良好，因为它使用 env.local 文件作为环境变量，但我在使用 vercel 时遇到了很大的问题。

如有任何帮助，我们将不胜感激。

我的 firebase 配置文件如下（我留下注释代码只是为了更全面地了解我所尝试的内容）：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getAuth } from "firebase/auth";

// // Type definitions for Firebase
// export const API_KEY = process.env.NEXT_PUBLIC_FIREBASE_API_KEY as string;
// export const AUTH_DOMAIN = process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN as string;
// export const PROJECT_ID = process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID as string;
// export const STORAGE_BUCKET = process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET as string;
// export const MESSAGING_SENDER_ID = process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID as string;
// export const APP_ID = process.env.NEXT_PUBLIC_FIREBASE_APP_ID as string;
// export const MEASUREMENT_ID = process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID as string;

// export const API_KEY = process.env.REACT_APP_API_KEY as string;
// export const AUTH_DOMAIN = process.env.REACT_APP_AUTH_DOMAIN as string;
// export const PROJECT_ID = process.env.REACT_APP_PROJECT_ID as string;
// export const STORAGE_BUCKET = process.env.REACT_APP_STORAGE_BUCKET as string;
// export const MESSAGING_SENDER_ID = process.env.REACT_APP_MESSAGING_SENDER_ID as string;
// export const APP_ID = process.env.REACT_APP_APP_ID as string;
// export const MEASUREMENT_ID = process.env.REACT_APP_MEASUREMENT_ID as string;

// const firebaseConfig = {
//   apiKey: API_KEY,
//   authDomain: AUTH_DOMAIN,
//   projectId: PROJECT_ID,
//   storageBucket: STORAGE_BUCKET,
//   messagingSenderId: MESSAGING_SENDER_ID,
//   appId: APP_ID,
//   measurementId: MEASUREMENT_ID,
// };


const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY as string,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN as string,
  projectId: process.env.REACT_APP_PROJECT_ID as string,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET as string,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID as string,
  appId: process.env.REACT_APP_APP_ID as string,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID as string,
};

export default firebaseConfig;


const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const storageRef = getStorage(app);
const auth = getAuth(app);

export { app, auth, db, storageRef };

我在 vercel 中的环境变量：

我不断收到以下错误：

    FirebaseError: Firebase: Error (auth/invalid-api-key).
    at v (ed756598-a831d6f53351aa8d.js:16:523)
    at _ (ed756598-a831d6f53351aa8d.js:16:571)
    at i.instanceFactory (ed756598-a831d6f53351aa8d.js:1021:2780)
    at s.getOrInitializeService (8267-486190a7869a0d11.js:186:2798)
    at s.initialize (8267-486190a7869a0d11.js:186:2173)
    at i.popupRedirectResolver (ed756598-a831d6f53351aa8d.js:1021:178)
    at iv (ed756598-a831d6f53351aa8d.js:1021:202)
    at 63465 (layout-a8a3315fdf32cc09.js:1:765)
    at s (webpack-37e1d6712f871409.js:1:152)
    at 84940 (layout-a8a3315fdf32cc09.js:1:9533)
and

    Error: Minified React error #423; visit https://react.dev/errors/423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at iZ (5578221e-7c84dc17c8769948.js:1:118353)
    at ia (5578221e-7c84dc17c8769948.js:1:95166)
    at 5578221e-7c84dc17c8769948.js:1:94988
    at il (5578221e-7c84dc17c8769948.js:1:94995)
    at oJ (5578221e-7c84dc17c8769948.js:1:92351)
    at oZ (5578221e-7c84dc17c8769948.js:1:91770)

at MessagePort.T (1602-b9c3299b438f1149.js:1:84213)

Answer 1

我最终使用 .PUBLIC.FIREBASE 声明来允许访问我的环境变量。我的新环境变量的格式为： const API_KEY = process.env.NEXT_PUBLIC_FIREBASE_API_KEY 作为字符串； （您还必须在环境变量下的 vercel 中添加这些）。 如果没有下一个 public 关键字，Vercel 显然无法访问环境变量。

注意，这确实使它们在生产过程中比仅使用 process.env.REACT_APP_API_KEY 更容易访问。但即使是 REACT_APP 也不能使环境变量完全安全。

安全性应通过 Firestore 安全规则和云功能/服务器来处理。