在 .env 文件中存储 firebase 配置

Question

我有一个 Sveltekit 项目，我使用 firebase 进行身份验证。我将 firebase.js 文件存储在 \src\lib 文件夹中，其中包含 apiKey 和 authDomain 等配置参数。我将 apiKey 值存储在项目根目录下的 .env 文件中，并使用 process.env.API_KEY 加载该值。但是，当我执行 npm run build 时，我在浏览器控制台中收到错误 - “进程未定义”。我尝试了以下方法，但似乎都不起作用 -

方法 1 -

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { config } from 'dotenv'

config()

const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
}

const app = initializeApp(firebaseConfig)
const auth = getAuth(app)

export default auth

方法 2 -

在这里，我使用了 env-cmd 库，这是我通过另一篇 Stackoverflow 帖子找到的。以下是更新后的代码

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'

const firebaseConfig = {
  apiKey: process.env['API_KEY'],
  authDomain: process.env['AUTH_DOMAIN'],
}

const app = initializeApp(firebaseConfig)
const auth = getAuth(app)

export default auth

我还更新了 package.json 中的脚本，如下所示 -

"scripts": {
        "dev": "env-cmd vite dev",
        "build": "env-cmd vite build",
        "package": "svelte-kit package",
        "preview": "vite preview",
        "prepare": "svelte-kit sync"
    }

这两种方法似乎都不起作用，我仍然遇到相同的错误，即“流程未定义”。甚至我在 Github 上检查过的其他一些存储库也在配置文件中硬编码了 apiKey，这显然是一种不好的做法，即使对于业余爱好项目也是如此。

关于如何通过 .env 文件合并 firebase apiKey 有什么想法吗？

Answer 1

来自firebase 文档

与 API 密钥的通常使用方式不同，Firebase 服务的 API 密钥不用于控制对后端资源的访问；这只能通过 Firebase 安全规则（控制哪些用户可以访问资源）和应用程序检查（控制哪些应用程序可以访问资源）来完成。

通常，您需要严格保护 API 密钥（例如，通过使用保管库服务或将密钥设置为环境变量）；但是，Firebase 服务的 API 密钥可以包含在代码或签入的配置文件中。