使用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中文网其他相关文章！