很多同學可能使用Github,Gitlab伺服器,並通過其Pages發布個人網站或者博客。但是一個問題是其速度在國內訪問實在不敢恭維,甚至有時候有些資源無法顯示。對這些同學,今天有一個好消息,Cloudflare也提供Pages服務,並且支持流行的JAMstack框架包括Gatsby,Jekyll,Hugo,Vue.js,Next.js等。
概述
網站是我們在網絡上表達自己的方式。無論是擁有博客的業餘愛好者,還是擁有數百萬客戶的大型公司,這都沒有關係。
當前,出現了如此多的前端框架,工具和靜態站點生成器來幫助我們使用靜態方式實現一個動態的網站。
而git,Github和Gitlab的流行,使得基於版本變化來是實現網站內容變化而不是通過CMS後臺管理系統來實現。基於Git、Pages和JAMstack實現的網站可以便捷、高效而安全的呈現我們的內容。
AMstack
很多同學可能對JAMstack不熟悉,其實我也最近才了解到。這一種大規模開發和部署網站的一種流行方法。它使可以充分利用全球邊緣網絡的性能。
JAMstack框架可以使前端與網站後端分離。每次網站進行更改時,整個前端都會預先構建的。頁面將轉換為可以在全球邊緣網絡上託管和緩存的優化靜態頁面。這樣,可以在幾毫秒內在全球範圍內投放頁面。
JAMstack網站不必是100%靜態的。可以使用基於API的服務的API實現動態的邏輯。還可以構建自己的微服務,這些微服務可以按需加載並且可以輕鬆擴展。
Cloudflare Pages相當於一個Pass服務,它將與GitHub存儲庫集成。配置好站點後,就一可以從Cloudflare的界面預覽每個提交,每個提交都有自己的唯一URL,並且有一個預覽環境。
可以通過邀請其他Cloudflare用戶加入個人Pages項目來與其進行協作和預覽。當站點在預覽分支中看起來完全OK時,可以將其推送到生產分支。
Cloudflare Pages:讓前端開發人員盡其所能
Cloudflare Pages,通過將部署與現有的開發工作流程聯繫起來,立足於簡化流程中的每個步驟,Cloudflare Pages提供了以下的特點:
無縫的Git集成,內置版本
使用Cloudflare Pages,要做的就是選擇存儲庫,設置其使用的框架。當有內容提交到倉庫時候,Cloudflare就自動構建和部署到網站。
對於生產中的站點,需要徹底檢查更改。作為審查者,查看代碼並略讀紅色標誌只會使走到目前。要進行徹底檢查,必須提交或進行git stash更改,在本地下拉列表,使其運行以確保它真正起作用。
團隊中的其他開發人員不是唯一的利益相關者,相關的設計師,營銷人員,項目經理都希望在更改發布之前提供反饋。
獨特的預覽網址
Cloudflare Pages中每個提交都有一個唯一URL供對其內容預覽。預覽URL使得很方面了解每次的變化。可以讓PM,設計師和營銷這些並不是懂代碼的人可以很輕鬆地獲得關最新迭代的反饋,從而彌合了模擬和代碼之間的鴻溝。
無限預覽
Cloudflare Pages,每個功能分支將具有自己專用的一致別名,從而使可以為最新更改提供一致的URL。
在"預覽"和"生產"環境中,所有功能分支和預覽連結都將使用預覽變量構建,因此可以進行實驗而不會影響生產數據。
準備部署到生產環境時,將使用更新的生產環境變量為重新部署。
全民協作
協作是構建出色網站和產品的關鍵,Cloudflare Pages無需共享密碼和憑據,可以無限的用戶免費提供多用戶訪問的原因。
最廣泛CDN網絡
藉助Cloudflare Pages,站點可以在全球範圍內直接部署到的Cloudflare CDN邊緣節點,距客戶數毫秒。
Cloudflare Workers
Cloudflare為Pages for JAMstack項目提供免費層和強大的基礎架構,目前pages的免費服務為:
如果你想要的不僅僅是一個靜態網站,Cloudflare還提供了一個無伺服器平臺,稱為Cloudflare Workers。可以支持在Workers上部署一些代碼,並在Pages站點中使用它。使用Workers KV和耐用對象,還可以超越無狀態功能。
Cloudflare Workers,可以使前端開發人員可以使用與前端JavaScript相同的語言輕鬆地將可伸縮後端寫入其應用程式。
Cloudflare表示將致力於將Workers和Pages集成到無縫的體驗中。它的工作方式與Pages完全相同:只需編寫代碼,git push,然後就會自動部署。唯一的區別是,它不僅可以作為前端,還將支持後端服務。需要明確的是:這不僅適用於無狀態功能。通過Workers KV和Durable Objects,可以在該平臺上真正構建任何Web應用程式。
實例流程:部署React應用
最後我們以部署一個React應用為例說明下pages交互部署的流程。
React是一個非常流行的框架,用於構建反應性和強大的前端應用程式,由Facebook的開源團隊構建。該實例中,我們創建一個新的React應用程式並使用Cloudflare Pages進行部署。我們將使用create-react-app包含電池的工具來生成新的React應用程式。
建立一個新項目
使用npx創建一個新項目,並為其命名為hello-chongchong。
npx create-react-app hello-chongchong
創建一個GitHub倉庫
在github創建一個新的GitHub存儲庫。創建新存儲庫後,可以將本地應用程式推送到GitHub:
git remote add origin github.com/User/hello-chongchong
git branch -M main
git push -u origin main
使用CloudflarePages部署
可以轉到Pages儀錶板並創建一個新站點。選擇上一步新建的新GitHub存儲庫,然後在配置部分中提供以下信息:
Production branch main
Build command npm run build
Build directory build
配置站點後,就可以進行第一次部署。
部署網站後,目前預覽使用的是子域名pages.dev。每次將新代碼提交到React應用程式時,Cloudflare Pages都會自動重建並部署項目還將獲得在新的請求請求上權限,預覽更改變化,然後再將其部署到正式環境中。
總結
Cloudflare的免費CDN給廣大中小站長提供了便利,這次推出又推出的Pages將是一個非常好的項目,可以讓很多託管在github的網站遷移,以提供更好的性能和便利。截止本文撰寫時候Cloudflare Pages還是Beta版本,使用需要先申請才可使用,大家可以申請試用。