Cloudflare R2+Workers！すぐに自分のクラウド上の画像ホスティングを構築しましょう！

結果図#

原理#

画像は Cloudflare R2 によってホストされ、2 つの Workers を介して R2 に接続してランダムな画像を表示します。静的ページは Workers の URL を参照して上記のインターフェースを実現します。

Cloudflare R2 ストレージバケットの作成#

R2 は実際にはオブジェクトストレージです。Cloudflare は 10G の無料ストレージと毎月 1000 万回の無料アクセスを提供します。

Cloudflare ダッシュボードにアクセスし、R2 ページに移動します。
ストレージバケットの作成を選択します。
ストレージバケットに名前を付けて、作成をクリックします。
次のページに移動すれば、作成は完了です。
R2 のホームページに戻ります。次に API を使用してファイル転送を行うため、R2 API トークンを作成する必要があります。「R2 API トークンを管理」をクリックします。
API トークンを作成をクリックします。
この API を使用して個々の R2 ストレージバケットを管理する必要があるため、オブジェクトの読み取りと書き込みを選択し、詳細設定は以下の通りです。
API トークンを作成すると、新しいページにトークンの詳細が表示されます。** 一度だけ表示されます！！！** このページを保持し、すべての情報を適切に保存するまで閉じないでください。閉じると、以前の古いキーを無効にするために API トークンをローテーションする必要があります。
R2 API トークンを適切に保存したことを確認し、次のステップに進みます。

ストレージバケットにファイルを追加#

Web インターフェースでのファイル転送は遅く、300MB を超えるファイルの転送をサポートしていません。ここでは、ローカルにデプロイした AList を使用して R2 ストレージバケットに接続し、高速アップロードを実現します。

筆者は Windows を使用しています。AList - Github Releaseにアクセスして、Windows 用の最新の実行ファイルをダウンロードします。
ダウンロードした圧縮ファイルを解凍し、その中のalist.exeを空のフォルダーに置きます。
検索ボックスをクリックし、cmd と入力して Enter を押します。

Snipaste_2024-08-27_05-03-46
4. cmd にalist.exe serverと入力し、ウィンドウを閉じないでください。成功すると以下のようになります。

5. ブラウザを開き、localhost:5244と入力すると AList コンソールにアクセスできます。

6. ユーザー名：admin パスワード：cmdウィンドウに表示されます。マウスの左ボタンを使用してターミナル内の内容を選択し、右クリックでコピーできます。

7. 注意：cmd 内でマウスの左ボタンをクリックまたはドラッグすると選択状態になり、プログラムがシステムによってブロックされます。ターミナル画面で右クリックして解除する必要があります。プロセスがブロックされると、cmd のプロセス名に選択が追加されますので注意してください。以下はプログラムがブロックされた例です。ターミナル画面で右クリックすることで解除できます。

8. これで、管理者として AList に成功裏にログインしました。

9. 一番下の管理をクリックします。

10. 以下のような画面に移動します。AList はローカルで実行されていますが、ユーザー名とパスワードを変更することをお勧めします。

11. アカウントとパスワードを変更し、新しいアカウントとパスワードで再度ログインします。

12. コンソールに移動し、ストレージをクリックします。

13. 追加を選択します。

14. 詳細設定は以下の通りです。マウントパスは AList の表示パスで、/R2/あなたのストレージバケット名を使用することをお勧めします。地域はauto、ルートフォルダパスは/です（図では逆に記入されています Orz）。

15. ホームページに戻ります。

16. ファイルをアップロードしてみます。

17. 速度が非常に速いことがわかります。

18. あなたの画像ホスティングのために、横向きと縦向きの画像を分類するためのディレクトリを作成します。後で Workers を使用して R2 に接続するために使用します。後文では/ri/hを横向きのランダム画像ディレクトリ、/ri/vを縦向きのランダム画像ディレクトリとして使用します。

Workers を作成し、R2 に接続#

Cloudflare ダッシュボードにアクセスし、Workers と Pages ページに移動します。
作成をクリックし、Workers を作成を選択し、名前を自由に付けて、デプロイをクリックします。
コードを編集を選択します。
コードを貼り付けます（ランダム横向き画像を作成）：

export default {
  async fetch(request, env, ctx) {
    // R2バケットの設定
    const bucket = env.MY_BUCKET;

    try {
      // /ri/hディレクトリ内のすべてのオブジェクトをリスト
      const objects = await bucket.list({ prefix: 'ri/h/' });

      // リストからランダムにオブジェクトを選択
      const items = objects.objects;
      if (items.length === 0) {
        return new Response('画像が見つかりません', { status: 404 });
      }
      const randomItem = items[Math.floor(Math.random() * items.length)];

      // 選択したオブジェクトを取得
      const object = await bucket.get(randomItem.key);

      if (!object) {
        return new Response('画像が見つかりません', { status: 404 });
      }

      // 適切なContent-Typeを設定
      const headers = new Headers();
      headers.set('Content-Type', object.httpMetadata.contentType || 'image/jpeg');

      // 画像の内容を返す
      return new Response(object.body, { headers });
    } catch (error) {
      console.error('エラー:', error);
      return new Response('内部サーバーエラー', { status: 500 });
    }
  },
};

左側のファイルアイコンをクリックします。
wrangler.tomlに以下を記入します：

[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "114514"

変更を保存し、右上のデプロイをクリックします。
設定 - 変数で R2 ストレージバケットのバインディングを見つけ、あなたのストレージバケットを追加します。変数名は上記のMY_BUCKETです。
設定 - トリガーであなたのカスタムドメインを追加してアクセスできるようにします。

アクセス効果、毎回リフレッシュするたびに異なります。

Snipaste_2024-08-27_06-12-43

HTML の <img> タグを使用して参照することで、最初の効果を達成できます#

例：<img src="あなたのドメイン" alt="">