Cloudflare發布Pages,用JAMstack構建WEB網站

2020-12-21 蟲蟲搜奇

很多同學可能使用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版本,使用需要先申請才可使用,大家可以申請試用。

相關焦點

  • cloudflare最新使用教程,防止網站被攻擊
    cloudflare是國外最好的免費CDN,可以給網站使用dns,https和防火牆,可以有效的給網站做防護,防止網站被攻擊。今天,我就給大家說下cloudflare最新的使用教程。今天,邵連虎就給大家做一個cloudflare最新的使用教程,把我在使用cloudflare的過程中,遇到的問題,以及怎麼解決的都給大家說下:一,DNS設置1,大家在cloudflare網站使用郵箱註冊一個帳號,然後輸入你的不帶WWW的域名接入,如下圖:
  • 新版Siteground虛擬主機如何一鍵開通 Cloudflare CDN 獲得全球加速
    Siteground介紹 一家美國主機商,提供了虛擬主機以易用、快捷、方便、高速而出名。在國內外貿界很多人都在用,包括外貿工廠、貿易公司等。一鍵部署 SSL證書、一鍵緩存加速,一鍵cdn加速、一鍵搬家等等功能應有盡有。面向新手用起來很方便,而且無論國內管理網站還是國外客戶訪問網站速度都不錯。
  • Cloudflare宕機導致大量網站和服務無法訪問
    Cloudflare宕機導致大量網站和服務無法訪問 在Cloudflare的部分網絡服務出現故障後,官方發布事故報告,稱骨幹網絡的配置錯誤導致了持續 27 分鐘的宕機。
  • Cloudflare與網際網路檔案館合作 提供更可靠的Always Online服務
    現在Cloudflare宣布與非營利組織網際網路檔案(Internet Archive)館合作,通過後者的Wayback Machine,帶來更可靠的服務。Wayback Machine至今已存檔大部分web網頁,緩存頁面數達到4680億,每日新增超過10億URL 。
  • Cloudflare發布OdoH,改善DNS安全和隱私
    日前,Cloudflare發布了一項用於改善DNS安全和隱私的新的DNS標準ODoH。標準由Cloudflare,Apple和Fastly的工程師共同撰寫,標準通過將IP位址與查詢分隔開,防止相關信息的洩露。Cloudflare也在Github開源了協議實現和客戶端的原始碼,可以讓大家自己試運行和驗證OdoH服務。
  • 使用CF-Worker-Dir 在 Cloudflare Worker 上免費搭建導航網站
    worker使用 CF-Worker-Dir 在 Cloudflare Worker 上免費搭建導航網站,可以用這個替換掉瀏覽器自帶的主頁,自用還是比較香的!可是 CloudFlare Worker 提供的域名好像有點長,那麼我們怎麼綁定自己的域名呢回到 Cloudflare 的域名管理面板選擇你想要綁定的域名,然後進入域名管理頁面點擊 Workers 進入域名中的 Workers 管理頁面
  • Cloudflare 放棄谷歌 reCAPTCHA,遷移到 hCaptcha
    Cloudflare 客戶 。Cloudflare 為網站管理員和網站所有者提供了許多功能。其中一項功能就像防火牆一樣,它會自動阻止已知的惡意流量,允許人為流量,並在遇到可能是惡意或非法的流量時顯示驗證碼。
  • [圖]Cloudflare Image Resizing新增對AVIF圖像格式的支持
    Cloudflare 旗下的 Image Resizing 服務宣布提供對 AVIF 圖像格式的支持。
  • Cloudflare 宣布支持 gRPC
    於是 Cloudflare 決定著手解決此問題,引入對 gRPC 的支持,以保護和改善在網絡上運行 gRPC API 的體驗。,讓 Cloudflare 在它們之間分配負載;還有一些其他措施。Cloudflare 為添加 gRPC 支持所做的工作主要包括: 對請求處理管道進行更改,以識別來自網絡的 gRPC 通信。 WAF 中的功能可識別 gRPC 流量,確保在 WAF 中正確處理 gRPC 連接,包括檢查初始 gRPC 連接請求的所有組件。
  • 怎樣通過wp_list_pages函數,給WP網站頁面添加導航菜單?
    每一個網站都有自己的導航菜單,如:頭部導航菜單,底部導航菜單,側邊欄導航菜單,wordpress網站也不例外。那麼,在wordpress網站主題模板開發中,我們怎樣給wordpress網站添加前臺的導航菜單呢?嗯,據我多年的開發經驗發現,wordpress為wordpress主題開發,主要提供了三種導航菜單的創建方式,這三種方式會創建不一樣的導航功能。
  • Cloudflare 發布工具測試 ISP 是否部署 BGP 安全系統
    雲服務商 Cloudflare 發布了名叫「Is BGP safe yet?」 的在線工具測試 ISP 是否部署 RPKI。作者:安華金和邊界網關協議 BGP 是網際網路核心基礎設施的組成部分,但過去幾年 BGP 發生過許多次嚴重的路由洩漏,導致一個網絡的流量被重定向路由經過其它網絡。
  • 蘋果攜手Cloudflare重新制定DNS 以增強隱私保護
    網路服務商Cloudflare與蘋果聯合表示,他們開發了一個新的DNS標準,稱為Oblivious DNS over HTTPS (ODoH),這個新標準的目的,是為改進目前的DoH的缺點,提供使用者更好的隱私保護,避免ISP或DNS解析業者窺探使用者隱私。
  • 蘋果和 Cloudflare 合作開發全新網際網路協議,主打隱私
    IT之家 12 月 8 日消息 Cloudflare 今天宣布與蘋果和 Fastly 的工程師合作開發了一個新的網際網路協議,專注於隱私。 當訪問一個網站時,瀏覽器使用 DNS 解析器將網頁地址轉換為機器可讀的 IP 地址,以定位網頁的位置。然而,這是一個未加密的過程,網際網路服務提供商可以看到 DNS 查詢,並了解用戶訪問過哪些網站。網際網路服務提供商也能夠將這些信息出售給廣告商。
  • Cloudflare推出數據本地化套件:能讓你控制數據存儲和訪問權限
    Cloudflare 近日推出了 Data Localization Suite 功能。已經參與企業計劃的公司可以通過擴展的方式啟用這一系列功能。通過 Data Localization Suite,Cloudflare 能夠讓你可以更輕鬆地控制數據的存儲位置以及數據的訪問權限(取決於您訪問數據的位置)。這項功能可讓你在利用 Cloudflare 的產品(例如無伺服器基礎架構)同時,遵守本地和特定行業的法規。
  • 創始人親述:衰退中誕生的Cloudflare如何從0到IPO
    阿爾法公社說:2009年在經濟衰退中誕生,2019年在紐交所上市,Cloudflare是一個在困難環境中崛起的絕佳樣本。Cloudflare的聯合創始人、CEO Matthew Prince,近日在訪談中親述了Cloudflare的創業歷史和崛起的關鍵因素,值得現在面臨同樣環境的創始人們學習參考。
  • Cloudflare放棄Intel至強處理器 全面轉向AMD EPYC
    今天Cloudflare宣布他們的第十代刀片伺服器全面轉向AMD的EPYC處理器。  Cloudflare是一家網絡服務供應商,成立於2009年,主要提供CDN、DNS服務,截至2020年2月份在全球90多個國家200多個城市建有數據中心,每天有10億個IP位址流經他們的網絡,每秒鐘處理1100個HTTP請求,95%的全球連接都可以在100毫秒內完成。
  • Cloudflare 推家庭 1.1.1.1 公共 DNS,阻止惡意軟體和成人內容
    2018 年的 4 月 1 日愚人節,Cloudflare 宣布推出 1.1.1.1 公共 DNS 服務。
  • Cloudflare提供「遠程」雲端瀏覽器,並提供社區即服務解決方案
    這意味著來自瀏覽器的任何威脅都將保留在數字機器中,不會感染公司的筆記本電腦,也不會在公司的社區中橫向傳播…另外,Cloudflare瀏覽器的隔離性也會因為發送瀏覽器的網際網路網頁呈現的最終輸出而受到影響。因此,每個發送到個人瀏覽器的小工具都是一堆繪製指令以呈現網頁,這另外表明該公司的新服務很可能適用於任何兼容HTML5的瀏覽器如Chrome、Safari、Edge和Firefox等。
  • Jenkins+Docker+SpringCloud+K8s構建持續集成平臺
    Jenkins是什麼Jenkins是一個開源軟體項目,是基於Java開發的一種持續集成工具,用於監控持續重複的工作,旨在提供一個開放易用的軟體平臺,使軟體的持續集成變成可能。Jenkins的6大特徵:開源的ava語言開發持續集成工具,支持持續集成,持續部署易於安裝部署配置可通過yum安裝,或下載war包以及通過docker容器等快速實現安裝部署可方便web界面配置管理。
  • 以太坊網站部署在IPFS上,web3時代面世
    IPFS上,可以通過ENS瀏覽轉移的etheretherum.eth的網站。以太坊建立在IPFS上的網站可以實現的是,數據永存不會像一般網站經常出現404頁面、瀏覽體驗更佳。但是,如果僅僅是區塊鏈項目建立去中心化網站使用IPFS系統實在沒有什麼值得吹捧的,關鍵是背後的隱藏的趨勢是我們需要深挖的。