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

結果図#

b1720fb74fa66d9a6a9753a15c8ace82

原理#

図源は Cloudflare R2 にホスティングされており、2 つの Workers を介して R2 に接続し、ランダムな横向き / 縦向きの画像を表示します。静的ページは Workers の URL を参照して、上記のインターフェースを実現します。

Cloudflare R2 バケットの作成#

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

Cloudflare ダッシュボードにアクセスし、R2 ページに移動します。

67207de47fd66c3a64566231a5757493

バケットの作成を選択します。
バケットに名前を付けて、作成をクリックします。
次のページに移動すれば、作成が完了しています。
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:524 と入力します。
ユーザー名：admin パスワード：cmd ウィンドウ内に表示されます。マウスの左ボタンを使用して端末内の内容を選択し、右ボタンをクリックしてコピーします。
注意：cmd 内でマウスの左ボタンをクリックまたはドラッグすると、選択状態になります。プログラムはシステムによってブロックされます。端末画面で右ボタンをクリックして解除する必要があります。プロセスがブロックされると、cmd のプロセス名に選択が追加されますので注意してください。以下はプログラムがブロックされた例です。端末画面で右ボタンをクリックして解除します。
これで、管理者として AList に正常にログインしました。最下部の管理をクリックします。
次の画面に移動します。AList がローカルで実行されているにもかかわらず、ユーザー名とパスワードを変更することをお勧めします。
アカウント情報を変更し、新しいアカウント情報で再度ログインします。
コントロールパネルに移動し、ストレージをクリックします。
追加を選択します。
詳細設定は次の通りです。マウントパスは AList の表示パスで、/R2/あなたのバケット名 を使用することをお勧めします。地域は auto です。
ホームページに戻り、ファイルをアップロードしてみてください。非常に速いことがわかります。
画像ホスティング用にディレクトリを作成し、横向きと縦向きの画像を分類します。後で Workers を使用して R2 に接続し、呼び出します。後の文では 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>` タグを使用して、最初の効果を得ることができます#

例：<img src="あなたのドメイン" alt="">
ランダム画像API