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="">