HarioNote

<p>Cloudflare R2といえば、S3互換でありながらデータエグレス料金が無料なのがありがたいオブジェクトストレージサービスですね。（2024/05/21時点での情報です）</p>
<p>課金対象は</p>
<ul>
<li>ストレージ</li>
<li>クラスA操作（状態を変更する）</li>
<li>クラスB操作（既存の状態を読み取る）</li>
</ul>
<p>ですがそれぞれ以下の範囲では費用が発生しません。</p>
<ul>
<li>ストレージ：10 GB / 月</li>
<li>クラスA操作（状態を変更する）：100万 / 月</li>
<li>クラスB操作（既存の状態を読み取る）：1000万 / 月</li>
</ul>
<h2>やってみたいこと</h2>
<p>Cyberduckを使って、R2バケットに接続し、GUIで手軽にファイルをアップロードしたりダウンロードしたりするなど操作が手軽にできるようにしてみようと思います。<br>
※ 今回の作業の実行環境(Cyberduckのインストール先)はWindows OSのPCとなります。</p>
<h2>前提</h2>
<p>以下の環境が既に整っていることを前提として進めます。</p>
<ul>
<li>Cloudflareでアカウント登録を行っており、R2のバケットが作成可能な状態になっている。</li>
</ul>
<h2>手順</h2>
<p>※ スクショに日本語表示のUIと英語表示のUIが混じってます、すみません。よしなに解釈してください。</p>
<h3>1. Cloudflare R2のバケットを作成する</h3>
<p>Cloudflareの管理画面よりR2のページにアクセスし、「バケットを作成する」ボタンをクリック。<br>
<img src="https://storage.googleapis.com/newt-files/de56496e-77b2-47f5-a6cb-f83f4f06793f/2024-05-21_1.webp" alt="2024-05-21_1.webp"><br>
適当な名前をつけて、Locationは自動を選択してバケットを作成します。<br>
<img src="https://storage.googleapis.com/newt-files/84c6c8e4-92dd-481f-b588-adad06eb71f6/2024-04-23_2.webp" alt="2024-04-23_2.webp"><br>
↓<br>
<img src="https://storage.googleapis.com/newt-files/bee88615-7ab6-4d48-8963-4ddfeb45f2f1/2024-04-23_3.webp" alt="2024-04-23_3.webp"></p>
<p>作成したら「設定」タブで「S3 API」のURLを確認して控えておきましょう。<br>
<img src="https://storage.googleapis.com/newt-files/430c77dd-df0c-428c-9879-ff0a65480ad5/2024-04-23_11.webp" alt="2024-04-23_11.webp"></p>
<h3>2. 作成したバケットに接続する専用のR2 API Tokenを作成する</h3>
<p>Cyberduckから接続できるようにAPI Tokenを作成しておきます。<br>
R2のトップページに戻り右の「Manage R2 API Tokens」というリンクがあるのでクリックします。<br>
※見当たらない場合はブラウザのウィンドウサイズを大きくすると表示されるかもしれません。<br>
<img src="https://storage.googleapis.com/newt-files/ffcdaa4b-981c-4987-b9c9-7823432cd494/2024-04-23_4.webp" alt="2024-04-23_4.webp"></p>
<p>次の画面で「Create API token」をクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/c1ff47d8-4782-4d04-9090-8158fdb6923e/2024-04-23_5.webp" alt="2024-04-23_5.webp"></p>
<p>以下のような内容でAPIトークンを作成します。</p>
<ul>
<li>トークン名：適当に分かりやすい名前</li>
<li>権限：オブジェクト読み取りと書き込み</li>
<li>バケット指定：特定のバケットにのみ適用
<ul>
<li>先ほど作ったバケットを選択</li>
<li>※「権限」の選択肢によってはこの項目は表示されません。</li>
</ul>
</li>
<li>TTL：今回はお試しでやったので1年としました。</li>
<li>クライアントIPアドレスフィルタリング：今回は特に指定しない</li>
</ul>
<p><img src="https://storage.googleapis.com/newt-files/e32fd266-6574-40c6-85af-f3b77ece5eda/2024-04-23_6.webp" alt="2024-04-23_6.webp"></p>
<p>作成が完了すると以下のようにアクセスキーが生成され確認できます。<br>
これは一度しか表示されないのでコピーしてどこかに控えておいてください。<br>
<img src="https://storage.googleapis.com/newt-files/b8062044-15e7-405a-984a-498a965915c9/2024-04-23_7.webp" alt="2024-04-23_7.webp"></p>
<p>Cloudflareでの作業は一旦これで完了です。</p>
<h3>3. Cyberduckをインストールする</h3>
<p>CyberduckをPCにインストールします。（インストール方法に特に指定はありません）<br>
<a href="https://cyberduck.io/">https://cyberduck.io/</a><br>
のDownload（<a href="https://cyberduck.io/download/">https://cyberduck.io/download/</a>）へ遷移し。</p>
<p>Cyberduck for Windowsをダウンロードし、実行してインストーラを起動します。<br>
<img src="https://storage.googleapis.com/newt-files/26c94495-0e9b-457e-a416-4210c32d4613/2024-04-23_8.webp" alt="2024-04-23_8.webp"></p>
<p>インストールはインストーラの指示に従って進めばokです。</p>
<h3>4. CyberduckからR2バケットに接続する</h3>
<p>インストールしたCyberduckを起動します。<br>
<img src="https://storage.googleapis.com/newt-files/8ca1dafd-6811-479c-aaa7-471cc2a803fe/2024-04-23_9.webp" alt="2024-04-23_9.webp"></p>
<p>左上の「新規接続」をクリック<br>
<img src="https://storage.googleapis.com/newt-files/7d412c38-6542-431c-ad27-b6045e85ff9e/2024-04-23_10.webp" alt="2024-04-23_10.webp"></p>
<p>新規接続ウィンドウが表示されるので以下のように入力します。</p>
<table>
<thead>
<tr>
<th>項目</th>
<th>値</th>
<th>補足</th>
</tr>
</thead>
<tbody>
<tr>
<td>一番上のプルダウン</td>
<td>Amazon S3</td>
<td>Cloudflare R2がS3互換で同じプロトコルで接続するのでこれでok</td>
</tr>
<tr>
<td>サーバ</td>
<td>控えておいてS3 APIのURLの「https://」と末尾の「/cyberduck-sandbox」を省いた値を入力</td>
<td>「xxxxxx.r2.cloudflarestorage.com」的な値になるはず</td>
</tr>
<tr>
<td>アクセスキーID</td>
<td>token作成時に控えておいたやつ</td>
<td></td>
</tr>
<tr>
<td>シークレットアクセスキー</td>
<td>token作成時に控えておいたやつ</td>
<td></td>
</tr>
<tr>
<td>詳細設定 &gt; Path</td>
<td>cyberduck-sandbox</td>
<td>バケット名</td>
</tr>
</tbody>
</table>
<p>値に間違いがなければこれで接続できます。<br>
<img src="https://storage.googleapis.com/newt-files/3723f20a-7f44-426e-83d4-d94a1470c201/2024-04-23_12.webp" alt="2024-04-23_12.webp"></p>
<p>以上で完了です。<br>
試しに適当なファイルをドラッグアンドドロップしてみてください。ファイルがアップロードされ、CloudflareのR2の管理画面でも反映されていることが確認できるはずです。</p>
<p>もしこの接続をよく使うならブックマークに追加しておきましょう。<br>
ブックマークアイコンをクリックし、<br>
<img src="https://storage.googleapis.com/newt-files/a3338cd5-c13e-4bd4-a8c5-b5e59208f758/2024-04-23_13.webp" alt="2024-04-23_13.webp"><br>
ウィンドウ左下の「＋」ボタンをクリック。<br>
<img src="https://storage.googleapis.com/newt-files/e2ef74b2-d4c2-447c-b487-3e1add446840/2024-04-23_14.webp" alt="2024-04-23_14.webp"><br>
「ニックネーム」だけ分かりやすい名前に修正してウィンドウを閉じれば完了です。<br>
<img src="https://storage.googleapis.com/newt-files/eed0b1fa-f294-4a2e-9783-d00e61fd8c8e/2024-04-23_15.webp" alt="2024-04-23_15.webp"><br>
↓<br>
<img src="https://storage.googleapis.com/newt-files/c797324c-4f87-44c9-812b-627639f688f0/2024-04-23_16.webp" alt="2024-04-23_16.webp"></p>
<h2>【余談】「ネットワークドライブ割り当て」はできるのか</h2>
<p>ここまでできたらWindowsなら「ネットワークドライブ割り当て」もして楽にアクセスしたいですよね。<br>
「<a href="https://mountainduck.io/">Mountain Duck</a>」というCyberduckの姉妹ソフトを使えばサクッとできるっぽいですが、これは有料のソフトのようなので今回は断念しました。</p>
<p>次回はこの「ネットワークドライブ割り当て」までを<a href="https://rclone.org/">Rclone</a>を使って無料でできないか試したいなと思っています。</p>
<p>以上。</p>


#Cloudflare

Cloudflare R2のバケットにCyberduckで接続してみた