Topics

「Jamstack没有预览环境吗?」您是否这样想过?

  • column

传统的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 中,可以设置对预览环境的访问限制。

Basic 身份验证

  • 可以通过用户名和密码进行身份验证,形式接近传统预览环境。除了某些特定配置外,这种方式在许多情况下都是常用的。
  • 但是,在SSG(Static Site Generation)和 SSR(Server-Side Rendering)相结合的混合配置等情况下,Basic 身份验证可能无法正常工作。

Cloudflare Access

  • 当上述 Basic 身份验证不适用,或者需要更灵活的访问控制时,使用 Cloudflare Access。
Cloudflare Access 登录界面截图

可以在 GUI 上进行以下设置(免费计划限制为 50 个用户)。

  • 仅允许具有特定邮箱域名(如 example.com)的用户
  • 仅允许具有指定邮箱地址的用户
  • Google 账户认证(也可与 Google Workspace 关联)
  • 按 IP 地址进行限制
  • 临时访问 PIN 的发行
Cloudflare 设置界面屏幕截图
Cloudflare 设置界面屏幕截图

Vercel 的示例

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

  • Vercel Authentication 团队成员专享访问限制
  • 密码保护(Pro 及更高版本计划可配置)
  • 在生产环境和预览环境中应用不同的限制也是可行的

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

顺便提一下,Vercel 的预览环境保护之前需要单独付费的 Password 认证($150/mo),使用起来不太方便,但现在 Deploy Protection 已在所有计划中提供了!

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

Vercel 设置屏幕截图
可以在项目设置的 Deployment Protection 中选择保护方法。
Vercel 共享链接创建屏幕截图
可共享的链接可以在 Deployment Details 右上角的"Share"中创建。

也就是说,是这样的!

传统方法

Jamstack/Vercel/Cloudflare Pages 的世界

stg.example.com + Basic 认证

按分支预览 URL + 密码/邮箱认证/IP 限制等

手动上传

Git push 时自动部署

访问限制的设置/管理略显复杂

访问限制可通过 GUI 等方式相对容易地配置

「Jamstack 很时尚,但真的有预览环境吗?」「安全性没问题吗?」如今的演示环境是按分支自动生成的「预览环境」。而且访问限制也可以灵活且简便地配置。

用一如既往的可靠方式,但现在更轻松、更智能地实现。欢迎从下一个项目开始尝试。

本文作者

从DTP跨越到Web世界,不知不觉中已掌握标签、前端开发、创意指导、无障碍设计等各项技能的"技术高手"。从Liberogic创业初期就活跃至今,如今是公司内部的"活百科"。最近沉迷于"能否在无障碍适配上更多依赖AI?"这样的思考,正在探索借助AI提示词提高效率的方法。技术实力和思维方式都还在不断进化中

Futa

IAAP 认证网络无障碍专家 (WAS) / 标记语言工程师 / 前端工程师 / 网络总监

查看本员工的文章

安心的团队体制和迅速的反应能力是我们的优势

Liberogic 拥有经验丰富的员工团队,积极推进项目,因此获得了客户的高度评价。
我们会妥善分配项目经理和总监,确保整个项目顺利进行。 通过避免不必要的全职投入导致的成本增加,并采用适当配置人力资源的方式,从把握业务内容到估价的制作和提交速度都赢得了良好的口碑。

* 本公司不积极开展SES驻场工作等业务,敬请谅解。

Slack、Teams、Redmine、Backlog、Asana、Jira、Notion、Google Workspace、Zoom、Webex 等,您可以使用几乎所有主要的项目管理工具和沟通协作工具。

请咨询我们的网站相关问题。

案例分析