← Cloudflare Workers / workers / tutorials

Bezpečný přístup k assets a jejich nahrávání pomocí Cloudflare R2

Tento tutoriál vysvětluje, jak vytvořit projekt Cloudflare Workers založený na TypeScriptu, který dokáže bezpečně přistupovat k souborům a nahrávat je do Cloudflare R2 bucket. Cloudflare R2 umožňuje vývojářům ukládat velké množství nestrukturovaných dat bez vysokých poplatků za odchozí přenos dat, které jsou typické pro běžné cloudové úložné služby.

Chcete-li pokračovat:

1. Zaregistrujte si účet Cloudflare ↗ pokud jste to ještě neudělali.
2. Nainstalujte npm ↗.
3. Nainstalujte Node.js ↗. Použijte správce verzí Node, například Volta ↗ nebo nvm ↗ abyste se vyhnuli problémům s oprávněními a mohli měnit verze Node.js. Wrangler vyžaduje verzi Node 16.17.0 nebo novější.

Nejprve použijte create-cloudflare CLI ↗ pro vytvoření nového Workeru. Otevřete okno terminálu a spusťte následující příkaz:

npm create cloudflare@latest -- upload-r2-assets

Při nastavení vyberte následující možnosti:

• Pro S čím byste chtěli začít?, vyberte Hello World example.
• Pro Jakou šablonu chcete použít?, vyberte Worker only.
• Pro Jaký jazyk chcete použít?, vyberte TypeScript.
• Pro Chcete používat git pro správu verzí?, vyberte Yes.
• Pro Chcete nasadit svou aplikaci?, vyberte No (před nasazením provedeme ještě několik změn).

Přejděte do nově vytvořeného adresáře:

cd upload-r2-assets

Než do své aplikace Worker integrujete přístup k R2 bucketu, musí být nejprve vytvořen R2 bucket:

npx wrangler r2 bucket create <YOUR_BUCKET_NAME>

Nahraďte <YOUR_BUCKET_NAME> názvem, který chcete přiřadit svému bucketu. Vypište buckety R2 svého účtu a ověřte, že byl nový bucket přidán:

npx wrangler r2 bucket list

Jakmile je nový bucket R2 připravený, použijte jej ve své aplikaci Worker.

Svůj R2 bucket použijte v projektu Workeru úpravou Konfigurační soubor Wrangler abyste zahrnuli R2 bucket binding. Do souboru Wrangler přidejte následující vazbu R2 bucketu:

{
	"r2_buckets": [
		{
			"binding": "MY_BUCKET",
			"bucket_name": "<YOUR_BUCKET_NAME>"
		}
	]
}

[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "<YOUR_BUCKET_NAME>"

Přiřaďte svému bucketu R2 binding name. Nahraďte <YOUR_BUCKET_NAME> názvem bucketu R2, který jste vytvořili dříve.

Vaše aplikace Worker nyní může přistupovat k vašemu R2 bucketu pomocí MY_BUCKET proměnná. Nyní můžete provádět operace CRUD (Create, Read, Update, Delete) s obsahem bucketu.

Po nastavení vazby na bucket R2 implementujete funkce, díky kterým bude Worker s bucketem R2 komunikovat, například načítat soubory z bucketu a nahrávat do něj soubory.

Chcete-li načíst soubory z bucketu R2, použijte BINDING.get funkci. V následujícím příkladu se vazba R2 bucket nazývá MY_BUCKET. Pomocí .get(key), můžete načíst asset podle cesty URL použité jako klíč. V tomto příkladu je cestou URL /image.png, a klíč assetu je image.png.

interface Env {
	MY_BUCKET: R2Bucket;
}
export default {
	async fetch(request, env): Promise<Response> {
		// For example, the request URL my-worker.account.workers.dev/image.png
		const url = new URL(request.url);
		const key = url.pathname.slice(1);
		// Retrieve the key "image.png"
		const object = await env.MY_BUCKET.get(key);

		if (object === null) {
			return new Response("Object Not Found", { status: 404 });
		}

		const headers = new Headers();
		object.writeHttpMetadata(headers);
		headers.set("etag", object.httpEtag);

		return new Response(object.body, {
			headers,
		});
	},
} satisfies ExportedHandler<Env>;

Výše napsaný kód načte a vrátí data z bucketu R2, když GET požadavek na aplikaci Worker s použitím konkrétní cesty URL.

Dále přidáte možnost nahrávat do svého R2 bucketu pomocí autentizace. Pro bezpečné ověřování požadavků na nahrání použijte Funkce Wrangleru pro secrets. Wrangler se nainstaloval při spuštění příkazu create cloudflare@latest příkazu.

Vytvořte tajnou hodnotu podle vlastního výběru, například náhodný řetězec nebo heslo. Pomocí Wrangler CLI přidejte tento secret do svého projektu jako AUTH_SECRET:

npx wrangler secret put AUTH_SECRET

Nyní přidejte novou větev kódu, která zpracuje PUT požadavek HTTP. Tento nový kód ověří, že je dříve nahraný secret správně použit pro autentizaci, a poté nahraje data do R2 pomocí MY_BUCKET.put(key, data):

interface Env {
	MY_BUCKET: R2Bucket;
	AUTH_SECRET: string;
}
export default {
	async fetch(request, env): Promise<Response> {
		if (request.method === "PUT") {
			// Note that you could require authentication for all requests
			// by moving this code to the top of the fetch function.
			const auth = request.headers.get("Authorization");
			const expectedAuth = `Bearer ${env.AUTH_SECRET}`;

			if (!auth || auth !== expectedAuth) {
				return new Response("Unauthorized", { status: 401 });
			}

			const url = new URL(request.url);
			const key = url.pathname.slice(1);
			await env.MY_BUCKET.put(key, request.body);
			return new Response(`Object ${key} uploaded successfully!`);
		}

		// include the previous code here...
	},
} satisfies ExportedHandler<Env>;

Tento přístup zajišťuje, že přístup mají pouze klienti, kteří poskytnou platný bearer token prostřednictvím Authorization hlavičku rovnou AUTH_SECRET hodnota, bude mít povoleno nahrávat do R2 bucketu. Pokud jste použili jiný název bindingu než AUTH_SECRET, nahraďte jej ve výše uvedeném kódu.

Po dokončení projektu Cloudflare Worker jej nasaďte na Cloudflare. Ujistěte se, že se nacházíte v adresáři aplikace Worker vytvořeném pro tento návod, a poté spusťte:

npx wrangler deploy

Vaše aplikace je nyní spuštěná a dostupná na adrese <YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev.

Úspěšně jste vytvořili Cloudflare Worker, který umožňuje pracovat s bucketem R2, například nahrávat a stahovat soubory. Nyní jej můžete použít jako výchozí bod pro vlastní projekty.

Chcete-li se dozvědět více o tom, co lze vytvářet s R2 a Workers, přečtěte si Návody a Dokumentace R2.

Pokud máte jakékoli dotazy, potřebujete pomoc nebo se chcete podělit o svůj projekt, připojte se ke komunitě Cloudflare Developer na Discord ↗ pro spojení s ostatními vývojáři a týmem Cloudflare.