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。

如果您有任何與網路相關的問題,請與我們聯絡。

案例研究