コンテンツにスキップ

Cloudflare PagesでR2を静的アセットストレージとして使用する

Last reviewed: 2 months ago

このチュートリアルでは、R2をあなたのPagesアプリの静的アセットストレージバケットとして使用する方法を学びます。これは、ファイル制限や最大ファイルサイズ制限に達している場合に特に役立ちます。

これをどのように行うかを示すために、R2を架空の猫ブログの静的アセットストレージとして使用します。

猫ブログ

あなたが面白い猫の動画や猫の飼い主のための役立つヒントを含む静的な猫ブログを運営していると想像してください。あなたのブログは成長しており、猫の画像や動画を追加する必要があります。

ブログはPages上にホストされており、現在のディレクトリ構造は次のとおりです：

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

ブログにさらに動画や画像を追加することは素晴らしいことですが、アセットのサイズがPagesのファイル制限を超えています。これをR2で解決しましょう。

R2バケットの作成

最初のステップは、静的アセットを保存するためのR2バケットを作成することです。新しいバケットはダッシュボードまたはWranglerを使用して作成できます。

ダッシュボードを使用して、R2タブに移動し、バケットを作成をクリックします。ブログのためにバケットに名前を付けます cat-media。バケットには常に説明的な名前を付けることを忘れないでください：

Dashboard

バケットが作成されたら、メディアファイルをR2にアップロードできます。猫の画像や動画が入った2つのフォルダをR2バケットにドラッグアンドドロップします：

Upload

または、コマンドラインからWranglerを使用してR2バケットを作成することもできます。次のコマンドを実行します：

Terminal window
npx wrangler r2 bucket create <bucket_name>
# 例
# npx wrangler r2 bucket create cat-media

ファイルは次のコマンドでバケットにアップロードできます：

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

R2をPagesにバインドする

作成したR2バケットを猫ブログにバインドするには、wrangler.tomlを更新する必要があります。

wrangler.tomlを開き、次のバインディングをファイルに追加します。bucket_nameは先に作成したバケットの正確な名前で、bindingはR2リソースを指す任意のカスタム名にできます：

[[r2_buckets]]
binding = "MEDIA"
bucket_name = "cat-media"

wrangler.tomlを保存し、最後のステップに進む準備が整いました。

または、ダッシュボードでプロジェクトの Settings タブ > Functions > R2バケットバインディング に移動して、Pagesプロジェクトにバインディングを追加することもできます。

PagesからR2アセットを提供する

最後のステップは、ブログからR2のメディアアセットを提供することです。そのために、メディアファイルのリクエストを処理する関数を作成します。

プロジェクトフォルダ内に functions ディレクトリを作成します。次に、media サブディレクトリを作成し、その中に [[all]].js という名前のファイルを作成します。すべてのHTTPリクエストは /media にルーティングされ、このファイルに送られます。

フォルダとJavaScriptファイルを作成した後、ブログのディレクトリ構造は次のようになります：

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

最後に、[[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>素晴らしい猫ブログ！ 😺</h1>
    <p>今日の投稿：</p>
    <video width="320" controls>
      <source src="/media/videos/video1.mp4" type="video/mp4" />
    </video>
    <p>昨日の投稿：</p>
    <img src="/media/images/cat1.jpg" width="320" />
  </body>
</html>

すべてのファイルを保存したら、新しいターミナルウィンドウを開いてアプリをデプロイします：

Terminal window
npm run deploy

デプロイが完了すると、メディアアセットはR2バケットから取得され、提供されます。

Deployed App

関連リソース

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings