今年 4 月，我們宣佈 Cloudflare Pages 全面開放時，我們承諾這只是開始。我們的平臺最初支援靜態網站，僅有少量動態功能，如設定重定向和自定義標頭。但我們希望向您和您的團隊賦予更多能力，以便構建難以置信的應用。我們對未來的設想是，您的整個應用程式——前端、API、儲存、資料——都可以透過一次提交部署，準生產環境中更易測試，一次合併即可部署到生產環境。因此，本著 Full Stack Week 的精神，我們為您帶來實現以上這一切的工具。

歡迎大家——來到未來。我們要宣佈一個激動人心的訊息：在幫助下，Pages 現已成為一個全棧平臺！

但如何操作呢？

其工作方式與 Pages 向來的工作方式完全一樣：編寫程式碼， git push 到您的 git 提供商（現已支援 GitLab ！），我們就會為您部署整個站點。唯一的區別是，無論是在您的前端，還是後端，都將使用 Cloudflare Workers 來幫助部署無伺服器函式。

您期待已久的整合

Cloudflare Workers 提供一個無伺服器執行環境，允許您建立全新的應用程式或增強現有的應用程式，而無需配置或維護基礎設施。在今天以前，有可能將 Workers 連線到 Pages 專案，做法是安裝 Wrangler，並同時在 Pages 和 Workers 中編寫程式碼來手動部署一個 Worker。但我們所要的並不是“可能”，而是某種猶如第二天性的東西，讓您在為站點新增動態內容前無需再三考慮。

瞭解詳情

透過使用程式碼庫的檔案系統約定並匯出一個或多個函式處理器，Pages 可以利用 Workers 來代表您部署無伺服器函式。要開始，只需在專案的根目錄新增一個 ./functions 目錄，並在一個 JavaScript 或 TypeScript 檔案中，匯出一個函式處理器。例如，假設您的 ./functions 下有一個檔案 hello.js ，其中包含：其中包含：

// GET requests to /filename would return "Hello, world!" export const onRequestGet = () => {

return new Response ( "Hello, world!" )}

// POST requests to /filename with a JSON-encoded body would return "Hello, <name>!" export const onRequestPost = async ({ request }) => {

const { name } = await request . json ()

return new Response ( `Hello, ${ name } !` )}

執行 git commit ，就會觸發一次新的 Pages 構建來部署您的動態站點！在構建管道期間，Pages 會遍歷目錄，將檔名對映到相對程式碼庫結構的 URL。

Pages 會自動生成 Workers，其中包含來自原始碼的所有路由和功能。函式支援深度巢狀路由、萬用字元匹配、用於身份驗證和錯誤處理等的中介軟體，等等。為了展示其所有功能，我們撰寫了一篇部落格文章來展示一個示例全棧應用。

讓您做自己最擅長的工作

藉助 Pages 的新全棧功能，即使您的站點越來越複雜，您的開發體驗無需同時複雜化。在為站點解鎖更強大功能的同時，您可以繼續享受熟悉並喜愛的工作流程。

無縫構建

我們自動部署函式的方式與處理靜態站點的構建和部署一模一樣，都是使用 git commit 和 git push 。只要您的目錄遵循正確的結構，Pages 就會識別您的函式並將其部署您的站點。

定義您的繫結

在將 Workers 連線到 Pages 的同時，繫結是使您的應用成為全棧應用的重要部分。我們很高興能將此前與常規 Workers 一起使用的繫結全部帶到 Pages 。

· KV 名稱空間： 我們的無伺服器和全球分散式鍵值儲存解決方案。在 Pages 內，您可以整合在 Workers 儀表板中為 Pages 專案設定的任意 KV 名稱空間。

· Durable Object 名稱空間 ：我們的強一致性邊緣資料庫基元，使處理狀態和構建完整應用變得輕而易舉。與 KV 一樣，您可以在 Workers 儀表板內設定您的名稱空間，並在 Pages 介面內從該列表中選擇。

· R2 （即將推出！）： 我們的 S3 相容物件儲存解決方案，出口費用全免。

· 環境變數：一個注入值，可以被函式訪問，並以明文形式儲存。您可以在 Pages 介面中直接為生產環境和預覽環境設定環境變數。

· 金鑰（secret）：一個加密的環境變數，不能被 Wrangler 或任何儀表板介面檢視。金鑰非常適用於存放敏感資料，包括密碼和 API 令牌。

預覽部署 —— 現在也可用於後端

在部署無伺服器函式後，您仍然可以像以前一樣享受輕鬆的協作和測試。在部署到生產環境之前，您可以輕鬆地將專案部署到預覽環境，以測試更改。即使部署了函式，Pages 仍允許您儲存每次提交的版本歷史，各有一個獨特的 URL，以便輕鬆從其他開發人員、專案經理、設計師或營銷人員收集反饋。您也可以享受與靜態站點相同的無限準生產部署特權，最新更改均擁有一致的 URL。

同時支援本地開發和預覽

