このチュートリアルでは、Pages アプリの静的アセット保存先として R2 を使う方法を説明します。ファイル数の上限 や ファイルサイズの上限 に達している場合に特に役立ちます。
手順を示すため、架空の猫ブログで R2 を静的アセットストレージとして使います。
面白い猫の動画と、飼い主向けの役立つヒントを載せた静的な猫ブログを運営しているとします。ブログは成長しており、猫の画像や動画を含むコンテンツをさらに追加する必要があります。
ブログは Pages でホストしており、現在のディレクトリ構成は次のとおりです。
.
├── public
│ ├── index.html
│ ├── static
│ │ ├── favicon.ico
│ │ └── logo.png
│ └── style.css
└── wrangler.jsonc動画や画像をさらに追加したいところですが、アセットサイズが Pages のファイルサイズ上限 を超えています。R2 でこの問題を解消します。
最初の手順は、静的アセットを保存する R2 バケットの作成です。新しいバケットは、ダッシュボードまたは Wrangler で作成できます。
ダッシュボードでは、R2 タブを開き、Create bucket を選びます。ブログ用のバケット名は cat-media にします。バケットにはわかりやすい名前を付けます。
バケットを作成したら、R2 にメディアファイルをアップロードできます。猫の画像と動画が入った 2 つのフォルダーを、R2 バケットへドラッグアンドドロップします。
または、次のコマンドで Wrangler から R2 バケットを作成できます。
npx wrangler r2 bucket create <bucket_name>
# i.e
# npx wrangler r2 bucket create cat-mediaファイルは、次のコマンドでバケットへアップロードできます。
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 バケットを猫ブログへバインドするには、Wrangler 設定を更新します。
Wrangler 設定ファイル を開き、次のバインディングを追加します。bucket_name は先ほど作成したバケットの正確な名前にします。binding は、R2 リソースを指す任意のカスタム名にできます。
{
"r2_buckets": [
{
"binding": "MEDIA",
"bucket_name": "cat-media"
}
]
}[[r2_buckets]]
binding = "MEDIA"
bucket_name = "cat-media"Wrangler 設定ファイル を保存したら、最後の手順へ進みます。
または、ダッシュボードでプロジェクトの Settings タブ > Functions > R2 bucket bindings から、Pages プロジェクトにバインディングを追加できます。
最後の手順は、ブログで R2 のメディアアセットを配信することです。そのため、メディアファイルのリクエストを処理する Function を作成します。
プロジェクトフォルダーに functions ディレクトリを作成します。その中に media サブディレクトリと、[[all]].js ファイルを作成します。/media への HTTP リクエストはすべて、このファイルにルーティングされます。
フォルダーと 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 バケットから取得され、配信されます。
