Subscribe to receive notifications of new posts:

使用 Pages Functions 在 Cloudflare Pages 上為您的網站增姿添彩(正式上市)

11/17/2022

9 min read
Spice up static sites on Cloudflare Pages with Page Functions

早在 2021 年 4 月推出 Pages 之前,我們就知道這會締造一種妙不可言的體驗,讓人感覺「恰到好處」。我們設想了一種如此簡單卻又相當流暢的體驗,任何開發人員都能在幾秒鐘內發布網站,以及使用我們的 Cloudflare 生態系的其餘部分向其新增更多內容。

幾個月後,當我們在 2021 年 11 月宣布推出 Pages 這一完整堆疊平台時,這一願景變成現實。Pages 的精彩並未止步於為靜態網站建立開發平台,隨著 Cloudflare Workers 成為我們生態系的一部分,我們深知還有很大的潛力有待開發。隨著 Pages Functions 的推出,開發人員能夠使用任何靜態網站,並發揮 Cloudflare Workers 的強大力量輕鬆新增動態內容。

去年,自 Functions 投入公測以來,我們深入探究開發人員正為專案尋找哪些種類的完整堆疊功能,並著手細微調整 Functions 的體驗,打造出目前的版本。

我們很高興宣布 Pages Functions 現已正式上市!

Functions 回顧

雖然在 Pages 語境中稱為「Functions」,但在我們的 Cloudflare 網路上執行的這些功能均為「披上偽裝」的 Cloudflare Workers。Pages 發揮 Workers 的強大力量及可擴充性,專門針對我們使用者熟知及喜愛的 Pages 體驗作出調整。

藉由 Functions,您可以設想將動態功能新增至您網站的各種可能性,與儲存解決方案整合、連線至第三方服務、配合使用伺服器端轉譯與您喜愛的完整堆疊框架等等。隨著 Pages Functions 向生產流量敞開大門,我們來探索一下在此版本中改進及新增的一些激動人心的功能。

體驗

使用 Git 執行部署

喜歡編碼?我們會先處理好基礎結構,再把剩下的交給您。

只需編寫一個 JavaScript/Typescript 函數,並將程式碼提交至 Git 提供者,將其放入函數目錄之中。我們的疾速 CI 系統將構建您的程式碼,並將其與您的靜態資產一併部署。

直接上傳您的 Functions

更喜歡自主構建?Pages 上是否尚不支援特殊的 git 提供者?無妨!將 Function 放入函數資料夾後,可使用首選的 CI 工具進行構建,再將專案上傳至待部署的 Pages。

偵錯函數

在測試階段,我們獲悉您和團隊最注重可見性。正如 Cloudflare Workers,我們已經構建一種簡單方法來監視處理請求的函數。您能更快速地了解問題,就能更快速地作出反應。

現在可透過「尾隨」日誌來輕鬆檢視 Functions 的日誌。如欲了解結果及請求 IP 等基本資訊,可導覽至 Pages 儀表板獲取相關日誌。

如需更具體的篩選器,則可使用

wrangler 頁面部署尾端

接收 Function 收到之每個請求的控制台及異常日誌的即時推送。

獲取即時 Functions 指標

在儀表板中,Pages 以請求成功/錯誤指標及叫用狀態的形式彙整 Functions 的資料。您可以參考指標儀表板,不僅能夠深入了解每個專案的使用情況,還可透過掌握成功/錯誤量來檢查 Functions 的健康運行狀況。

與 Cloudflare 生態系快速整合

儲存繫結

想要真正實現完整堆疊?我們知道,找到適合您需求及生態系的儲存解決方案絕非易事,但不是非此不可!

藉由 Functions,您可以充分利用我們廣泛的儲存產品系列,包括 Workers KV、Durable Objects、R2、D1 以及很快就會推出的 QueuesWorkers 分析引擎!只需建立命名空間、貯體或資料庫,並在 Pages 儀表板中新增繫結,點按幾下即可啟動並執行完整堆疊網站。

從造訪快速評論系統到滾動自己的認證,再到建立支援資料庫的電子商務網站,與我們開發人員平台中的現有產品進行整合,為您的網站解鎖指數級的龐大用例。

秘密繫結

除了新增在建置時間及執行階段均可供專案使用的環境變數,現在還可向專案新增「秘密」。這些均為加密的環境變數,無法透過任何儀表板介面進行查看,並且是 API 權杖或密碼等敏感性資料的理想之所。

整合第三方服務

Pages 的目標始終是讓您在一處集中體驗喜歡使用的各種工具。在此測試版期間,我們還注意到您使用 Functions 來整合常見第三方服務的一些一致模式。Pages 外掛程式 -  我們的現成程式碼片段 - 為您提供隨插即用的體驗,可圍繞您的應用程式構建您所選擇的生態系。

