首頁>技術>

很多同學可能使用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:讓前端開發人員盡其所能

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-chongchonggit branch -M maingit push -u origin main

使用CloudflarePages部署

可以轉到Pages儀表板並建立一個新站點。選擇上一步新建的新GitHub儲存庫,然後在配置部分中提供以下資訊:

Production branch :mainBuild command npm :run buildBuild directory :build

配置站點後,就可以進行第一次部署。

部署網站後,目前預覽使用的是子域名pages.dev。每次將新程式碼提交到React應用程式時,Cloudflare Pages都會自動重建並部署專案還將獲得在新的請求請求上許可權,預覽更改變化,然後再將其部署到正式環境中。

總結

Cloudflare的免費CDN給廣大中小站長提供了便利,這次推出又推出的Pages將是一個非常好的專案,可以讓很多託管在github的網站遷移,以提供更好的效能和便利。截止本文撰寫時候Cloudflare Pages還是Beta版本,使用需要先申請才可使用,大家可以申請試用。

15
最新評論
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • 我的遠端桌面方案,NoMachine全家桶