Menu

Cloudflare R2統合

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

ファイルストレージが必要なシナリオは多数あります。例えば：

  • ユーザーアバターの保存
  • AI生成された画像や動画のクラウド保存
  • ブログ画像の保存

これらのシナリオ要件が特定されると、管理者にはファイル管理バックエンドも必要になります。

Nexty.devボイラープレートは、Cloudflare R2上に構築されたファイルアップロードと削除メソッド、およびファイルの表示と管理のためのバックエンドを提供することで、これらのニーズに対応します。

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

Cloudflare R2の設定

  1. Cloudflare R2ページにアクセスしてBucketの作成を開始します
Create bucket
Create bucket
  1. Bucket設定に入り、R2_BUCKET_NAMEとR2_ACCOUNT_IDを環境変数にコピーします
Bucket settings
  1. カスタムドメインを設定します
Custom domain
Custom domain
  1. 設定されたカスタムドメインにhttps://プレフィックスを追加して環境変数R2_PUBLIC_URLに設定します
Custom domain
# .env.local または .env
 
R2_PUBLIC_URL=https://R2_PUBLIC_URL
  1. CORSポリシーを設定します。これは、どのオリジン（ドメイン、プロトコル、ポート）がR2 Bucketに保存されたリソースにアクセスできるかを制御します。これは、不正なクロスオリジンアクセスからリソースを保護するセキュリティメカニズムです。
CORS Policy
CORS Policy
[
  {
    "AllowedOrigins": [
      "http://127.0.0.1:3006",
      "http://localhost:3006",
      "https://kontextimage.com",
      "https://flux-kontext.nexty.dev"
    ],
    "AllowedMethods": [
      "GET",
      "PUT",
      "HEAD"
    ],
    "AllowedHeaders": [
      "Content-Type",
      "Content-Length"
    ],
    "ExposeHeaders": [
      "Content-Length",
      "Content-Type",
      "Content-Disposition",
      "ETag",
      "Last-Modified"
    ],
    "MaxAgeSeconds": 3600
  }
]
  1. 次にR2ホームページに戻り、API Keyの作成を開始します
Create API Key
Create API Key
Create API Key
  1. API Keyを環境変数R2_ACCESS_KEY_IDとR2_SECRET_ACCESS_KEYに追加します
Create API Key

検証

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

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