實際上,Pages 外掛程式是一個可重複使用且可自訂的執行階段程式碼區塊,可合併至 Pages 應用程式中的任意位置。它是一個「可組合的」的 Pages Function,賦予外掛程式 Functions 的全部功能(即 Workers),包括設定中介軟體、參數化路由及靜態資產的功能。

藉由 Pages 外掛程式,您可以與眾多第三方應用程式相整合,包括官方支援的 SentryHoneycombStytchMailChannels 等。

使用您最喜歡的完整堆疊框架

為了迎合開發人員的需求,我們亦推出 Javascript 框架形式的版本。我們不單大力支援廣泛採用的框架,還積極支援各種新興框架,我們的團隊與眾多框架創建者攜手合作,為您創造靈活運用他們的新技術以及在開箱即用的 Pages 上開展部署的機會。

現與 Next.js 13 及更多版本相容!

最近,我們宣布支援選擇加入 Edge Runtime 的 Next.js 應用程式。今天,我們很高興宣布,我們現可與 Next.js 13 相容。Next.js 13 為 Next.js 框架帶來了一些最需要的現代典範,包括巢狀路由、React 18 的伺服器元件及串流。

有不同的框架喜好?無妨。

在 Pages 上造訪完整堆疊,充分利用伺服器端轉譯 (SSR) 以及其他諸多官方支援的框架之一,如 RemixSvelteKitQwikCitySolidStartAstroNuxt。您可以瀏覽 Pages 上關於 SSR 支援的部落格文章,以及其中一些框架的入門指引。

在進階模式下加速運行

雖然 Pages Functions 由 Workers 提供技術支援,但我們知道,從表面上看,它們並非完全一樣。儘管如此,對於可能正在使用 Workers 並熱衷於嘗試 Cloudflare Pages 的現有使用者,我們設立了一個直接路徑,可幫助您快速上手使用。

如果您已經有一個 Worker,想要能在 Pages 上造訪完整堆疊的簡單方法,則可使用 Pages Function 的「進階模式」。在專案的輸出目錄中生成一個名為 _worker.js 的 ES 模組 Worker 並執行部署!

如果您是框架創建者,或是可能有一個更複雜的用例不適合我們基於檔案的路由器,這可能大有用處。

無限制的擴展

因此,我們今天宣布正式推出 Functions,很高興能夠擴展您的流量。在公測版期間,我們設立了每日 100,000 個免費請求的限制,以便您試用此功能。雖然我們今天仍有每日 100,000 個免費請求的限制,但您現在可以付費使用,享受無拘無束的服務。

由於 Functions 只是「特別版」Workers,因此,自此公告發布後,您的 Functions 使用情況會在 Workers Paid 訂閱下的帳單或透過您的 Workers Enterprise 合約體現。與 Worker 類似,使用付費計畫時,您可以選擇我們的兩種使用模式(搭售及未繫結),並將計入相應的帳單。

將 Pages 作為絕佳的 Cloudflare「網際網路餽贈」,您將享有無限制的免費靜態資產請求次數,並以動態請求作為主要計費方式。您可以在我們的文件中詳細閱讀有關 Functions 使用計費方式的更多資訊。

立即開始使用

要開始探索,請轉至 Pages Functions 文件瀏覽我們的部落格,了解可用來部署第一個完全堆疊應用程式的一些最佳框架。開始構建專案時,務必在我們的 Cloudflare Developers Discord 中 Pages 下的 #functions 管道中告知我們。享受構建的愉悅吧!

We protect entire corporate networks, help customers build Internet-scale applications efficiently, accelerate any website or Internet application, ward off DDoS attacks, keep hackers at bay, and can help you on your journey to Zero Trust.

Visit 1.1.1.1 from any device to get started with our free app that makes your Internet faster and safer.

To learn more about our mission to help build a better Internet, start here. If you're looking for a new career direction, check out our open positions.
Developer Week (TW)Cloudflare Pages (TW)Cloudflare Workers (TW)Serverless (TW)Full Stack (TW)JAMstack (TW)繁體中文

Follow on X

Nevi Shah|@nevikashah
Cloudflare|@cloudflare

Related posts

April 05, 2024 1:01 PM

Browser Rendering API 正式上市,推出 Cloudflare Snippets、SWR,並向所有使用者提供 Workers for Platforms

Browser Rendering API 現已向所有付費 Workers 客戶提供,並改進了工作階段管理...

April 04, 2024 1:05 PM

用於實現生產安全的新工具:Gradual Deployments、來源對應、限速和新 SDK

今天,我們將推出以下五項更新,從而為您提供更強功能:逐步部署、Tail Workers 中的來源對應堆疊追蹤、全新的 Rate Limiting API、全新的 API SDK 以及 Durable Objects 更新,每一項更新的構建都將任務關鍵型生產服務納入了考量...