Cloudflare R2のファイルマネージャー: Nubboに接続する

NubboはR2のAPIトークンとアカウントのAccount IDを使ってCloudflare R2に接続します。数分でバケットがファイルエクスプローラーに表示され、直接アップロード、共有リンク、ギャラリーを使えるようになります。このガイドでは、自動接続と1つのバケットに限定したキーでの接続という2つの方法について、Nubboのウィザードを順を追って説明します。

できること

• バケットをドライブのように閲覧: フォルダ、表示切り替え、検索、ゴミ箱、ラベル、お気に入り。
• ブラウザとCloudflare R2の間でファイルを直接アップロード、ダウンロード。ファイルがNubboのサーバーを経由することはありません。
• パスワード、有効期限、ダウンロード回数制限付きでファイルやフォルダを共有し、バケットにファイルを受け取り、ギャラリーを作成。
• キーはAES-256-GCMで暗号化して保存され、いつでもバケットの接続を解除できます。

始める前に

Cloudflare R2のアカウントとNubboのアカウントが必要です。接続する各バケットがプランの上限にカウントされます: 無料プランは2つ、Personalは5つまでで、Proは無制限です。最初のバケットを作成する前に、CloudflareのダッシュボードでR2のサブスクリプションを有効にする必要があります。バケットに管轄区域(EU、FedRAMP、US)がある場合はウィザードで選びます。Nubboはその管轄区域のエンドポイントを使います。

接続方法を選ぶ

Nubboのウィザードには2つの方法があります。どちらも最後は同じで、バケットが接続され、ブラウザからアップロードできる状態になります。

限定キーはNubboに必要な最小限のアクセスです。1つのバケットに対するObject Read & Writeです。この場合Nubboはバケットの一覧表示も新規作成もできないため、バケット名を入力し、CORSルールを自分で追加します。

自動接続

ステップ1: Cloudflare R2でキーを作成する

1. dash.cloudflare.comにサインインし、R2 object storage を開きます。ダッシュボードのメニューはお使いの言語で表示される場合があります。
2. API Tokens を開き、Create Account API token を押します。Overview の Account Details、Manage からも開けます。
3. Admin Read & Write 権限を選んでトークンを作成します。
4. Access Key ID と Secret Access Key をコピーします。Cloudflareがシークレットを表示するのは一度だけです。トークンの値ではなく、この2つのキーを使ってください。
5. R2の Overview ページに表示されている Account ID もコピーします。

ステップ2: Nubboでバケットを接続する

1. Nubboで バケット を開き、バケットを接続 を押します。Cloudflare R2 を選んで 続行 を押します。

   

2. 自動 を選んで 続行 を押します。

   

3. キー のステップで Access Key ID、Secret Access Key、Account ID を貼り付けます。NubboはAccount IDからアカウントのエンドポイントを作成します。R2のリージョンは常に auto です。キーを確認 を押す前に、バケットの 管轄区域 を選びます。ほとんどのバケットは デフォルト(管轄区域なし) で、ほかにEU、FedRAMP、USがあります。エンドポイントもそれに合わせて変わり(EUなら https://<ACCOUNT_ID>.eu.r2.cloudflarestorage.com)、一覧にはその管轄区域のバケットだけが表示されます。キーを確認 を押します。Nubboはキーが有効で、アカウント全体にアクセスできることを確認します。

   

4. バケットを1つ選んで このバケットを使用 を押すか、新規作成 を選んで名前を入力し(求められた場合はリージョンも選び)、作成して準備 を押します。Nubboはアプリからのアップロードとダウンロードだけを許可するCORSルールをバケットに追加し、既存のルールはそのまま残します。

   

5. 3つのチェックを確認し、必要なら Nubboでの名前 を変更して 完了 を押します。バケットが バケット ページに表示され、エクスプローラーで開けるようになります。

   

お使いのキーでNubboがCORSルールを追加できない場合、ウィザードは CORS のステップに進みます。その場合は CORSルールの追加 の手順に従ってください。

限定キーでの接続

ステップ1: Cloudflare R2でバケットとキーを準備する

1. R2、Overview で Create bucket を押し、名前(小文字、数字、ハイフン)を付けます。リージョンを選ぶ必要はありません。データをEU内に保つ必要がある場合は、管轄区域 EU を選びます。エンドポイントもそれに合わせて変わります。
2. API Tokens を開き、Create Account API token を押します。
3. Object Read & Write 権限を選び、対象をバケットに限定します。
4. Access Key ID、Secret Access Key、Account ID をコピーします。

ステップ2: Nubboでバケットを接続する

1. バケット ページで バケットを接続 を押し、Cloudflare R2 を選んでから 限定キーで接続 を選びます。
2. Access Key ID、Secret Access Key、Account IDを貼り付けます。キーを確認 を押す前に、バケットと同じ 管轄区域 を選びます。キーを確認 を押します。
3. バケット名を正確に入力し、アクセスを確認 を押します。
4. ウィザードが CORS のステップに進み、追加すべきルールが表示されます。

CORSルールの追加

CORSルールにより、https://nubbo.app のブラウザからバケットのファイルをアップロード、ダウンロードできるようになります。ウィザードの CORS のステップに表示されるルールと同じものです。

1. R2 でバケットを開き、Settings に移動します。
2. CORS Policy で Add CORS policy を押し、JSON タブを選びます。
3. ルールを貼り付けて Save を押します。Cloudflareでは反映まで最大30秒かかることがあります。

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
    "AllowedOrigins": ["https://nubbo.app"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3600
  }
]

保存したらNubboに戻り、追加したので確認 を押します。お使いのキーにCORSを変更する権限があれば、自動で設定を試す で自動的に設定できます。

うまくいかないとき

料金

R2はデータ送信に料金がかからず、毎月の無料枠があります。詳しくは Cloudflare R2の無料枠 で説明しています。