您是否也覺得「Jamstack 沒有預覽環境嗎？」

在傳統的 LAMP 架構等環境中，通常會為 /prev 或 test.example.com/ 加上 Basic 認證，以此建立預覽環境。

然而，近來採用 Vercel 或 Cloudflare Pages 搭配 Headless CMS 的架構中，許多人會感到困惑：「建置後產生的預覽用 URL，這到底是不是 staging？」「Basic 認證到底能不能設定？」

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

例如，Vercel 和 Cloudflare Pages 都具備為每個 Git 分支自動發行 preview URL 的功能。換句話說，這是一種每次都能自動建立最新 staging 環境的機制。只要以 Git 管理原始碼，建立新分支並 push，就會立即發行可供確認的 URL，無須再手動將檔案上傳至 staging 環境。

「可是，這個預覽 URL 不會被外部公開嗎？」

請放心。如下所示，存取限制也能輕鬆設定。

Cloudflare Pages 範例

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

Basic 認證

• 可以用類似既有預覽環境的方式，設定使用者名稱與密碼的驗證。除了特定架構外，這種方式的使用機會應該也不少。
• 不過，在 結合 SSG（Static Site Generation）與 SSR（Server-Side Rendering）的混合架構等情況下，Basic 驗證可能無法正常運作。

Cloudflare Access

• 若 Basic 驗證不適用於上述情況，或需要更彈性的存取控制，則可使用 Cloudflare Access。

可透過 GUI 進行以下設定（免費方案限制為 50 位使用者）。

• 僅允許特定電子郵件網域的使用者，例如 example.com
• 僅允許持有指定電子郵件地址的使用者
• Google 帳戶驗證（亦可與 Google Workspace 整合）
• 依 IP 位址限制存取
• 發行臨時存取 PIN 碼

Vercel 的範例

Vercel 當然也能保護預覽環境。

• Vercel Authentication 限制僅團隊成員可存取
• 密碼保護（可於 Pro 以上方案設定）
• 也可以對正式環境與預覽環境套用不同的限制

透過 Vercel Authentication 功能，可以限制僅專案成員存取，也能建立可分享的連結。

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

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

簡單來說，就是這麼回事！

「Jamstack 很時髦，但有完善的預覽環境嗎？」「安全性沒問題嗎？」現今的暫存環境，是會為每個分支自動產生的「預覽環境」。而且存取限制也能靈活又輕鬆地設定。

與過去的做法同樣安心，卻能更輕鬆、更聰明地實現。 請務必從下一個專案開始試試看。