無服務(wù)器計(jì)算徹底改變了軟件開發(fā)，簡化了部署和DEVOPS。該教程演示了使用CloudFlare Worker構(gòu)建全棧無服務(wù)器應(yīng)用程序，該平臺(tái)可以抽象擴(kuò)展和基礎(chǔ)架構(gòu)。該項(xiàng)目“ Repo Hunt”是受產(chǎn)品Hunt和Reddit的啟發(fā)的開源項(xiàng)目的日常排行榜。完成的網(wǎng)站可在此處提供。

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

設(shè)置您的環(huán)境

安裝牧馬人：

 NPM install -G @Cloudflare/Wrangler

使用路由器模板創(chuàng)建一個(gè)新項(xiàng)目：

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

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

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

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

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

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

路由和模板

主頁（ / ）路由呈現(xiàn)提交的存儲(chǔ)庫列表。我們將從簡單的HTML響應(yīng)開始：

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

// ...（其余index.js）

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

使用wrangler preview進(jìn)行測試。接下來，我們將創(chuàng)建一個(gè)更復(fù)雜的模板：

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

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

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

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

這使用一個(gè)布局模板來進(jìn)行一致的樣式（包括Bulma CSS）。

與工人KV的數(shù)據(jù)持久性

Workers KV提供了一個(gè)用于數(shù)據(jù)持久性的鑰匙值商店。我們將存儲(chǔ)存儲(chǔ)庫（鍵： repos:${id} ）和每日列表（鍵： $date ）。注意：工人KV需要付費(fèi)計(jì)劃。

基本KV操作：

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

我們將創(chuàng)建用于管理回購和日期數(shù)據(jù)的類：

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

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

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

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

Repo類處理驗(yàn)證和持久性。 Day管理每日存儲(chǔ)庫列表。

處理用戶提交

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

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

// ...（創(chuàng)建處理程序?qū)崿F(xiàn)）

這使用qs庫來解析數(shù)據(jù)，創(chuàng)建Repo對(duì)象，將其保存到KV，并將其ID添加到每日列表中。

渲染主頁上的數(shù)據(jù)

現(xiàn)在，主頁檢索并渲染存儲(chǔ)庫數(shù)據(jù)：

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

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

Day模塊的getRepos函數(shù)獲取并實(shí)例化Repo對(duì)象。模板渲染每個(gè)存儲(chǔ)庫。

部署

要求工人。dev子域：

 Wrangler子域My-Subdomain

部署應(yīng)用程序：

牧馬人出版

在Cloudflare儀表板上創(chuàng)建一個(gè)KV名稱空間，然后使用名稱空間ID更新wrangler.toml ：

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

將KV名稱空間添加到wrangler.toml后重新發(fā)布。該應(yīng)用程序現(xiàn)已直播！

進(jìn)一步發(fā)展

本教程為無服務(wù)器應(yīng)用程序提供了基礎(chǔ)。未來的增強(qiáng)功能可能包括投票，評(píng)論和更復(fù)雜的功能。探索工人文檔和模板畫廊以獲取進(jìn)一步的發(fā)展思想。

以上是使用CloudFlare工人建立全棧無服務(wù)器應(yīng)用程序的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！