但我們意識到，在快速迭代的情況下，僅僅為了測試而構建和部署每一個細小更改可能頗為麻煩。現在，您可以使用最新版本的 Wrangler CLI 開發全棧 Pages 應用程式。在 Miniflare 的支援下，您可以在本地執行整個應用程式，並支援模擬金鑰、環境變數、KV（ Durable Objects 支援即將推出！）。將 wrangler 指向一個靜態資源目錄，或無縫連線到您的現有工具：

# Install wrangler v2 beta

npm install wrangler@beta

# Serve a folder of static assets

npx wrangler pages dev ./dist

# Or automatically proxy your existing tools

npx wrangler pages dev -- npx react-scripts start

這只是 Pages 與 Wrangler 整合的開端。我們將繼續增強您的開發體驗，敬請關注。

您還能做什麼？

今天可以透過 HTTP Workers 做的一切事情！

在部署帶函式的 Pages 應用程式時，Pages 將代表您編譯和部署第一類Workers。這意味著在您的 Pages 應用程式中部署 Worker 時不會有任何功能損失——相反，只會獲得新的好處！

整合 SvelteKit —— 開箱即用！

是一個用於構建 Svelte 應用的 web 框架。它是由Svelte 團隊構建和維護的，併成為 Svelte 使用者所有應用程式需求的首選解決方案。SvelteKit 允許使用者使用複雜的 API 後端構建專案，開箱即用。

從今天起，SvelteKit 專案可以附加和配置包。之後，專案就可以新增到 Pages 中，並準備好進行第一次部署。透過 Pages，您的 SvelteKit 專案可以使用 API 端點和完整的伺服器端渲染支援進行部署。更好的是，整個專案——包括 API 端點——也可以享受到預覽部署的好處！對於以前在 Workers 介面卡上的開發後期專案來說，即使是這個功能本身就已經是一個巨大的勝利。這個實際使用。

使用伺服器端渲染

現在，您能夠攔截任何進入 Pages 專案的請求。也就是說，您能定義接收傳入 URL 的 Workers 邏輯，您的 Worker 可以使用動態資料來渲染新的 HTML 響應，而非提供靜態 HTML。

例如，一個帶有產品頁面的應用程式可以定義一個`product/[id].js`檔案，該檔案將接收' id '引數，從一個 Workers KV 繫結中檢索產品資訊，然後生成該頁面的 HTML 響應。與使用靜態站點生成器的方法相比，隨著時間的推移，這種做法更簡潔，更容易維護，因為您不需要在構建時為每個產品構建一個靜態 HTML 頁面……而這種頁面數量有可能達到成千上萬個！

已經有一個 Worker 專案了？我們已經考慮到這一點了。

如果您已經有一個 Worker 專案並希望將其帶到 Pages 中，以便利用我們平臺的開發體驗好處，我們今天做出的宣佈就能幫您做到。您可以在專案的根目錄下放置一個名為 ' _worker.js ' 的 ES 模組Worker，執行 git 命令進行部署，剩下的就交給我們吧！如果您是一個框架作者，或者有一個更加複雜的用例，其並不遵循我們所提供的檔案結構，那麼這會特別有利。

歡迎免費試用限時測試

我們很高興今天能釋出公測，供所有人試用，而且不會給您的 Cloudflare 計劃增加任何費用。雖然仍有一些，但我們希望透過公測進一步瞭解您和您的團隊如何在 Pages 專案中部署函式。目前而言，我們鼓勵您發揮創造力，建立一個考慮已久的網站，而且無需擔心收到賬單。

在幾個月後宣佈全面開放時，我們的賬單將會顯示為 Workers Bundled 計劃的費用——畢竟，完成這些工作的就是 Workers。

後續預告：

我們目前宣佈的只是一個公測版，而在未來幾周和幾個月內，我們計劃進行一些非常令人興奮的事情。我們將新增整合日誌和對部署函式的更多分析，從而使您已經熟悉的 Pages 開發體驗變得甚至更快、更容易。

除此之外，我們還將擴充套件對下一代前端框架的一流支援。正如我們透過SvelteKit 所展示的那樣，Pages 能夠無縫地同時部署靜態和動態程式碼，實現無與倫比的終端使用者效能和開發便利性，我們很高興能夠為更多人解鎖這一功能。類似框架和技術的愛好者，如 NextJS、NuxtJS、React Server Components、Remix 和 Hydrogen 等，請繼續關注這個部落格的後續釋出。更好地是，歡迎並幫助實現它！

此外，正如我們對 SvelteKit 所做的那樣，我們希望包括更多與現有框架的一流整合，以便 Pages 可以成為您首選框架的主要部署目的地。我們正在努力進行有關工作，以便使 NextJS、NuxtJS、React Server Components、Shopify Hydrogen 等框架無縫整合，以更好地幫助您開發全棧應用。

最後，我們正在加速構建時間，以便您能專注於推送更改和快速迭代——無需等待！

立即開始

歡迎瀏覽我們的 Pages 文件和演示部落格，瞭解如何使用 Cloudflare Workers 將無伺服器函式部署到 Pages。

當然，我們最喜歡看到的是您構建的應用！歡迎登陸我們的 Discord ，並向我們展示您如何使用 Pages 來構建您的全棧應用。

Cloudflare Pages 全棧化