← Cloudflare Workers KV / kv / příklady
Ukládání a načítání statických souborů
Uložením statických assetů do Workers KV je můžete získávat globálně s nízkou latencí a vysokou propustností. Tyto assety pak můžete servírovat přímo, nebo je použít k dynamickému generování odpovědí. To se hodí například při servírování souborů, jako jsou vlastní skripty nebo malé obrázky, které se vejdou do Limity KV nebo při generování dynamických odpovědí HTML ze statických assetů, jako jsou překlady.
Zápis statických souborů do Workers KV pomocí Wrangler
Chcete-li do Workers KV ukládat statická aktiva, můžete použít Wrangler CLI (běžně používané ve vývoji), Vazba Workers KV z aplikace Workers, nebo Workers KV REST API (běžně používané pro přístup k Workers KV z externí aplikace). Ukážeme si, jak používat Wrangler CLI.
V tomto scénáři uložíme ukázkový soubor HTML do našeho úložiště Workers KV.
Vytvořte nový soubor index.html následujícím obsahem:
Hello World!Poté můžeme pomocí následujících příkazů Wrangleru vytvořit pro tento soubor pár KV v produkčním i náhledovém jmenném prostoru:
npx wrangler kv key put index.html --path index.html --namespace-id=<ENTER_NAMESPACE_ID_HERE>Tím se v produkčním i náhledovém jmenném prostoru, které určuje binding ve vašem souboru Wrangler, vytvoří pár KV s názvem souboru jako klíčem a obsahem souboru jako hodnotou.
Poskytování statických souborů z KV pomocí aplikace Worker
V tomto příkladu naše aplikace Workers přijme jako cestu HTTP požadavku libovolný název klíče a vrátí hodnotu uloženou pro tento klíč v úložišti KV.
import mime from "mime";
interface Env {
assets: KVNamespace;
}
export default {
async fetch(request, env, ctx): Promise<Response> {
// Return error if not a get request
if(request.method !== 'GET'){
return new Response('Method Not Allowed', {
status: 405,
})
}
// Get the key from the url & return error if key missing
const parsedUrl = new URL(request.url)
const key = parsedUrl.pathname.replace(/^\/+/, '') // Strip any preceding /'s
if(!key){
return new Response('Missing path in URL', {
status: 400
})
}
// Get the mimetype from the key path
const extension = key.split('.').pop();
let mimeType = mime.getType(extension) || "text/plain";
if (mimeType.startsWith("text") || mimeType === "application/javascript") {
mimeType += "; charset=utf-8";
}
// Get the value from the Workers KV store and return it if found
const value = await env.assets.get(key, 'arrayBuffer')
if(!value){
return new Response("Not found", {
status: 404
})
}
// Return the response from the Workers application with the value from the KV store
return new Response(value, {
status: 200,
headers: new Headers({
"Content-Type": mimeType
})
});
},
} satisfies ExportedHandler<Env>;{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "<ENTER_WORKER_NAME>",
"main": "src/index.ts",
"compatibility_date": "2025-03-03",
"observability": {
"enabled": true
},
"kv_namespaces": [
{
"binding": "assets",
"id": "<YOUR_BINDING_ID>"
}
]
}Tento kód získá z HTTP požadavku název klíče pro pár klíč-hodnota, který se má načíst. Poté určí správný typ MIME pro odpověď, aby prohlížeč věděl, jak s ní naložit.
K načtení hodnoty z úložiště KV tento kód používá arrayBuffer ke správné práci s binárními daty, jako jsou obrázky, dokumenty a video či audio soubory.
Uvažujme ukázkový pár klíč-hodnota s klíčem index.html s hodnotou obsahující nějaký HTML obsah v našem úložišti KV namespace Workers, můžeme přistupovat k naší aplikaci Workers
na https://<YOUR-WORKER-HOSTNAME>/index.html k zobrazení obsahu index.html .
Vyzkoušejte to s obrázkem nebo dokumentem a uvidíte, že tento Worker správně poskytuje i tato aktiva z KV.
Generujte dynamické odpovědi z vašich párů klíč-hodnota
Kromě obsluhy statického obsahu můžeme také generovat dynamické odpovědi ve formátu HTML nebo API na základě hodnot uložených v našem úložišti KV.
- Nejprve vytvořte tento soubor v kořenovém adresáři projektu:
[
{
"language_code": "en",
"message": "Hello World!"
},
{
"language_code": "es",
"message": "¡Hola Mundo!"
},
{
"language_code": "fr",
"message": "Bonjour le monde!"
},
{
"language_code": "de",
"message": "Hallo Welt!"
},
{
"language_code": "zh",
"message": "你好，世界！"
},
{
"language_code": "ja",
"message": "こんにちは、世界！"
},
{
"language_code": "hi",
"message": "नमस्ते दुनिया!"
},
{
"language_code": "ar",
"message": "مرحبا بالعالم!"
}
]- Otevřete terminál a zadejte následující příkaz KV pro vytvoření položky KV pro soubor s překlady:
npx wrangler kv key put hello-world.json --path hello-world.json --namespace-id=<ENTER_NAMESPACE_ID_HERE>- Upravte kód svého Workeru tak, aby na základě jazyka v hlavičce požadavku Accept-Language vracel přeložený soubor HTML:
import mime from 'mime';
import parser from 'accept-language-parser'
interface Env {
assets: KVNamespace;
}
export default {
async fetch(request, env, ctx): Promise<Response> {
// Return error if not a get request
if(request.method !== 'GET'){
return new Response('Method Not Allowed', {
status: 405,
})
}
// Get the key from the url & return error if key missing
const parsedUrl = new URL(request.url)
const key = parsedUrl.pathname.replace(/^\/+/, '') // Strip any preceding /'s
if(!key){
return new Response('Missing path in URL', {
status: 400
})
}
// Add handler for translation path (with early return)
if(key === 'hello-world'){
// Retrieve the language header from the request and the translations from Workers KV
const languageHeader = request.headers.get('Accept-Language') || 'en' // Default to English
const translations : {
"language_code": string,
"message": string
}[] = await env.assets.get('hello-world.json', 'json') || [];
// Extract the requested language
const supportedLanguageCodes = translations.map(item => item.language_code)
const languageCode = parser.pick(supportedLanguageCodes, languageHeader, {
loose: true
})
// Get the message for the selected language
let selectedTranslation = translations.find(item => item.language_code === languageCode)
if(!selectedTranslation) selectedTranslation = translations.find(item => item.language_code === "en")
const helloWorldTranslated = selectedTranslation!['message'];
// Generate and return the translated html
const html = `<!DOCTYPE html>
<html>
<head>
<title>Hello World translation</title>
</head>
<body>
<h1>${helloWorldTranslated}</h1>
</body>
</html>
`
return new Response(html, {
status: 200,
headers: {
'Content-Type': 'text/html; charset=utf-8'
}
})
}
// Get the mimetype from the key path
const extension = key.split('.').pop();
let mimeType = mime.getType(extension) || "text/plain";
if (mimeType.startsWith("text") || mimeType === "application/javascript") {
mimeType += "; charset=utf-8";
}
// Get the value from the Workers KV store and return it if found
const value = await env.assets.get(key, 'arrayBuffer')
if(!value){
return new Response("Not found", {
status: 404
})
}
// Return the response from the Workers application with the value from the KV store
return new Response(value, {
status: 200,
headers: new Headers({
"Content-Type": mimeType
})
});
},
} satisfies ExportedHandler<Env>;{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "<ENTER_WORKER_NAME>",
"main": "src/index.ts",
"compatibility_date": "2025-03-03",
"observability": {
"enabled": true
},
"kv_namespaces": [
{
"binding": "assets",
"id": "<YOUR_BINDING_ID>"
}
]
}Tento nový kód poskytuje konkrétní koncový bod, /hello-world, které bude poskytovat přeložené odpovědi. Při přístupu na tuto URL nejprve náš kód Workeru zjistí jazyk požadovaný klientem v Accept-Language hlavičky požadavku a překlady z našeho KV store pro hello-world.json klíč. Poté získá přeloženou zprávu a vrátí vygenerované HTML.
Při přístupu k aplikaci Worker na adrese https://<YOUR-WORKER-HOSTNAME>/hello-world si můžeme všimnout, že naše aplikace nyní vrací správně přeloženou zprávu „Hello World“.
V konzoli pro vývojáře v prohlížeči změňte jazyk národního prostředí (v prohlížečích na bázi Chromium spusťte Show Sensors k zobrazení rozbalovacího seznamu pro výběr lokalit). Uvidíte, že Worker nyní vrací přeloženou zprávu podle jazyka dané lokality.