在Vercel上部署我的nextjs项目会给出一个错误："FirebaseError: Firebase: Error (auth/无效-api-key)“

Question

它在建造过程中给了我一堵错误墙：

(node:748) UnhandledPromiseRejectionWarning: FirebaseError: Firebase: Error (auth/invalid-api-key).
    at createErrorInternal (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:466:40)
    at _assert (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:470:15)
    at file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5913:13
    at Component.instanceFactory (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5930:11)
    at Provider.getOrInitializeService (file:///vercel/path0/node_modules/@firebase/component/dist/esm/index.esm2017.js:290:39)
    at Provider.initialize (file:///vercel/path0/node_modules/@firebase/component/dist/esm/index.esm2017.js:234:31)
    at initializeAuth (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:584:27)
    at getAuth (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5979:12)
    at /vercel/path0/.next/server/chunks/190.js:32:68
(Use `node --trace-warnings ...` to show where the warning was created)
(node:748) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 13)
(node:748) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
> Build error occurred
Error [FirebaseError]: Firebase: Error (auth/invalid-api-key).
    at createErrorInternal (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:466:40)
    at _assert (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:470:15)
    at file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5913:13
    at Component.instanceFactory (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5930:11)
    at Provider.getOrInitializeService (file:///vercel/path0/node_modules/@firebase/component/dist/esm/index.esm2017.js:290:39)
    at Provider.initialize (file:///vercel/path0/node_modules/@firebase/component/dist/esm/index.esm2017.js:234:31)
    at initializeAuth (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:584:27)
    at getAuth (file:///vercel/path0/node_modules/@firebase/auth/dist/node-esm/index-c327074d.js:5979:12)
    at /vercel/path0/.next/server/chunks/190.js:32:68 {

我真的不知道我在看什么。有人能帮我缩小范围吗？为什么API键在本地正常工作时无效？

Answer 1

结果，我不得不将环境变量添加到Vercel中。糟了。

Answer 2

我认为这种情况下最常见的解决方案是创建2个文件。第一个文件是带有密钥的.env文件。然后是'firebase.config.js'：

​

export const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
};

​

最后，在firebase中导入和插入对象：

​

import { firebaseConfig } from './firebase.config';
firebase.initializeApp(firebaseConfig);

​