Cloudflare Workersのコード内でR2バケットを参照する方法

Cloudflare Workers内でR2バケットを簡単に参照する方法について説明します。以下に、R2バケットを操作するための基本的な例を示します。

1. wrangler.tomlファイルの設定

まず、wrangler.tomlファイルにR2バケットのバインディングを追加します。このファイルは通常、Workerプロジェクトのルートディレクトリにあります。

name = "summarize"
main = "worker.js"
compatibility_date = "2023-08-23"

[[r2_buckets]]
binding = "MY_BUCKET"
bucket_name = "<YOUR_BUCKET_NAME>"

ここで、<YOUR_BUCKET_NAME>を実際のR2バケットの名前に置き換えてください。

2. WorkerコードでR2バケットにアクセスする

次に、Workerのコード内でR2バケットにアクセスする方法を示します。以下は、基本的なCRUD操作（作成、読み取り、更新、削除）を実装した例です。

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const key = url.pathname.slice(1);

    // R2バケットへの操作
    if (url.pathname.startsWith('/r2/')) {
      try {
        switch (request.method) {
          case 'PUT':
            await env.MY_BUCKET.put(key, request.body);
            return new Response(`Put ${key} successfully!`);

          case 'GET':
            const object = await env.MY_BUCKET.get(key);
            if (object === null) {
              return new Response('Object Not Found', { status: 404 });
            }
            const headers = new Headers();
            object.writeHttpMetadata(headers);
            headers.set('etag', object.httpEtag);
            return new Response(object.body, { headers });

          case 'DELETE':
            await env.MY_BUCKET.delete(key);
            return new Response('Deleted!');

          default:
            return new Response('Method Not Allowed', {
              status: 405,
              headers: { Allow: 'PUT, GET, DELETE' },
            });
        }
      } catch (error) {
        console.error('Error accessing R2 bucket:', error);
        return new Response('Internal Server Error', { status: 500 });
      }
    }

    // HTML操作
    let response = await fetch(request);
    const contentType = response.headers.get('content-type');
    const isHtml = contentType && contentType.includes('text/html');

    if (isHtml) {
      let originalResponse = response.clone();

      try {
        const rewriter = new HTMLRewriter()
          .on('div.target-class', {
            element(element) {
              element.setAttribute('id', `custom-id-${element.index}`);
            }
          });

        // 特定のページでのみIDを付与
        if (url.pathname === '/samplesamplesample') {
          response = rewriter.transform(response);
        }

        let newHtml = await response.text();
        console.log('Transformed HTML:', newHtml); // デバッグ情報

        newHtml = newHtml.replace('</head>',
          `<link rel="preconnect" href="https://fonts.googleapis.com">
          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
          <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

          <link rel="stylesheet" href="https://samplesamplesample.r2.cloudflarestorage.com/<YOUR_BUCKET_NAME>/<YOUR_FILE_NAME>?v=1.1">
          </head>`
        );

        response = new Response(newHtml, {
          headers: {
            'Content-Type': 'text/html'
          }
        });
      } catch (error) {
        console.error('Error in HTMLRewriter:', error);
        return originalResponse; // エラー時はオリジナルのレスポンスを返す
      }
    }

    return response;
  },
};

3. CORS設定の確認

R2バケットのCORS設定が正しく適用されていることを確認します。以下のようなCORSポリシーを使用します：

[
  {
    "AllowedOrigins": [
      "<YOUR_CUSTOM_DOMAIN>",
      "<YOUR_ORIGIN_DOMAIN>"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD",
      "PUT",
      "POST",
      "DELETE"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "MaxAgeSeconds": 3000
  }
]

これにより、指定されたオリジンからのリクエストが許可されます。

4. パブリックアクセスの設定

R2バケットのパブリックアクセスを有効にする必要があります。以下の手順で設定を確認してください：

1. Cloudflareダッシュボードにログインします。

2. 左側のサイドバーから「R2」を選択します。

3. 設定したいバケットをリストから選択します。

4. バケットの詳細ページで「Settings」タブを選択します。

5. 「Public Access」セクションで、「Enable Public Access」をクリックします。

まとめ

これらの手順を実行することで、Cloudflare Workers内でR2バケットを簡単に参照し、操作することができます。CORS設定やパブリックアクセスの設定も確認し、適切に設定することで、クロスオリジンリクエストの問題を解消できます。