「Jamstack 沒有預覽環境嗎？」你是不是這樣想過？

在傳統的 LAMP 架構等環境中，通常會在 /prev/ 或 test.example.com/ 設定 Basic 認證來準備預覽環境。

但是，在最近使用 Vercel 或 Cloudflare Pages 的 headless CMS 架構中，許多人似乎感到困惑：「構建後會產生預覽用的 URL，但這是 stg 嗎？」「首先，密碼認證（Basic 認證）可以設定嗎？」

結論：預覽環境確實存在！而且可以妥善保護！

例如，Vercel 和 Cloudflare Pages 都具備針對每個 Git 分支自動發行 preview URL 的功能。換句話說，這是 每次都自動為你建立最新預覽環境的機制。只要用 Git 管理原始碼，只需切出新分支並 push，就會立即產生確認用的 URL。完全無需手動上傳檔案到預覽環境。

「但是，那個預覽 URL 會被公開到外部嗎？」

別擔心。以下這些 存取限制也可以輕鬆設定。

Cloudflare Pages 的例子

在 Cloudflare Pages 中，可以設定預覽環境的存取限制。

基本認證

• 可以設定類似傳統預覽環境的使用者名稱和密碼認證。除了特定的設定之外，這可能是許多情況下的選擇。
• 不過，在結合 SSG（靜態網站生成）和 SSR（伺服器端渲染）的混合架構等情況下，基本認證有時可能無法正常運作。

Cloudflare Access

• 當基本認證不適用，或需要進行更靈活的存取控制時，使用 Cloudflare Access。

可以從圖形介面進行以下設定（免費方案限制為 50 位使用者）。

• 僅允許具有 example.com 等特定電子郵件網域的使用者
• 僅允許具有指定電子郵件地址的使用者
• Google 帳戶認證（也可與 Google Workspace 整合）
• 依 IP 位址進行限制
• 發行臨時存取 PIN

Vercel 範例

在 Vercel 上當然也可以保護預覽環境。

• Vercel Authentication 僅限團隊成員存取
• 密碼保護（可在 Pro 及以上方案中設定）
• 可以在生產環境和預覽環境中設定不同的限制

透過使用此 Vercel Authentication 功能，可以實現僅限專案成員存取、建立可共享連結等功能。

順帶一提，Vercel 的預覽環境保護過去需要額外付費使用 Password 認證（$150/mo），使用起來不太方便，但現在 Deploy Protection 已可在所有方案中使用！

https://vercel.com/docs/deployment-protection

也就是說，是這樣的！

「Jamstack 很潮，但預覽環境真的有嗎？」「安全性沒問題嗎？」現代的預演環境就是這樣的：每個分支都會自動產生「預覽環境」。而且存取限制也可以靈活且輕鬆地設定。

您可以以更輕鬆、更聰慧的方式實現與過往相同的安心感。何不從下一個專案開始試試看呢？