如何在 SvelteKit 中管理前端環境變數

大家都知道後端節點（如 Node.js）可以輕鬆地透過 .env 檔案或 process 物件來存取環境變數。但在純前端應用程式，尤其是使用如 SvelteKit 這樣的現代框架時，這個任務看起來就沒那麼直觀了。本文將介紹如何在 SvelteKit 中有效地管理和存取環境變數。

在 Node.js 中讀取 .env 檔案

在 Node.js 應用程式中，環境變數通常透過 .env 檔案來管理。這些變數可以用來儲存應用程式配置、機密鑰匙或其他環境特定的設定。下面是如何在 Node.js 中讀取 .env 檔案的示例：

import dotenv from 'dotenv';

dotenv.config();

console.log(process.env.YOUR_ENV_VARIABLE);

在上述代碼中，我們使用 dotenv 庫來載入 .env 檔案中的變數。然後，你可以透過 Node.js 的 process.env 物件來存取這些變數。

在 SvelteKit 中管理環境變數

SvelteKit 是一個基於 Svelte 的全端框架，提供了一套更高層次的抽象，特別是在管理環境變數時。在 SvelteKit 中，環境變數不是直接讀取 .env 檔案中的變數。相反，它們需要透過特定的配置來使其在前端代碼中可用。

SvelteKit 不能直接讀取 .env 檔案的環境變數，意思是它們不是自動地、直接地從 .env 檔案讀取並暴露給前端代碼。這與 Node.js 中的處理方式有所不同，Node.js 可以直接透過 process.env 存取 .env 檔案中的變數。

在 SvelteKit 中，雖然 .env 檔案仍然用於定義環境變數，但這些變數需要透過 SvelteKit 和其底層的構建工具（Vite）的特定配置來暴露。有一些規則：在 .env 檔案中定義的變數需要以 PUBLIC_ 開頭，這樣 Vite 才會在構建過程中將它們暴露給前端代碼。

所以，當我們在 SvelteKit 中談論環境變數時，它們確實是在 .env 檔案中定義的，但它們的暴露和存取方式是由 SvelteKit 和 Vite 的配置決定的，而非直接從 .env 檔案自動讀取。

讀取環境變數範例

步驟 1：創建 .env 檔案

首先，在你的 SvelteKit 專案根目錄下創建一個 .env 檔案。例如：

PUBLIC_CLIENT_ID="test-id"

PUBLIC_CALLBACK="http://localhost:5173/oauth2callback"

在 SvelteKit 中，所有要公開的環境變數都應以 PUBLIC_ 開頭，這樣它們才會被 Vite（SvelteKit 底層的構建工具）公開給前端。

步驟 2：存取環境變數

在 SvelteKit 應用程式中，可以直接 import $env/static/public 來存取這些變數：

<script>
  import { PUBLIC_CALLBACK, PUBLIC_CLIENT_ID } from '$env/static/public';

  const redirect_uri = PUBLIC_CALLBACK

  const client_id = PUBLIC_CLIENT_ID
</script>

步驟 3：切換開發環境與正式環境

你可以在專案根目錄放兩個 .env 檔案，分別是 .env 和 .env.production。這樣當你在本機開發使用 pnpm run dev 時，程式會使用 .env 的變數，而當你使用 pnpm run build 時，就會改為使用 .env.production 中的變數。

完整說明請參考 $env/static/public