INTEGRITY Документация

← Cloudflare Pages / pages / tutorials

Использование R2 в качестве хранилища статических ресурсов с Cloudflare Pages

Это руководство научит вас использовать R2 в качестве бакета для хранения статических ресурсов вашего Pages приложение. Это особенно полезно, если вы сталкиваетесь с лимит файлов или максимальный лимит размера файла в Pages.

Чтобы показать, как это делается, мы используем R2 в качестве хранилища статических ресурсов для вымышленного блога про котов.

Блог о котах

Представьте, что вы ведете статичный блог о кошках с забавными видео и полезными советами для владельцев кошек. Ваш блог растет, и вам нужно добавлять больше контента с изображениями и видео кошек.

Блог размещён на Pages и в настоящее время имеет следующую структуру каталогов:

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

Было бы здорово добавить в блог больше видео и изображений, но размер наших ресурсов превышает лимит файлов в Pages. Давайте исправим это с помощью R2.

Создайте бакет R2

Первый шаг: создание бакета R2 для хранения статических ресурсов. Новый бакет можно создать через дашборд или с помощью Wrangler.

В панели управления перейдите на вкладку R2, затем нажмите Создайте бакет. Мы назовём бакет для нашего блога cat-media. Всегда давайте своим корзинам понятные названия:

Dashboard

После создания бакета можно загрузить в R2 медиафайлы. Перетащим в бакет R2 две папки с несколькими изображениями и видео с котами:

Загрузить

Также можно создать R2 bucket с помощью Wrangler из командной строки, выполнив:

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

Загрузить файлы в bucket можно с помощью следующей команды:

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

Привязка R2 к Pages

Чтобы привязать созданный нами bucket R2 к блогу о котах, нужно обновить конфигурацию Wrangler.

Откройте конфигурационный файл Wrangler, и добавьте в файл следующую привязку. bucket_name должно быть точным именем бакета, созданного ранее, а binding может быть любым произвольным именем, ссылающимся на ресурс R2:

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

Сохраните конфигурационный файл Wrangler, и теперь мы готовы перейти к последнему шагу.

Также вы можете добавить привязку к проекту Pages в панели управления, перейдя в Настройки вкладка > Функции > Привязки бакетов R2.

Раздача объектов R2 из Pages

Последний шаг заключается в раздаче медиаресурсов из R2 на блоге. Для этого мы создадим функцию, обрабатывающую запросы к медиафайлам.

В папке проекта создайте функции директория. Затем создайте медиа подкаталог и файл с именем [[all]].js в нём. Все HTTP-запросы к /media будет маршрутизирован на этот файл.

После создания папок и файла JavaScript структура каталога блога должна выглядеть так:

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

Наконец, добавим функцию-обработчик в [[all]].js. Эта функция принимает все запросы к медиафайлам и возвращает соответствующий файл-ресурс из 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 },
	});
}

Развернуть блог

Прежде чем развернуть внесённые изменения в наш блог про котиков, добавим несколько новых записей в index.html. Эти записи зависят от медиаресурсов, которые отдаются из 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>

Сохранив все файлы, откройте новое окно терминала, чтобы развернуть приложение:

npx wrangler deploy

После развёртывания медиаресурсы загружаются и раздаются из бакета R2.

Развернутое приложение