使用CloudFlare工人建立全棧無服務器應用程序

無服務器計算徹底改變了軟件開發，簡化了部署和DEVOPS。該教程演示了使用CloudFlare Worker構建全棧無服務器應用程序，該平台可以抽象擴展和基礎架構。該項目“ Repo Hunt”是受產品Hunt和Reddit的啟發的開源項目的日常排行榜。完成的網站可在此處提供。

CloudFlare工人，利用CloudFlare的全球網絡，無論用戶位置如何，都提供極低的延遲性能。 Wrangler CLI工具簡化了建築，上傳和發布。本教程使用“路由器”模板，啟用基於URL的路由。源代碼可在github [link to-github-repo]上找到。

設置您的環境

安裝牧馬人：

 NPM install -G @Cloudflare/Wrangler

使用路由器模板創建一個新項目：

 Wrangler生成repo-hunt https://github.com/cloudflare/worker-template-router
CD回購

路由器模板利用WebPack，允許包含NPM模塊。 Router類處理URL路由。一個基本示例：

 // index.js
const Router = require（'./ Router'）;

AddEventListener（'fetch'，event => {
  event.respondwith（handleRequest（event.request））;
}）;

異步函數handlequest（請求）{
  嘗試 {
    const r = new Router（）;
    R.Get（'/'，（）=>新響應（“ Hello，World！”））;
    const resp =等待R.Route（請求）;
    返回resp;
  } catch（err）{
    返回新響應（err）;
  }
}

工人響應fetch事件，返回Response 。本教程使用主頁（ / ），提交表格（ /post ）和提交處理（ /repo ）的路線。

路由和模板

主頁（ / ）路由呈現提交的存儲庫列表。我們將從簡單的HTML響應開始：

 // index.js
const Router = require（'./ Router'）;
const index = require（'./ handlers/index'）;

// ...（其餘index.js）

//處理程序/index.js
const頭= {'content-type'：'text/html'};
const handler =（）=> {
  返回新響應（“你好，世界！”，{headers}）;
};
模塊。 Exports=處理程序;

使用wrangler preview進行測試。接下來，我們將創建一個更複雜的模板：

 //處理程序/index.js
const頭= {'content-type'：'text/html'};
const模板= require（'../ templates/index'）;

// ...（其餘的處理程序/index.js）

//模板/index.js
const佈局= require（'./佈局'）;
const template =（）=>佈局（`<h1 id="你好世界">你好世界！</h1> `）;
Module.exports =模板;

//模板/layout.js
const佈局= body =>` $ {body} `;
Module.exports =佈局;

這使用一個佈局模板來進行一致的樣式（包括Bulma CSS）。

與工人KV的數據持久性

Workers KV提供了一個用於數據持久性的鑰匙值商店。我們將存儲存儲庫（鍵： repos:${id} ）和每日列表（鍵： $date ）。注意：工人KV需要付費計劃。

基本KV操作：

 repo_hunt.put（“ mystring”，“你好，世界！”）; //設置一個值
const string =等待repo_hunt.get（“ mystring”）; //檢索價值

我們將創建用於管理回購和日期數據的類：

 //商店/repo.js
const uuid = require（'uuid/v4'）;

class reto {
  // ...（repo類實施）
}
模塊。 Exports= repo;

//商店/day.js
const today =（）=> new Date（）。 tolocaledateString（）;

Module.exports = {
  add：async函數（id）{// ...}，
  getRepos：async function（）{// ...}
};

Repo類處理驗證和持久性。 Day管理每日存儲庫列表。

處理用戶提交

表格（GET /post ）允許用戶提交存儲庫。帖子/repo處理程序程序提交：

 //處理程序/create.js
const qs = require（'qs'）;
const repo = require（'../ store/repo'）;
const Day = require（'../ store/day'）;

// ...（創建處理程序實現）

這使用qs庫來解析數據，創建Repo對象，將其保存到KV，並將其ID添加到每日列表中。

渲染主頁上的數據

現在，主頁檢索並渲染存儲庫數據：

 //處理程序/index.js
// ...（更新的索引處理程序）

//模板/index.js
// ...（更新的模板功能渲染存儲庫）

Day模塊的getRepos函數獲取並實例化Repo對象。模板渲染每個存儲庫。

部署

要求工人。 dev子域：

 Wrangler子域My-Subdomain

部署應用程序：

牧馬人出版

在Cloudflare儀表板上創建一個KV名稱空間，然後使用名稱空間ID更新wrangler.toml ：

 [[KV-Namespaces]]
綁定=“ repo_hunt”
id =“ $ yournamespaceid”

將KV名稱空間添加到wrangler.toml後重新發布。該應用程序現已直播！

進一步發展

本教程為無服務器應用程序提供了基礎。未來的增強功能可能包括投票，評論和更複雜的功能。探索工人文檔和模板畫廊以獲取進一步的發展思想。

以上是使用CloudFlare工人建立全棧無服務器應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！