Day22 - Astro Series: Environment Variable

Astro 系列文第二十二日：環境變數

#系列文

前言

本章節來介紹環境變數在 Astro 當中，並且可以如何運用它。

為什麼需要環境變數？

在真實世界中會需要面臨不同的開發環境，像是：開發、生產……等階段，而每個階段有可能會有自己對應的 API 伺服器，因此需要連接不同的伺服器位址，因此與其寫死相關程式片段，我們可以透過環境變數來創建一個「存在於專案範圍內的變數」，來解決相同的程式需要應對不同環境的問題。同時環境變數允許開發人員將敏感信息（如 API 金鑰或數據庫密碼）存儲在安全的位置，而不是寫死在代碼中。因此總結以下幾點使用環境變數的好處：

安全性
易維護
易配置

獲取環境變數

變數將會暴露在 import.meta.env 物件上，以下是一些預設的環境變數與解釋：

import.meta.env.MODE：網站執行的階段。在 astro dev 時會是 development模式，而在 astro build 則是 production 模式。
import.meta.env.PROD：在 production 模式時為 true，反之亦然。
import.meta.env.DEV：在 development 模式時為 true，反之亦然。
import.meta.env.BASE_URL：網頁的基礎 URL，由設定檔中的 [base 屬性](https://docs.astro.build/en/reference/configuration-reference/#base)所決定。🔗
import.meta.env.SITE：網頁部屬的連結，由設定檔中的 [site 屬性](https://docs.astro.build/en/reference/configuration-reference/#site)所決定。🔗
import.meta.env.ASSETS_PREFIX：Astro 生成的資產連結前墜，如果設定檔中的 build.assetsPrefix 屬性🔗有設置。

環境變數也可以用於檢測當前專案的模式並採取一些行動，像是：在開發模式時顯示草稿狀態的文件，但在生產模式時則隱藏。

const publishedPosts = await getCollection('post', (post) => (import.meta.env.PROD ? !post.data.isDraft : true));

使用環境變數

Astro 使用 Vite 內建的環境變數，因此它們使用環境變數的方式是完全相同的，可以使用 Vite 的任一方法🔗來處理。

創建 `.env` 檔案

# 只在伺服器上運行有效
PUBLIC_IMAGEAPI=https://picsum.photos
# 任何地方都有效
SECRET_PASSWORD=password123

舉例以上的例子，只要有 PUBLIC_ 前墜名稱的環境變數將可以在整個專案不管是伺服端還是客戶端存取到，但前墜 SECRET_ 的環境變數則只能在伺服端存取得到。

// 使用環境變數
fetch(`${import.meta.env.PUBLIC_IMAGEAPI}/300/300`);

創建不同環境的 `.env` 檔案

可以在文件名稱上附加模式名稱（像是 production 或 development）如： .env.production 或 .env.development，這樣該檔案內的環境變數只會在對應的模式下生效。

透過 CLI 添加環境變數

環境變數也可以透過 CLI 在運行時添加，但要留意這種方式設置的變數將會在全專案中可被使用，包含客戶端上：

IMAGEAPI=https://picsum.photos npm run dev

前言

為什麼需要環境變數？

獲取環境變數

使用環境變數

創建 .env 檔案

創建不同環境的 .env 檔案

透過 CLI 添加環境變數

延伸閱讀

創建 `.env` 檔案

創建不同環境的 `.env` 檔案