Day22 - Astro Series: Environment Variable

Astro 系列文第二十二日：环境变量

#unsorted

前言

本章节来介绍环境变量在 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

全站搜寻

Astro 系列文第二十二日：环境变量

前言

为什么需要环境变量？

获取环境变量

使用环境变量

创建 `.env` 文件

创建不同环境的 `.env` 文件

透过 CLI 添加环境变量

延伸阅读

前言

为什么需要环境变量？

获取环境变量

使用环境变量

创建 .env 文件

创建不同环境的 .env 文件

透过 CLI 添加环境变量

延伸阅读

创建 `.env` 文件

创建不同环境的 `.env` 文件