INTEGRITY Dokumentace

← Cloudflare Pages / pages / tutorials

Použití R2 jako úložiště statických assetů s Cloudflare Pages

Tento tutoriál vás naučí používat R2 jako úložiště statických assetů pro váš Pages aplikace. To je užitečné zejména v případě, že narazíte na limit počtu souborů nebo maximální limit velikosti souboru na Pages.

Postup si ukážeme na příkladu, kdy R2 použijeme jako úložiště statických assetů pro fiktivní blog o kočkách.

Blog Cat

Představte si, že provozujete statický blog o kočkách plný vtipných videí a užitečných rad pro majitele koček. Blog roste a vy potřebujete přidávat další obsah s obrázky a videi koček.

Blog je hostovaný na Pages a v současné době má tuto strukturu adresářů:

.
├── public
│   ├── index.html
│   ├── static
│   │   ├── favicon.ico
│   │   └── logo.png
│   └── style.css
└── wrangler.jsonc

Přidání dalších videí a obrázků na blog by bylo skvělé, ale velikost našich assetů přesahuje limit počtu souborů v Pages. Pojďme to opravit pomocí R2.

Vytvořte R2 bucket

Prvním krokem je vytvoření bucketu R2 pro uložení statických prostředků. Nový bucket lze vytvořit z dashboardu nebo pomocí Wrangler.

V dashboardu přejděte na kartu R2 a klikněte na Create bucket. Bucket pro náš blog pojmenujeme cat-media. Bucketům vždy dávejte výstižné názvy:

Dashboard

Jakmile je bucket vytvořený, můžeme do R2 nahrát mediální soubory. Přetáhnu do bucketu R2 dvě složky s několika obrázky a videi koček:

Nahrát

Alternativně lze bucket R2 vytvořit pomocí Wrangler z příkazové řádky spuštěním:

npx wrangler r2 bucket create <bucket_name>
# i.e
# npx wrangler r2 bucket create cat-media

Soubory lze do bucketu nahrát pomocí následujícího příkazu:

npx wrangler r2 object put <bucket_name>/<file_name> -f <path_to_file>
# i.e
# npx wrangler r2 object put cat-media/videos/video1.mp4 -f ~/Downloads/videos/video1.mp4

Připojení R2 k Pages

Chcete-li vytvořený bucket R2 navázat na blog o kočkách, je potřeba aktualizovat konfiguraci Wrangler.

Otevřete Konfigurační soubor Wrangler, a do souboru přidejte následující binding. bucket_name by měl být přesný název bucketu vytvořeného dříve, zatímco binding může být libovolný vlastní název odkazující na zdroj R2:

{
	"r2_buckets": [
		{
			"binding": "MEDIA",
			"bucket_name": "cat-media"
		}
	]
}
[[r2_buckets]]
binding = "MEDIA"
bucket_name = "cat-media"

Uložte Konfigurační soubor Wrangler, a jsme připraveni přejít k poslednímu kroku.

Alternativně můžete přidat binding do projektu Pages na dashboardu tak, že přejdete do Nastavení kartu > Funkce > R2 bucket bindings.

Poskytování souborů R2 z Pages

Posledním krokem je poskytování mediálních souborů z R2 na blogu. K tomu vytvoříme funkci, která bude obsluhovat požadavky na mediální soubory.

Ve složce projektu vytvořte funkce adresář. Poté vytvořte média podadresář a soubor s názvem [[all]].js v něm. Všechny HTTP požadavky na /media se přesměruje do tohoto souboru.

Po vytvoření složek a souboru JavaScript by struktura adresáře blogu měla vypadat takto:

.
├── functions
│   └── media
│       └── [[all]].js
├── public
│   ├── index.html
│   ├── static
│   │   ├── favicon.ico
│   │   └── icon.png
│   └── style.css
└── wrangler.jsonc

Nakonec přidáme obslužnou funkci (handler) do [[all]].js. Tato funkce přijímá všechny požadavky na média a vrací příslušný soubor z R2:

export async function onRequestGet(ctx) {
	const path = new URL(ctx.request.url).pathname.replace("/media/", "");
	const file = await ctx.env.MEDIA.get(path);
	if (!file) return new Response(null, { status: 404 });
	return new Response(file.body, {
		headers: { "Content-Type": file.httpMetadata.contentType },
	});
}

Nasadit blog

Než nasadíme dosavadní změny v našem blogu o kočkách, přidejme si pár nových příspěvků do index.html. Tyto příspěvky závisí na mediálních souborech poskytovaných z R2:

<!doctype html>
<html lang="en">
	<body>
		<h1>Awesome Cat Blog! 😺</h1>
		<p>Today's post:</p>
		<video width="320" controls>
			<source src="/media/videos/video1.mp4" type="video/mp4" />
		</video>
		<p>Yesterday's post:</p>
		<img src="/media/images/cat1.jpg" width="320" />
	</body>
</html>

Jakmile máte všechny soubory uložené, otevřete nové okno terminálu a nasaďte aplikaci:

npx wrangler deploy

Po nasazení se mediální soubory načítají a obsluhují z bucketu R2.

Nasazená aplikace