使用 Cloudflare 构建速度超快的无服务器应用程序🏃
太长不看
⚡构建一个速度极快的 Cloudflare 工作进程，用于存储和返回随机名言。
引言
你喜欢速度吗？🏃 你喜欢简洁易用吗？那么，Cloudflare Workers 或许是你下一个应用程序的理想解决方案。
Cloudflare是一家云服务提供商，以其 CDN 服务而闻名，并提供多种服务用于构建云应用程序。其中，Cloudflare Workers 是一项无服务器服务，允许您在边缘运行无服务器函数（如果您是 AWS 用户，则类似于 Lambda@Edge）。这意味着您的代码运行位置更靠近最终用户，从而实现极快的响应速度。
免责声明：我认为 Cloudflare Workers 最适合小型项目。我还没有找到令人满意的工具来部署和管理大型项目中的多个 Cloudflare Workers。在这种情况下，AWS Lambda 之类的服务可能更合适。
也就是说，Cloudflare Workers 设置起来非常简单，如果您想部署简单的应用程序，它还能提供出色的 DevX 功能。
为了向您展示这一点，我们将构建一个简单的 worker，它允许您将名言保存在键值存储中，并返回您保存的名言中的随机名言。
创建你的第一个工人🥇
先决条件
- 一个 Cloudflare 账户（设置起来超级简单）
首先创建一个新文件夹来存放你的项目。在这个文件夹内，你可以添加一个package.json文件：
{
"name": "awesome-quotes-service",
"devDependencies": {
"@cloudflare/workers-types": "^4.20230801.0",
"typescript": "^5.1.6",
"wrangler": "^3.3.0"
}
}
我们将使用 TypeScript，因此您也可以添加一个tsconfig.json包含 TS 配置的文件：
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"lib": ["esnext"],
"preserveSymlinks": true,
"types": ["@cloudflare/workers-types"]
}
}
然后，您可以创建一个index.ts文件，其中包含我们函数的代码：
export default {
async fetch(
request: Request,
env: Env,
): Promise<Response> {
return new Response(
JSON.stringify('Hello from my first Cloudflare Worker'),
{
// Headers configuration of API response
headers: {
'content-type': 'application/json',
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Origin': '*',
},
}
);
},
};
在这个文件中，我们将创建一个fetch包含 Cloudflare Worker 代码的函数。它接受以下输入：
request包含请求数据（例如请求体、URL、请求方法等）的变量- 一个
env变量，其中包含与您的工作进程关联的绑定（稍后会详细介绍……）
它内部返回一个Response包含两个参数的对象：
- 你的回复正文，
- 这里是一些响应配置，包括我们的响应头。
最后，您可以创建一个wrangler.toml文件。Wrangler是 Cloudflare 开发的命令行工具，用于构建、部署和管理 Cloudflare Worker。我们将在这里使用它来配置 Worker，并通过 CLI 进行部署。
// Name of your Cloudflare Worker
name = "quotes"
// A date which will be used to determine which version of the Workers runtime is used.
compatibility_date = "2023-07-21"
使用您喜欢的包管理器安装项目依赖项后，您可以运行命令npx wrangler deploy ./index.ts告诉 Wrangler 将您的工作进程部署到 Cloudflare。
恭喜🎉，您已成功部署您的第一个 Worker 💪！终端中应该会显示该 Worker 的 URL。如果您访问此 URL，应该会看到“来自我的第一个 Cloudflare Worker 的问候”。
更进一步
现在我们已经有了一个可以正常运行的 worker 😲，接下来我们将更进一步，添加一些存储功能来构建我们的报价服务。为此，我们将使用 KV。KV是由 Cloudflare 提供的分布式、高度可扩展的键值数据存储方案。
我们首先需要在 Cloudflare 控制面板中进行设置，然后才能在我们的工作进程中使用它。为此，您可以KV连接到您的 Cloudflare 帐户后，转到“设置”选项卡，然后选择Create a namespace您将调用的命令quotes。
现在我们有了键值存储，就可以在其中存储和检索随机名言了。首先，让我们更新 worker 来存储名言。我们将添加一个/createHTTP 路由，您可以通过该路由传入名言，将其保存到键值存储中。
首先，我们需要更新配置wrangler.toml，定义与 KV 存储的绑定quotes，以便在代码中引用它。您需要quotesKV 存储的 ID，可以在 Cloudflare 控制面板中找到。
name = "quotes"
compatibility_date = "2023-07-21"
kv_namespaces = [
{ binding = "quotes", id = "<Copy the ID of your KV Store>" }
]
然后，我们将更新工作进程，使其包含将数据存储到键值存储中的代码：
export interface Env {
quotes: KVNamespace;
}
export default {
async fetch(
request: Request,
env: Env
): Promise<Response> {
let url = new URL(request.url);
switch (url.pathname) {
case '/create':
// We generate a random key for your quote
const id = crypto.randomUUID();
// We retrieve the quote you pass in your request body
const quote = (await request.json() as any).quote;
// We store your quote in the KV Store
await env.quotes.put(
id,
quote
);
return new Response(
JSON.stringify('Success'),
{
headers: {
'content-type': 'application/json',
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Origin': '*',
},
}
);
};
}};
您可以注意到以下几点：
- 我们添加了一个指向 KV 存储的接口。这使我们能够通过worker 的参数
quotes直接与存储进行交互。env - 我们正在使用以下方式检索请求正文
request.json() put我们使用接受键值对作为参数的函数将报价存储在 KV 中。
如果您使用 `<replace_worker_name>` 重新部署您的 worker wrangler，并通过路由发送 POST 请求/create，并附带一个包含quote参数的 JSON 有效负载来调用它，您应该能够将报价存储在您的 KV 存储中。您可以在 Cloudflare 控制面板中检查它是否确实有效🚀！
获取随机名言
最后，我们需要能够从 worker 中获取随机名言。让我们来实现吧！我们将添加一条新/get路由，该路由将从我们的键值存储中返回一条随机名言。只需case在以下代码中添加一条新路由switch：
case '/get':
// We retrieve all the quotes keys
const quotesKeys = (await env.quotes.list()).keys.map((key) => key.name);
// We pick a random key, and retrieve it from the KV Store
const randomId = quotesKeys[Math.floor(Math.random() * quotesKeys.length)]
const randomQuote = await env.quotes.get(randomId, 'text');
return new Response(
randomQuote,
{
headers: {
'content-type': 'application/json',
'Access-Control-Allow-Headers': '*',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Origin': '*',
},
}
);
这段代码的内容是：
- 使用该函数列出存储在 KV 存储库中的所有报价单键值
list()， get()我们正在使用以下功能从 KV 商店获取报价
如果您重新部署 Cloudflare Worker，现在应该可以调用 HTTP GET/get端点来检索随机名言🎊！
结论
恭喜，你刚刚创建了一个用于存储和返回随机名言的工作进程！如果你想更进一步，例如，你可以将一个 Slack 机器人集成到其中。
希望您喜欢这篇文章，如有任何疑问，欢迎在评论区留言！
文章来源：https://dev.to/slsbytheodo/build-blazing-fast-serverless-apps-using-cloudflare-n3g