Cloudflare R2 統合

R2はCloudflareが提供するオブジェクトストレージサービスで、CloudflareのCDNサービスとシームレスに統合され、静的ファイルストレージおよび配信サービスとして機能します。

ファイルストレージを必要とするシナリオは多岐にわたります。例えば：

• ユーザーアバターストレージ
• AI生成画像や動画のクラウド保存
• ブログ画像ストレージ

これらのニーズに伴い、管理者にもファイル管理バックエンドが必要になります。

Nexty.devテンプレートは、Cloudflare R2に基づいたファイルアップロードと削除メソッドをカプセル化し、ファイルの表示と管理のためのバックエンドを提供することで、これらの要件に対応しています。

本章では、Cloudflare R2の設定を完了します。

Cloudflare R2の設定

1. Cloudflare R2ページにアクセスし、Bucketの作成を開始します

2. Bucket設定に移動し、R2_BUCKET_NAMEとR2_ACCOUNT_IDを環境変数にコピーします

3. カスタムドメインの設定

4. 設定したカスタムドメインにhttps://接頭辞を付けて、環境変数R2_PUBLIC_URLに追加します

# .env.local or .env
 
R2_PUBLIC_URL=https://R2_PUBLIC_URL

5. CORSポリシーの設定。これは、R2 Bucketに保存されているリソースにどのオリジン（ドメイン、プロトコル、ポート）がアクセスできるかを制御します。これは、許可されていないクロスオリジンアクセスからリソースを保護するためのセキュリティメカニズムです。

[
  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://nexty.dev"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "HEAD"
    ],
    "AllowedHeaders": [
      "Content-Type",
      "Content-Length",
      "x-amz-acl"
    ],
    "ExposeHeaders": [
      "ETag"
    ],
    "MaxAgeSeconds": 3000
  }
]

6. R2ホームページに戻り、APIキーの作成を開始します

7. APIキーを環境変数R2_ACCESS_KEY_IDとR2_SECRET_ACCESS_KEYに追加します

確認

ソースコードリポジトリを起動し、以下のモジュールでR2関連機能をテストできます：

• /dashboard/settingsページでアバターアップロードをテスト
• /ai-demoページでAI生成画像や動画のアップロードをテスト
• /dashboard/imagesページでAIデモで生成された画像や動画を管理