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

本文为：https://xfeed.app/notes/71448-15 のリメイク版

結果図#

a8d420168e3aff48d16074b9d9570b50_720

原理#

画像ソースは 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 を押します。
cmd にalist.exe serverと入力し、ウィンドウを閉じないでください。成功すると次のようになります。
ブラウザを開き、localhost:5244と入力すると AList コントロールパネルに入れます。
ユーザー名：admin パスワード：cmd ウィンドウ内にあります。マウスの左ボタンを使用して端末内の内容を選択し、右ボタンをクリックしてコピーします。
注意：cmd 内でマウスの左ボタンをクリックまたはドラッグすると、選択状態に入り、プログラムがシステムによってブロックされます。端末画面で右クリックして解除する必要があります。プロセスがブロックされると、cmd のプロセス名に選択が追加されますので注意してください。次の画像はプログラムがブロックされた例です。端末画面で右クリックすることで解除できます。
これで、AList に管理者として正常にログインしました！
一番下の管理をクリックします。
次のような画面に入ります。AList がローカルで実行されているにもかかわらず、ユーザー名とパスワードを変更することをお勧めします。
アカウントとパスワードを変更し、新しいアカウントとパスワードで再度ログインします。
コントロールパネルに入り、ストレージをクリックします。
追加を選択します。
詳細設定は次の通りです。マウントパスは AList の表示パスで、/R2/あなたのバケット名を使用することをお勧めします。地域はauto、ルートフォルダパスは/（画像では逆に記入されています Orz）
ホームページに戻ります。
ファイルをアップロードしてみます。
速度が非常に速いことがわかります！
あなたの画像ホスティング用にディレクトリを作成し、横向きと縦向きの画像を分類します。後で 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です。
設定 - トリガーでカスタムドメインを追加してアクセスできるようにします。
アクセス効果、毎回リフレッシュするたびに異なります！

HTML のタグを使用して参照することで、冒頭の効果を得ることができます#

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