“Jamstack 没有预览环境吗？”您是否也有过这样的疑问？

在传统的 LAMP 架构中，通常的做法是为 /prev 或 test.example.com 添加 Basic 认证，从而搭建预览环境。

然而，近来在使用 Vercel 或 Cloudflare Pages 的 Headless CMS 架构中，很多人会感到困惑：“构建后生成的预览 URL，这算是 staging 吗？”“究竟能不能设置密码认证（Basic 认证）？”

结论：预览环境确实是有的！而且还能得到可靠的保护！

例如，Vercel 和 Cloudflare Pages 都具备为每个 Git 分支自动生成 预览 URL 的功能。 换句话说，这就是每次都自动创建最新的 staging 环境的机制。 只要用 Git 管理源代码，创建新分支并执行 push，就能立即获得用于确认的 URL。无需手动将文件上传到 staging 环境，省时省力。

“可是，这个预览 URL 不会被公开到外部吗？”

请放心。如下所示，访问限制同样可以轻松设置。

Cloudflare Pages 示例

在 Cloudflare Pages 中，可以对预览环境设置访问限制。

Basic 认证

• 这种方式与以往的预览环境较为接近，可以通过用户名和密码进行身份验证设置。除特定配置外，选择这种方式的情况也可能较多。
• 不过，在采用 SSG（静态站点生成）与 SSR（服务器端渲染）相结合的混合架构等情况下，Basic 认证可能无法正常工作。

Cloudflare Access

• 当上述 Basic 认证不适用，或需要更灵活的访问控制时，可以使用 Cloudflare Access。

可通过图形界面进行以下设置（免费方案下最多支持 50 位用户）。

• 仅允许拥有特定邮箱域名的用户访问，例如 example.com
• 仅允许拥有指定邮箱地址的用户访问
• Google 账户认证（也可与 Google Workspace 集成）
• 基于 IP 地址的访问限制
• 签发临时访问 PIN 码

Vercel 示例

在 Vercel 中当然也可以保护预览环境。

• Vercel Authentication 限制访问，仅团队成员可以访问
• 密码保护（可在 Pro 及以上套餐中设置）
• 也可以为生产环境和预览环境设置不同的访问限制

通过使用 Vercel Authentication 功能，可以实现仅限项目成员访问、创建可共享的链接等操作。

顺便一提，以前 Vercel 的预览环境保护需要通过 Password 认证实现，该功能需另外收费（$150/月），使用起来并不方便。现在 Deploy Protection 已可用于所有套餐！

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

简而言之，就是这样！

“Jamstack 很时髦，但有完善的预览环境吗？”“安全性没问题吗？”如今的预发布环境，是按分支自动生成的“预览环境”。访问限制也可以灵活又简便地设置。

同样的安心感，可以更轻松、更智能地实现。 请务必从下一个项目开始尝试。