使用 Deno Deploy 部署一个随机图片文字服务
目录
警告
本文最后更新于 2024-02-24,文中内容可能已过时。
使用 Deno Deploy 部署一个随机图片文字服务。
Deno 介绍
Deno Deploy 是一个全球分布式的无服务器 JavaScript 应用平台。您的 JavaScript、TypeScript 和 WebAssembly 代码在靠近用户地理位置的托管服务器上运行,实现低延迟和更快的响应时间。部署的应用程序在快速轻量级的 V8 隔离上运行,而不是虚拟机,由 Deno 运行时提供支持。
中文文档 https://docs.denohub.com/deno/deploy/manual
Deno Deploy 可使用 KV ,Cron 内置服务,自带分析,日志,Github 自动集成部署。支持 Fresh ,SvelteKit ,Nuxt,Next.js 等等模板。有一定免费额度。(每月 1M 次请求,100GB 流量等限制)
Deno Deploy 可选模板
概述
项目地址 https://github.com/kkbt0/deno-demo1
效果 https://healthy-tiger-40.deno.dev/
步骤
使用起来很简单,项目上传到 Github
- Deno 在本地跑通后,上传项目到 Github。如 https://github.com/kkbt0/deno-demo1
- 登录 https://dash.deno.com/
- 选择项目进行授权,安装 app https://github.com/apps/deno-deploy
- 部署完成,查看效果
- 后续上传到 Github 的代码,会自动部署到 Deno Deploy
效果
同时贴出代码。和 https://github.com/kkbt0/deno-demo1 一致
代码
- 程序入口
server.ts
function getRandomJsonItem(filePath: string): string {
const jsonData = JSON.parse(Deno.readTextFileSync(filePath));
const randomItem = jsonData[Math.floor(Math.random() * jsonData.length)];
return randomItem;
}
function addOne(value: any): number {
if (isNaN(value)) {
value = 0;
}
return Number(value) + 1;
}
async function setKeyValue(path: string): Promise<number> {
const kv = await Deno.openKv();
const num = await kv.get(["demo1", path]);
const newNum = addOne(num.value);
await kv.set(["demo1", path], newNum);
console.log("Path:", path, "Num:", newNum);
return newNum;
}
async function getKeyValue(): Promise<string> {
const kv = await Deno.openKv();
const num1 = await kv.get(["demo1", "/"]);
const num2 = await kv.get(["demo1", "/gushi"]);
const num3 = await kv.get(["demo1", "/images"]);
return `<div> / ${num1.value}<br> /gushi ${num2.value}<br> /images ${num3.value}</div>`;
}
const handler = async (request: Request): Promise<Response> => {
const url = new URL(request.url);
setKeyValue(url.pathname);
switch (url.pathname) {
case "/":
const num = await getKeyValue();
return new Response(
Deno.readTextFileSync("index.html").replace(/{{num}}/g, num),
{ status: 200, headers: { "Content-Type": "text/html" } }
);
case "/gushi":
return new Response(getRandomJsonItem("古诗.json"), { status: 200 });
case "/images":
return new Response("302", {
status: 302,
headers: { Location: getRandomJsonItem("images.json") },
});
default:
return new Response("404", { status: 404 });
}
};
console.log(`HTTP server running. Access it at: http://localhost:1024/`);
Deno.serve({ port: 1024, hostname: "0.0.0.0", handler });
- 主页
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deno Demo</title>
</head>
<body>
<h1>Deno Demo</h1>
<div><a href="https://www.ftls.xyz/posts/2024-01-09-deno-deploy-random-images-text-service/">教程</a></div>
<p>随机 图片 古诗以下链接:</p>
<ul>
<li><a href="/images" target="_blank">随机图片</a></li>
<li><a href="/gushi" target="_blank">随机古诗</a></li>
</ul>
<div>统计 {{num}}</div>
</body>
</html>
- 数据文件
images.json
[
"https://img.zcool.cn/community/0176b05e254499a801216518ff2bf4.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100",
"https://n.sinaimg.cn/sinacn10101/492/w1080h1812/20190319/ae63-hukwxnv3750034.jpg",
"https://s2.ciyuanjie.cn/uploads/2020/04/323075.jpg",
"https://pic4.zhimg.com/v2-d81f45bcbda578ba89e3ebcfa90baa87_r.jpg"
]
古诗.json
[
"愿得一心人,白头不相离",
"十年生死两茫茫,不思量,自难忘。",
"迟日江山丽,春风花草香。",
"连雨不知春去,一晴方觉夏深。",
"荷叶罗裙一色裁,芙蓉向脸两边开。"
]
- justfile
run:
deno run --allow-net --allow-read --unstable server.ts