Topics

您是否曾经想过,“Jamstack 没有预览环境吗?”

  • column

在传统的 LAMP 配置中,/prev/或者test.example.com/一般的做法是使用基本身份验证来准备预览环境。

然而,在使用 Vercel 或 Cloudflare Pages 的最新Headless CMS 配置时,许多人似乎感到困惑,并提出诸如“构建时会创建一个预览 URL,但这是否有效?”以及“我甚至可以设置密码验证(基本验证)吗?”之类的问题。

结论:预览环境很棒!而且保护得很好!

例如,Vercel 和 Cloudflare Pages 都有一个 Git 分支。preview URL它具有自动签发的功能。换句话说,每次自动创建最新暂存环境的系统如果您使用 Git 管理源代码,您可以创建一个新分支并推送,系统会立即发出确认 URL。无需手动将文件上传到暂存环境。

“但是那个预览网址会公开吗?”

别担心,我们有以下这些可以轻松设置访问限制就这样。

Cloudflare 页面示例

Cloudflare Pages 允许您限制对预览环境的访问。

基本身份验证

  • 您可以像传统预览环境一样,使用用户名和密码设置身份验证。除非有特殊配置,否则这可能是首选方法。
  • 然而,结合 SSG(静态站点生成)和 SSR(服务器端渲染)的混合配置在某些情况下,基本身份验证无法正常工作,例如:

Cloudflare Access

  • 如果上述基本身份验证不合适,或者您想要更灵活的访问控制,请使用 Cloudflare Access。
Cloudflare Access 登录屏幕截图

以下设置可通过图形用户界面进行(免费计划限制为 50 个用户)。

  • example.com仅允许具有特定电子邮件域的用户,例如
  • 仅允许具有指定电子邮件地址的用户
  • Google 帐户身份验证(也可以与 Google Workspace 集成)
  • IP地址限制
  • 发放临时访问 PIN
Cloudflare 设置屏幕截图
Cloudflare 设置屏幕截图

Vercel 示例

当然,Vercel 还允许您保护预览环境。

  • Vercel Authentication仅限团队成员访问
  • 密码保护(适用于专业版及以上计划)
  • 可以为生产环境和预览环境设置不同的限制。

通过使用 Vercel 身份验证功能,您可以限制仅限项目成员访问、创建可共享链接等。

顺便说一句,Vercel 的预览环境保护很难使用,因为密码验证需要额外收费(150 美元/月)。部署保护现已适用于所有计划!

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

Vercel 设置屏幕截图
您可以在项目设置的部署保护部分中选择保护方法。
Vercel 共享链接创建屏幕截图
点击部署详情右上角的“分享”即可创建可分享的链接。

所以,这就是它的意思!

传统方法

Jamstack/Vercel/Cloudflare Pages 的世界

stg.example.com+ 基本身份验证

每个分支的预览 URL + 密码/电子邮件认证/IP限制等。

手动上传

Git 推送自动部署

设置和管理访问限制有些复杂

访问限制是 使用 GUI 等进行设置相对容易。

“Jamstack 很酷,但它有合适的预览环境吗?”“它安全吗?”现代暂存是一种自动为每个分支发布的“预览环境”,并且可以灵活轻松地配置访问限制。

您可以获得与传统方法相同的安心,但更轻松、更智能。不妨在您的下一个项目中尝试一下。

撰稿人

他从桌面排版领域转战网页设计,迅速成为一位技艺精湛的“大师”,精通标记语言、前端设计、方向指导和无障碍设计。自 Liberlogic 创立以来,他一直活跃于各个领域,如今已成为公司内部的活字典。最近,他痴迷于探索如何利用提示来提高效率,并思考着“我们能否更多地依赖人工智能来实现无障碍设计?”他的技术和思维仍在不断发展。

Futa

IAAP认证的Web无障碍专家(WAS)/标记工程师/前端工程师/网站总监

查看这位员工的文章

我们以可靠的团队结构和快速的响应能力而自豪。

在 Liberogic,我们经验丰富的员工积极推动项目进展,这也是我们受到客户高度评价的原因。
我们确保项目经理和主管得到合理分配,以确保整个项目的顺利进行。 我们避免因全额承诺而导致不必要的成本增加,并将资源分配给合适的人员和合适的岗位,并以快速掌握工作内容、创建和提交预算而闻名。

请注意,我们不积极参与SES式的现场工作。

我们支持几乎所有主流的项目管理和聊天工具,包括 Slack、Teams、Redmine、Backlog、Asana、Jira、Notion、Google Workspace、Zoom 和 Webex。

如果您有任何与网络相关的问题,请联系我们。

案例研究