Netlify，环境变量未定义

Question

网络设置

在本地服务器上一切工作正常，但是当我部署它时，由于某种原因，来自环境变量的 firebase API 未定义...

当然，我在 netlify 设置中添加了环境变量。我还尝试使用干净的缓存重新部署该站点，但仍然出现错误：Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)。

//firebaseConfig.ts
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const provider = new GoogleAuthProvider();

Answer 1

我在 Netlify 上的部署也遇到了类似的问题。我做错的事情是在部署后添加环境变量。然后进行进一步的部署只会给出相同的错误。您可以尝试的是再次手动构建项目，然后部署它，并确保在构建和部署之前在 Netlify 项目控制台中添加环境变量。