<p>Cloudflare Pagesにデプロイしたサイトに、カスタムドメインを紐づけて公開し、初期ドメイン（*.pages.dev）やプレビューURLなどのサイト設定を最適化するまでの手順をまとめました。</p><p>カスタムドメインはHostingerで取得したドメインを利用します。</p><p>CloudflafeはWorkersへの移行を推奨していますが、静的サイトのシンプルなサイトのためCloudflare Pagesで実施しました。いつかはWorkersへの移行をしないといけないですね...</p><h2 id="h0d376e5d4e">構成</h2><table><tbody><tr><th colspan="1" rowspan="1"><p>ホスティング</p></th><td colspan="1" rowspan="1"><p>Cloudflare Pages</p></td></tr><tr><th colspan="1" rowspan="1"><p>ドメイン管理</p></th><td colspan="1" rowspan="1"><p>Hostinger</p></td></tr><tr><th colspan="1" rowspan="1"><p>サイト保護</p></th><td colspan="1" rowspan="1"><p>Cloudflare Access</p></td></tr><tr><th colspan="1" rowspan="1"><p>リダイレクト</p></th><td colspan="1" rowspan="1"><p>ページ ルール（Page Rules）<br>一括リダイレクト（Bulk Redirects）</p></td></tr><tr><th colspan="1" rowspan="1"><p>ドメイン</p></th><td colspan="1" rowspan="1"><p>https://www.example.com ※</p></td></tr></tbody></table><p><span class="txt-small">※記事用にダミードメインを記載しています。</span></p><h2 id="h9f510f3156">やりたいこと</h2><ul><li>Hostingerで取得したドメインをCloudflare Pagesのサイトに紐づける</li><li>Cloudflare Accessでプレビュー用URLを保護（メールアドレス認証）</li><li>初期ドメインの<code>*.pages.dev</code>にアクセスされた際、カスタムドメインへリダイレクト</li><li>wwwなしとwwwありをwwwありに統一するリダイレクト設定</li></ul><p>過去にCloudflare Registrarで取得したドメインをCloudflare Pagesに紐づけたりCloudflare Accessのサイト保護を試したことがありましたが、今回新たに２つのことを学ぶことができました。</p><h2 id="hbcd2f2982e">今回新たに学んだこと</h2><h3 id="hc5d0fb7022">一括リダイレクトの設定は即時反映ではない</h3><p><a href="https://developers.cloudflare.com/pages/how-to/redirect-to-custom-domain/" target="_blank" rel="noopener noreferrer nofollow">Cloudflare公式ドキュメント</a>や参考記事の通りに設定し、何度確認してもリダイレクトされない...なぜリダイレクトされないのか。とかなり時間を費やしていました。</p><p>結論、反映には数分〜数十分かかる。</p><p>設定後すぐに確認するのではなく、5〜10分程度待ってから動作確認することをおすすめします。<br>焦らず待つことが大事でした😅</p><p>Cloudflareなら一括リダイレクトも即時だと思い込んでいました。設定の種類によって反映時間が異なることを知れたのは良い学びでした。</p><h3 id="ha2388f7dd4">Cloudflare Pagesへのカスタムドメインは複数設定できDNSレコードも自動登録される</h3><p>wwwなしのドメインしか設定していなかったの特に気にしていなかったのですが、ふとwwwあり（サブドメイン）はどうやって設定する？と。</p><p>Cloudflare Pagesのカスタムドメインに追加登録すればいいだけでした。（複数紐づけられることを知らなかった）</p><p>しかも、ドメインを追加するとDNSレコードも自動で登録してくれるのでとても簡単🙌</p><h2 id="hd6b7c39c0c">プロジェクトの連携から公開まで一気に</h2><h3 id="h8662404bf7">1. Cloudflare PagesとGitHubの連携</h3><p>1-1. Workers &amp; Pages &gt; アプリケーションを作成 &gt; 既存のGitリポジトリをインポート<br>1-2. リポジトリを選択しビルド設定</p><p>フレームワーク プリセットの「Astro」を選択すると、ビルドコマンド・ビルド出力ディレクトリが自動で選択されるので初期値のまま進めます。</p>

<h3 id="h05e96ab4e1"><strong>2. Cloudflare Accessの設定(プレビュー保護)</strong></h3><p>プレビュー用のURLを保護するため、Cloudflare Accessで認証を設定します。</p><blockquote><p>When a preview deployment is published, it is given a unique, hash-based address — for example, &lt;hash&gt;.&lt;project&gt;.pages.dev. These are atomic and may always be visited in the future. However, Pages also creates an alias for git branch&apos;s name and updates it so that the alias always maps to the latest commit of that branch.</p><p>プレビューデプロイメントが公開されると、ハッシュベースの一意なアドレスが割り当てられます。例えば、&lt;hash&gt;.&lt;project&gt;.pages.dev のような形式です。これらはアトミック(不変)であり、将来いつでもアクセスできます。しかし、Pagesは git ブランチ名のエイリアスも作成し、そのエイリアスが常にそのブランチの最新のコミットにマッピングされるように更新します。</p><p><a href="https://developers.cloudflare.com/pages/configuration/preview-deployments/#preview-aliases" target="_blank" rel="noopener noreferrer nofollow">Preview aliases</a></p></blockquote><p>過去に書いた記事をもとに設定をします。</p><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://841-biboroku.info/entry/cloudflare-access/" data-iframely-url="https://cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2F841-biboroku.info%2Fentry%2Fcloudflare-access%2F&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="https://cdn.iframe.ly/embed.js" charset="utf-8"></script>

<h3 id="hf932ac5ee8">3. Cloudflareでドメインを追加（ネームサーバー取得）</h3><p>CloudflareでドメインをDNS管理下に置くための準備です。</p><p>サイドバー &gt; ドメイン &gt; ドメインのオンボード</p><p>3-1. ドメインを入力<br>3-2. DNS レコードのクイックスキャンを選択<br>3-3. 続行<br>3-4. Freeプランを選択<br>3-5. アクティベーションに進む</p><p>Cloudflareのネームサーバーが表示されます。</p>

<h3 id="hc9f0e643ca">4. Hostingerでネームサーバーを変更</h3><p>Hostingerの管理画面で、ドメインのネームサーバーをCloudflareで表示された情報に変更します。</p>

<h4 id="h6edf7f2fbf">DNS浸透を待つ...</h4><p>思っていたよりもすぐに反映されました！</p><h3 id="h73606e2c9e">5. Cloudflare Pagesにカスタムドメインを紐づける</h3><p>Cloudflare Pagesのプロジェクト &gt; カスタムドメイン &gt; カスタムドメインを設定</p><p>5-1.<code>www.example.com</code> (メインドメイン)<br>5-2.<code>example.com</code> (wwwなし ※後ほどリダイレクト)<br>5-3.ドメインを入力 &gt; 続行 &gt; ドメインをアクティブにする</p><p>設定後、「初期化中」→「アクティブ」に切り替わります。</p><p>この時点でDNSレコードが自動で追加されるので、手動でのレコード追加は不要でした◎</p>

<h3 id="ha9f12847fc">6. wwwなし→wwwありへのリダイレクト設定</h3><p>ドメイン &gt; 該当ドメイン &gt; ルール &gt; ページ ルール &gt; ページルールを作成</p><p>6-1. URL: <code>xample.com/*</code><br>6-2. 設定: URLの転送<br>6-3. ステータス コード: 301<br>6-4. 転送先 URL:<code>https://www.example.com/$1</code></p>

<h3 id="ha8226f0d17">7. *.pages.devドメインからカスタムドメインへの一括リダイレクト</h3><p>ドメイン &gt; 該当ドメイン &gt; ルール &gt; 設定 &gt; 一括リダイレクト</p><h4 id="h2e261b290b"><strong>一括リダイレクトリストの作成</strong></h4><p>7-1. リスト名を入力 &gt; 次へ<br>7-2. 手動でURLリダイレクトを追加<br>7-3. 設定項目</p><ul><li>ソース URL: <code>sample.pages.dev</code></li><li>ターゲット URL: <code>https://www.example.com/</code></li><li>ステータス: 301</li><li>パラメータを編集する（以下3つにチェック）<ul><li>クエリ文字列を保存する</li><li>サブパスの一致</li><li>パス サフィックスを保持する</li></ul></li></ul>

<h4 id="hb6d42e6b97">リダイレクト ルールの作成</h4><p>次へ &gt; リダイレクト ルールに進む</p><ul><li>ルール名⇒例) 初期ドメインリダイレクト</li><li>リスト⇒先ほど作成したリストを選択</li><li>保存してデプロイする</li></ul><p>📝参考サイト</p><ul><li><a href="https://dev.classmethod.jp/articles/cloudflare-pages-access/" target="_blank" rel="noopener noreferrer nofollow">Cloudflare Pages のドメイン *.pages.dev にアクセス制限をかける</a></li><li><a href="https://mosh0x0.com/posts/CloudflarePages-custom-domain-redirect/" target="_blank" rel="noopener noreferrer nofollow">Cloudflare Pagesのカスタムドメインへ元のドメインからリダイレクト</a></li><li><a href="https://astrock.gdgd.win/posts/cf-redirects/" target="_blank" rel="noopener noreferrer nofollow">Cloudflare Pages で pages.dev から カスタムドメインへリダイレクト</a></li></ul>

Cloudflare Pages *.pages.devからカスタムドメインへの一括リダイレクトとドメイン設定の最適化

<p>今までこの備忘録ブログのOGP画像は、microCMSで使えるimgixのURLパラメータを使って画像に記事タイトルのレイヤーを重ねて色を設定した画像を連携していました。</p><p>OGP画像を確認したところ記事タイトルが長くパラメータが肥大化してしまい、うまく表示されないケースがあったことに最近気づきました😭</p><p>そこでこれを機に前から実装してみたかったCloudflare Workers + R2で画像を生成・保存する仕組みを作ることにしました。画像の生成はCloudinaryを使います。</p><p>imgixを使った画像加工についてまとめた記事は「📝<a href="https://841-biboroku.info/entry/imgix-create-ogp/">microCMS×imgixでOGPを自動生成する</a>」をご覧ください。</p><h2 id="h06e76817df">💡この記事で実現できること</h2><ul><li><strong>OGP自動生成</strong><ul><li>記事URLにアクセスがあった際、microCMSからタイトルやカテゴリ色を動的に取得し、Cloudinaryで画像を合成。</li></ul></li><li><strong>Cloudinaryでの画像加工</strong><ul><li>日本語<code>Noto Sans JP</code>フォントを利用。パラメータの組み合わせで複数レイヤーと効果を使用した加工。</li></ul></li><li><strong>コストパフォーマンスと高速配信</strong><ul><li>一度生成した画像は<strong>Cloudflare R2</strong>にキャッシュ。<br>2回目以降は画像生成をスキップし、R2から即座にレスポンスを返すことでCloudinaryの無料枠を節約。</li></ul></li><li><strong>microCMS連動のキャッシュ自動削除</strong><ul><li>microCMSで記事を更新・削除した際、Webhook（カスタム通知）を飛ばして<strong>R2上の古いキャッシュ画像を自動で削除</strong>。<br>常に最新の情報を反映。</li></ul></li></ul><h3 id="hac02c8f33c">OGP生成・配信のフロー</h3><ol><li>OGP画像URLへアクセス（SNSでのシェアや直接アクセス）</li><li>Cloudflare Workersが起動</li><li>R2キャッシュの確認 <ul><li>キャッシュあり： R2から画像を返して終了（爆速＆低コスト）</li><li>キャッシュなし： 次のステップへ</li></ul></li><li>microCMSから記事情報を取得（タイトル、カテゴリ色、IDなど）</li><li>Cloudinaryで画像を動的生成<ul><li>R2にある素材画像（ベース画像・1px画像）とフォントを組み合わせて合成</li></ul></li><li>生成画像をR2に保存（次回のアクセスのためにキャッシュ）</li><li>画像をレスポンスとして返却</li></ol><h3 id="h1c45e48120">キャッシュ削除のフロー（Webhook）</h3><ul><li>microCMSでの記事更新・削除を検知</li><li>Workersの削除専用エンドポイントを実行</li><li>HMAC署名検証でリクエストの正当性を確認</li><li>R2上の該当キャッシュ画像を削除（これで次回のアクセス時に新デザインで再生成される）</li></ul><h2 id="h40cdd7aa75">まずはCloudinary+Cloudflare R2とCloudflare Imagesの比較</h2>

<p>はじめはCloudflareでまとめようと画像の加工にCloudflare Imagesを使おうと思いました。</p><p>しかしCloudflare Imagesはリサイズや圧縮には優れていますがレイヤーの重ね合わせや、動的なテキスト合成の自由度が低かったため運用の柔軟性とコストを考え、今回はCloudinary＋R2を採用することにしました。</p><table><tbody><tr><th colspan="1" rowspan="1"><p><strong>比較項目</strong></p></th><th colspan="1" rowspan="1"><p><strong>Cloudinary+Cloudflare R2</strong></p></th><th colspan="1" rowspan="1"><p><strong>Cloudflare Images</strong></p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>無料枠</strong></p></td><td colspan="1" rowspan="1"><p><strong>最強。</strong><br>Cloudinary(25クレジット)<br>+R2(10GB)+Workers(10万件リクエスト/日)</p></td><td colspan="1" rowspan="1"><p>月5,000回まで。<br>超えると有料。</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>加工自由度</strong></p></td><td colspan="1" rowspan="1"><p><strong>非常に高い。</strong><br>文字入れやレイヤー加工が自由自在。</p></td><td colspan="1" rowspan="1"><p>基本的なリサイズ・圧縮がメイン。</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>構成</strong></p></td><td colspan="1" rowspan="1"><p>複雑（Workersのコード管理が必要）</p></td><td colspan="1" rowspan="1"><p>シンプル（スイッチ一つで完結）</p></td></tr></tbody></table>

<h2 id="h8ab2fbd718">1. Cloudflare R2の準備</h2><p>生成した画像のアップロード先のバケットを作成します。</p><ol><li>Cloudflareダッシュボードの「ストレージとデータベース＞R2オブジェクトストレージ＞概要」を開き「バケットを作成」をクリック。</li><li>名前を入力（例:<code>blog-ogp-images</code>）して作成。</li></ol>

<h2 id="h4cbf3d38e4">2. WorkersとR2の紐付け（バインディング）</h2><h3 id="h308f35ce97">2-1. Workersの作成</h3><ol><li>コンピューティングとAI</li><li>Workers &amp; Pages</li><li>アプリケーションを作成する</li><li>Ｈello Ｗorldを開始する</li><li>Worker nameを入力（例：<code>ogp-generator</code>）</li><li>（一旦）デプロイ</li></ol><p>※後ほどコードを書き換えます。</p><h3 id="h5d4f5a773f">2-2. バインディングの設定</h3><ol><li>作成したWorkersを開く</li><li>バインディングを開く</li><li>バインディングを追加</li><li>R2 バケットを選択しバインディングを追加</li><li>Workersで使うR2バケット名の変数名（例：<code>OGP_R2_BUCKET</code>）を入力し、「1. Cloudflare R2の準備」で作成したバケットを選択。</li><li>デプロイ</li></ol><h3 id="he5eb6531bc">2-3. ランタイムの設定</h3><ol><li>設定＞ランタイム＞互換性フラグ</li><li>nodejs_compatを追加</li></ol>

<h2 id="h07965a6c6a">3. Workersのコードを編集（Cloudinaryとの連携）</h2><p>今回はCloudinaryを画像加工エンジンとして使い、その結果をR2にキャッシュさせる仕組みにしました。</p>

export default {
  async fetch(request, env) {
    // 1. 環境変数のバリデーション
    const validationError = validateEnvironment(env);
    if (validationError) return validationError;

    const SITE_URL = env.SITE_URL;
    const url = new URL(request.url);

    // ---------------------------------------------------------
    // A. Webhookによるキャッシュ削除ロジック
    // ---------------------------------------------------------
    // microCMSなどのWebhook通知を受け取ってR2上の画像を削除します
    if (url.pathname.endsWith("/★delete-cache-endpoint")) {
      let targetId = url.searchParams.get('id'); 

      if (request.method === "POST") {
        const bodyText = await request.text();

        // Webhook署名検証 (Secretが設定されている場合)
        if (env.MICROCMS_WEBHOOK_SECRET) {
          const signature = request.headers.get('X-Microcms-Signature');
          const expected = await createSignature(bodyText, env.MICROCMS_WEBHOOK_SECRET);
          if (signature !== expected) {
            return new Response("Unauthorized", { status: 401 });
          }
        }

        try {
          const body = JSON.parse(bodyText);
          // microCMSのJSON構造からID（slugなど）を抽出
          targetId = body.contents?.new?.publishValue?.★field_name
            || body.contents?.old?.publishValue?.★field_name
            || targetId;
        } catch (e) {
          console.log("JSON parse failed. Using query parameter.");
        }
      }

      if (!targetId) return new Response("ID missing", { status: 400 });

      try {
        const R2_KEY = `${targetId}.png`;
        await env.OGP_R2_BUCKET.delete(R2_KEY);
        return new Response(`Deleted: ${R2_KEY}`, { status: 200 });
      } catch (e) {
        return new Response(`Delete failed: ${e.message}`, { status: 500 });
      }
    }

    // ---------------------------------------------------------
    // B. 画像取得・生成ロジック
    // ---------------------------------------------------------
    const filename = url.pathname.split('/').pop()?.replace('.png', '');

    // 不正なアクセスやルートへのアクセスはブログトップへリダイレクト
    if (!filename || filename === "" || filename === "favicon.ico") {
      return Response.redirect(SITE_URL, 301);
    }

    const R2_KEY = `${filename}.png`;

    // 素材画像（背景や1px画像）はそのままR2から返却する
    if (filename === "★base_image_name" || filename === "★dot_image_name") {
      const material = await env.OGP_R2_BUCKET.get(R2_KEY);
      if (material) {
        return new Response(material.body, { headers: { 'Content-Type': 'image/png' } });
      }
      return new Response('Material Not Found', { status: 404 });
    }

    try {
      // 2. R2キャッシュチェック
      const cached = await env.OGP_R2_BUCKET.get(R2_KEY);
      if (cached) {
        return new Response(cached.body, { headers: { 'Content-Type': 'image/png' } });
      }

      // 3. データソース（microCMS等）から記事情報を取得
      const apiRes = await fetch(
        `https://${env.MICROCMS_SERVICE_ID}.microcms.io/api/v1/★endpoint?filters=★field_name[equals]${filename}`,
        { headers: { 'X-MICROCMS-API-KEY': env.MICROCMS_API_KEY} }
      );
      const data = await apiRes.json();

      if (!data.contents || data.contents.length === 0) {
        return Response.redirect(SITE_URL, 302);
      }

      const { title, category } = data.contents[0];
      const themeColor = (category?.[0]?.imgColor || '3d50f5').replace('#', '');

      // 4. Cloudinary URL構築
      const cloudinaryUrl = buildCloudinaryUrl({
        cloudName: env.CLOUDINARY_NAME,
        title,
        themeColor,
        workerDomain: url.host
      });

      // 5. Cloudinaryから画像を取得
      const imageRes = await fetch(cloudinaryUrl);
      if (!imageRes.ok) throw new Error('Cloudinary Error');

      const imageBuffer = await imageRes.arrayBuffer();

      // 6. 次回のためにR2にキャッシュ保存
      await env.OGP_R2_BUCKET.put(R2_KEY, imageBuffer, {
        httpMetadata: { contentType: 'image/png' },
      });

      return new Response(imageBuffer, { headers: { 'Content-Type': 'image/png' } });

    } catch (e) {
      console.error(e.message);
      return Response.redirect(SITE_URL, 302);
    }
  }
};

/**
 * 署名作成 (HMAC-SHA256)
 */
async function createSignature(body, secret) {
  const encoder = new TextEncoder();
  const key = await crypto.subtle.importKey(
    "raw", encoder.encode(secret),
    { name: "HMAC", hash: "SHA-256" },
    false, ["sign"]
  );
  const signed = await crypto.subtle.sign("HMAC", key, encoder.encode(body));
  return Array.from(new Uint8Array(signed))
    .map(b => b.toString(16).padStart(2, "0"))
    .join("");
}

/**
 * 環境変数のチェック
 */
function validateEnvironment(env) {
  const vars = ['OGP_R2_BUCKET', 'API_SERVICE_ID', 'API_KEY', 'CLOUDINARY_NAME', 'SITE_URL'];
  for (const v of vars) {
    if (!env[v]) return new Response(`Missing env var: ${v}`, { status: 500 });
  }
  return null;
}

/**
 * Cloudinaryの変換URLを生成
 */
function buildCloudinaryUrl({ cloudName, title, themeColor, workerDomain }) {
  const baseImageUrl = `https://${workerDomain}/★base_image_name.png`;
  const BASE_IMAGE_B64 = safeBase64(baseImageUrl);
  const encodedTitle = encodeURIComponent(title).replace(/,/g, '%252C');
  const ONE_PIXEL_URL = `https://${workerDomain}/★dot_image_name.png`;
  
  return [
    // Cloudinaryの画像生成URL
  ].join('/');
}

/*
 * Cloudinary用のURLセーフなBase64エンコード
 */
function safeBase64(str) {
  return Buffer.from(str)      // 文字列をBufferに変換
    .toString('base64')        // Base64文字列へ
    .replace(/\+/g, '-')       // URLセーフ化（+ を -）
    .replace(/\//g, '_')       // URLセーフ化（/ を _）
    .replace(/=+$/, '');       // パディング削除
}

<h2 id="h98b1dc753e">4. microCMSのWebhookでキャッシュを自動削除</h2><p>記事を更新したのにOGPが古いままという事を防ぐため、microCMSのWebhook機能を使って、記事公開・更新時にR2のキャッシュを自動で削除する設定を行います。</p><h3 id="hf5e9d18e75">4-1. microCMS側の設定</h3><ol><li>microCMSの管理画面で「API設定」&gt;「Webhook」&gt; 「追加」をクリック</li><li>「カスタム通知」を選択</li><li>以下の項目を入力<ul><li>Webhookの名前</li><li>URLの入力（Workersの実行エンドポイント）</li><li>通知タイミング（実行したいタイミングにチェック、今回はコンテンツの公開と削除にチェック）</li><li>シークレット（認証用）</li></ul></li></ol>

<h3 id="ha79af6bbb4">4-2. Workersの環境変数を設定</h3><p>Workers側で、先ほど決めた「シークレット」を環境変数<code>MICROCMS_WEBHOOK_SIGNATURE</code>で登録します。</p>

<h2 id="hcd6ce4ca04">😞試行錯誤したポイント</h2><h3 id="h3c1a82dbd7">👿R2バケットが「ない」と怒られる</h3><p>Workersにいくつか環境変数を読み込んでいる箇所があり、R2のバケット名も環境変数<code>env.OGP_R2_BUCKET</code>で設定していたところ、バケット名がない・空だ！とエラーがでて進まない...</p><p>WorkersでR2を扱う際、バケット名は「環境変数」として登録するのではなく、「バインディング」という設定が必要でした。これをしないと<code>env.OGP_R2_BUCKET</code>が空（undefined）になり、エラーで進めなくなります。</p><h3 id="h7743d32f3c">👿Cloudinaryでカスタムフォントが適用されない</h3><p>Cloudinaryで「Noto Sans JP」などのデフォルトで指定ができない日本語フォントを使うには、単にMedia Libraryにアップロードするだけでは不十分でした。</p><p>使用できるようにするには、管理画面の<code>Settings &gt; Upload &gt; Upload presets</code>で設定が必要です。</p>

<p>Delivery Typeを「Authenticated」、Access Controlを「Public」設定したプリセットでアップロードしたアセットを使わないと、Workers内のCloudinary画像生成URLで呼び出すことができません。</p><p>CloudinaryのURL構築で<code> l_text:★YourFontName</code>を使う際、フォント名にはAuthenticatedでアップロードした際の<strong>Public ID</strong>を指定する必要があります。</p>

<p>📝参考</p><ul><li><a href="https://blog.kentarom.com/posts/98c62e79-836b-447b-910f-181615d70758" target="_blank" rel="noopener noreferrer nofollow">Cloudinaryを利用して、OGP画像を動的生成する</a></li><li><a href="https://memory-lovers.blog/entry/2021/09/09/070000" target="_blank" rel="noopener noreferrer nofollow">CloudinaryでOGP画像を設定する</a></li></ul><h3 id="hd2d542302f">👿imgixの多重ブレンドをCloudinaryで再現する</h3><p>imgix（microCMS標準）で作り込んでいたレイヤー加工にも苦戦しました。</p><p>もともと使っていたimgixのクエリは、単に文字を載せるだけでなく、背景色と素材画像を高度に合成していました。</p><h4 id="h7ca08f0168">🖼️imgixの生成URL</h4>

`https://images.microcms-assets.io/assets/.../ファイル名.png?
  w=1200&h=630
  &bg=${color}                // 1. 背景色の指定
  &blend-mode=multiply        // 2. 乗算で背景と合成
  &monochrome=95${color}      // 3. ベース画像を単色化
  &blend64=${base64url(text)} // 4. 文字を乗せる
  &fm=png`

<h4 id="h6794eeeb07">🖼️Cloudinaryの生成URL</h4>

return [
  `https://res.cloudinary.com/${cloudName}/image/fetch`,
  `w_1200,h_630,c_fill,b_rgb:${themeColor},e_colorize:100,q_auto`, // 塗り
  `l_fetch:${BASE_IMAGE_B64},w_1200,h_630,c_fill,e_replace_color:${themeColor}:1:979C9F,fl_layer_apply`,  // ベース画像＋色置き換え
  `co_rgb:${themeColor},l_text:★YourFontName_50_bold:${encodedTitle},w_1000,c_fit,fl_layer_apply,g_west,x_100`,  // タイトル
  `f_png`,
  ONE_PIXEL_URL  // 1px画像
].join('/');

<p>ロゴ色を一番下の塗りとタイトルの色に合わせるため、ベース画像の中のロゴ色を置き換える必要がありました。</p><p>はじめはimgixのときと同じようにグレースケール・乗算プロパティで再現しようと思いましたが、imgixとCloudinaryでは処理が違うようで再現できませんでした。</p><pre><code>e_replace_color:${themeColor}:1:979C9F</code></pre><p>そこで使用している色が<code>#979C9F</code>の単色ということもあり、しきい値を1に設定して<code>${themeColor}</code>に置き換えることに成功しました🌟</p><h4 id="h80e76f8c9e">画像の圧縮</h4><p>はじめは圧縮設定をしていませんでしたが<code>q_auto</code>を設定することで、画像サイズが22KB→9.59KBまで圧縮されました。</p>

<h3 id="h8ed8fbce7d">👿キャッシュ削除が動かない？</h3><p>カスタムドメイン経由のWebhookだと削除が動かない現象がありました。</p><p>おそらくCloudflareのWAFなどがmicroCMSからのリクエストをブロックしていた可能性があります。Workersの初期ドメイン（*.workers.dev）を通知先にすることで解決しました。</p><h2 id="h49debcb9ef">最後にデバッガーでOGPチェック</h2><p>WorkersのプレビューやOGP画像のURLにアクセスすると問題なく生成されることを確認できました。</p><p>普段使うチェッカーやデバッガーでも確認すると、生成されるものとされないものが...チェッカーツールでは初回生成時の処理時間によるタイムアウトや、Workers内でのリダイレクト処理が影響しているのかもしれません。</p><h3 id="h6bce815a3e">👏自動生成される</h3><ul><li>X（旧Twitter）のポスト</li><li>Facebookシェアデバッガー</li><li>microCMSのリッチエディタ内の埋め込み</li></ul><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://841-biboroku.info/entry/workers-r2-cloudinary-ogp-automation/" data-iframely-url="https://cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2F841-biboroku.info%2Fentry%2Fworkers-r2-cloudinary-ogp-automation%2F&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="https://cdn.iframe.ly/embed.js" charset="utf-8"></script><p><strong>自動生成されない</strong></p><ul><li>OGP画像確認｜ラッコツールズ</li><li>Chrome拡張ツール：Alt &amp; Meta Viewer</li></ul><h2 id="ha214098e44">まとめ</h2><p>設定の罠にハマり、何度もURLを書き換えた苦労はありましたが、その分、既存のツールでは届かない「かゆいところに手が届く」自分専用の機能を作ることができました。</p><p>OGPのURLを短縮しつつ、Cloudflare R2やCloudinaryといった初めて使用するサービスを組み合わせることができ良い経験となりました🙌</p>

microCMSのimgixで自動生成していたOGP画像をCloudflare WorkersとR2×Cloudinaryに変えてみた

<p>「<a href="https://841-biboroku.info/entry/edge-runtime-keyword-search/" target="_blank" rel="noopener noreferrer nofollow">CloudflareのEdge RuntimeとmicroCMSのqパラメータを使ってキーワード検索結果ページを作る</a>」で作成した検索ページをもとにmicroCMSのプレビュー画面を作成しました。</p><p>バージョン：Next.js v13.5.4（Pages Router）、@cloudflare/next-on-pages CLI v.1.8.6、microcms-js-sdk v2.7.0</p><h2 id="h74bfa52507">microCMSに画面プレビューボタンを表示する</h2>

<ol><li>API設定＞画面プレビューを開く</li><li>遷移先URLを設定<br>https://プレビュー表示させるドメイン/プレビュー用のページ/?id={CONTENT_ID}&amp;draftKey={DRAFT_KEY}</li><li>画面プレビューボタンの表示をONにする</li><li>変更する</li><li>編集画面に「画面プレビュー」ボタンが表示される</li></ol><p>💬余談<br>ローカルで開発してるときは遷移先URLに「http://localhost:3000/」を設定してすぐ確認できるようにしてました。</p><h2 id="h514049fd38">プレビュー用ページ</h2>

import type {
  GetServerSideProps,
  InferGetServerSidePropsType,
  NextPage,
} from "next";
import { getBlogDetail, getAllCategoryList } from "@/libs/microcms";
import type { Blog, Category } from "@/libs/microcms";
import { NextSeo } from "next-seo";
import { CategoryList } from "@/components/CategoryList";
import { Article } from "@/components/Article";

export const runtime = "experimental-edge";

type Props = {
  post: Blog;
  categories?: Category[];
} & InferGetServerSidePropsType<typeof getServerSideProps>;

const Page: NextPage<Props> = ({ post, categories }) => {
  if (post)
    return (
      <>
        <NextSeo noindex={true} />
        <Article post={post} />
        <CategoryList categories={categories} />
      </>
    );
};
export default Page;

export const getServerSideProps: GetServerSideProps = async (context) => {
  const postId = context.query.id;
  const draftKey = context.query.draftKey;
  const post = postId
    ? await getBlogDetail(`${postId}`, {
        draftKey: `${draftKey}`,
      })
    : null;
  const categories = await getAllCategoryList({ fields: "title,slug" });

  if (!post) {
    return {
      notFound: true,
    };
  }

  const data = {
    post,
    categories,
  };

  return {
    props: data,
  };
};

<h4 id="ha2d7bf771c">エッジランタイムの設定</h4><p><a href="https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/#4-ensure-all-server-rendered-routes-use-the-edge-runtime" target="_blank" rel="noopener noreferrer nofollow">Ensure all server-rendered routes use the Edge Runtime</a></p><p>Cloudflare PagesでSSRするときに必要な設定をプレビューページに設定します。</p><pre><code>export const runtime = &quot;experimental-edge&quot;;</code></pre><h4 id="h6b6fe95a5b">コンテントIDと下書き状態を取得するdraftKeyのクエリ文字列を取得</h4>

const postId = context.query.id;
const draftKey = context.query.draftKey;
const post = postId
  ? await getBlogDetail(`${postId}`, {
      draftKey: `${draftKey}`,
    })
  : null;

<p>getBlogDetail()はmicroCMS SDKの<a href="https://github.com/microcmsio/microcms-js-sdk?tab=readme-ov-file#get-single-content-with-parameters" target="_blank" rel="noopener noreferrer nofollow">getListDetail()</a>を使って記事を取得するようにしています。</p><p>これで終わりです。</p><p>あとはほぼ検索結果ページと同じ仕組みにしているので、簡単に実装ができました。</p>

Cloudflare Pages×Next.jsで実装するmicroCMSのプレビュー画面

<p>rss-parser　エラーでNG</p><pre><code>02:15:00 [ERROR] [vite] x Build failed in 1.76s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in "http" imported from "node_modules\rss-parser\lib\parser.js". Consider disabling ssr.noExternal or remove the built-in dependency.</code></pre><p>xml2js エラーでNG</p><pre><code>02:15:37 [ERROR] [vite] x Build failed in 1.43s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in "events" imported from "node_modules\xml2js\lib\parser.js". Consider disabling ssr.noExternal 
or remove the built-in dependency.</code></pre><p>fast-xml-parser　で何とかできた。<br><a href="https://nemunote.com/blog/astro-v3-to-v4.5-updates-and-new-features/" target="_blank" rel="noopener noreferrer">https://nemunote.com/blog/astro-v3-to-v4.5-updates-and-new-features/</a><br>inferSize<br>画像　をassets使う<br>アメブロはない。<br>はてぶは&lt;enclosure url=""&gt;<br>オプションをつけておかないとurlの部分が削除されて取得できなかった</p><pre><code>    const parser = new XMLParser({
      ignoreAttributes: false, // 属性を無視しない
    });

</code></pre><p>qiitaはAtom形式でアイキャッチ画像がない<br>zenはrssでアイキャッチある&lt;enclosure url=""&gt;<br>note.comはrssで&lt;media:thumbnail&gt;</p>

<p>自身のnoteに書いた記事をRSSフィードを利用してAstroに一覧表示するための手順をまとめた記事です。</p><p><span class="txt-small">※RSSを配信しているサービスの利用規約やルールをご確認ください。</span></p><h2 id="ha6370ccfe0">設定と完成したコード</h2><h3 id="h6ae33e7349">設定</h3><ul><li>Astro 4.7.1</li><li>Astroの出力モード<code>hybrid</code></li><li>Cloudflare Pagesの互換性フラグに<code>nodejs_compat</code>を設定</li><li>XMLデータをJSON形式に変換するパッケージ<code>npm i fast-xml-parser -D</code></li></ul><h3 id="h9a8d5667c1">このコードでできること</h3><ul><li>複数のRSSフィードから記事を取得して日付が新しい順に並び替えて10件表示</li><li>RSS 2.0、Atom形式</li><li>日付をYYYY.MM.DD形式</li></ul>

import { XMLParser } from "fast-xml-parser";

// 記事のインターフェースを定義
interface Article {
  title: string;
  link: string;
  thumb: string | null;
  description: string;
  pubDate: string;
}

// RSSフィードを取得してJSONデータに変換する関数
export async function fetchRSS(url: string): Promise<any> {
  try {
    const response = await fetch(url); // URLからRSSフィードをフェッチ
    const xmlData = await response.text(); // フェッチしたデータをテキストとして取得
    const parser = new XMLParser({
      ignoreAttributes: false, // 属性を無視しない設定
    });
    const jsonData = parser.parse(xmlData); // XMLデータをJSONに変換
    return jsonData;
  } catch (error) {
    console.error("Error fetching or parsing RSS feed:", error); // エラーが発生した場合にコンソールに表示
    throw error; // エラーをスロー
  }
}

// 日付をYYYY.MM.DD形式にフォーマットする関数
function formatDate(date: Date): string {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  return `${year}.${month}.${day}`;
}

// アイテムからサムネイルURLを抽出する関数
function extractThumb(item: any): string | null {
  if (item.enclosure && item.enclosure.url) {
    return item.enclosure.url;
  } else if (item["media:thumbnail"]) {
    return item["media:thumbnail"];
  } else if (Array.isArray(item.link)) {
    const link = item.link.find(
      (l: any) => l.rel === "enclosure" || l.type?.startsWith("image")
    );
    return link ? link.href : null;
  }
  return null;
}

// RSSアイテムをArticleインターフェースにパースする関数
function parseRSSItem(item: any, isAtom: boolean = false): Article {
  return {
    title: item.title,
    link: isAtom ? item.link?.href || item.link : item.link,
    thumb: extractThumb(item),
    description: item.description || item.summary || item.content,
    pubDate: formatDate(
      new Date(item.pubDate || item.updated || item.published)
    ),
  };
}

// RSS 2.0形式のJSONデータをArticle配列にパースする関数
function parseRSS2(jsonData: any): Article[] {
  const items = Array.isArray(jsonData.rss.channel.item)
    ? jsonData.rss.channel.item
    : [jsonData.rss.channel.item];
  return items.map((item: any) => parseRSSItem(item));
}

// Atom形式のJSONデータをArticle配列にパースする関数
function parseAtom(jsonData: any): Article[] {
  const entries = Array.isArray(jsonData.feed.entry)
    ? jsonData.feed.entry
    : [jsonData.feed.entry];
  return entries.map((entry: any) => parseRSSItem(entry, true));
}

// 複数のRSSフィードURLを処理し、最新の10記事を返す関数
export async function fetchAndProcessRSS(
  rssURLs: string[]
): Promise<Article[]> {
  let articles: Article[] = [];

  await Promise.all(
    rssURLs.map(async (rssURL) => {
      try {
        const rssData = await fetchRSS(rssURL); // 各RSSフィードをフェッチ
        let fetchedArticles: Article[] = [];

        if (rssData.rss) {
          fetchedArticles = parseRSS2(rssData); // RSS 2.0形式を解析
        } else if (rssData.feed) {
          fetchedArticles = parseAtom(rssData); // Atom形式を解析
        } else {
          console.error(`Unknown feed format for ${rssURL}`, rssData); // 不明なフォーマットのフィード
        }

        articles.push(...fetchedArticles); // 取得した記事を追加
      } catch (error) {
        console.error(`Error processing RSS feed ${rssURL}:`, error); // エラー処理
      }
    })
  );

  // 記事を日付でソートし、最新の10記事を取得
  articles.sort(
    (a, b) => new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime()
  );
  articles = articles.slice(0, 10);

  return articles; // 最終的な記事リストを返す
}

---
import Layout from "@/layouts/Layout.astro";
import { fetchAndProcessRSS } from "@/libs/fetchAndProcessRSS";
import { Image } from "astro:assets";
import noimage from "@/images/noimage.png";

// RSSフィードのURL 配列で複数RSSフィードURLの指定が可能
const rssURLs = [
  "https://note.com/xxx/rss"
];

// RSSフィードから記事を取得して統合
const articles = await fetchAndProcessRSS(rssURLs);
---
<Layout>
  <h1>Latest Articles</h1>
  <ul>
    {
      articles.map((article) => (
        <li>
          <a href={article.link}>
            {article.thumb ? (
              <img src={article.thumb} alt="" />
            ) : (
              <Image src={noimage.src} width={400} height={300} alt="" />
            )}
            <div class="info">
              <p class="date">{article.pubDate}</p>
              <p class="title">{article.title}</p>
            </div>
          </a>
        </li>
      ))
    }
  </ul>
</Layout>

<h3 id="h3e3954103e">😢つまづき⓵XMLデータをJSON形式に変換するパッケージでデプロイ失敗</h3><p>はじめはxml2jsで試して作成していましたが、いざデプロイしようとしたらエラーでデプロイできませんでした。</p><h4 id="h5210acff2f">エラー内容</h4><pre><code>02:15:37 [ERROR] [vite] x Build failed in 1.43s
[commonjs--resolver] [plugin vite:resolve] Cannot bundle Node.js built-in &quot;events&quot; imported from &quot;node_modules\xml2js\lib\parser.js&quot;. Consider disabling ssr.noExternal 
or remove the built-in dependency.</code></pre><h4 id="heaa723eefe">ChatGPTに聞いてみた</h4><blockquote><p>このエラーは、Viteビルド中に発生したものです。エラーメッセージによると、<code>node_modules\xml2js\lib\parser.js</code>からNode.jsの組み込みモジュールである &quot;events&quot; をインポートしようとしているが、それがバンドルされていないため、エラーが発生しています。エラーの提案として、<code>ssr.noExternal</code>を無効にするか、組み込みの依存関係を削除することが挙げられています。</p><p>このエラーの理由として、ViteがデフォルトでNode.jsの組み込みモジュールをバンドルしないためです。これは、Viteがブラウザ向けのフロントエンドアプリケーションを効率的にビルドするための設計上の決定です。しかし、<code>xml2js</code>ライブラリがNode.jsの組み込みモジュールである &quot;events&quot; を使用しているため、このエラーが発生しています。</p></blockquote><p>astro.config.mjsのviteに設定を追加したり試したのですが、うまくいきません・・</p><p>rss-parserも試してみたのですが、<code>Cannot bundle Node.js built-in &quot;http&quot; imported from &quot;node_modules\rss-parser\lib\parser.js&quot;</code>と同様のエラーが出たため断念しました。</p><p>最終的にはデプロイできたfast-xml-parserで落ち着きました。</p>

<h3 id="h0701d7302b">😢つまづき②画像を取得するときにundefinedになる</h3><p>はじめはnoteのRSSフィードの形式をもとに作っていたのですが、複数のRSSフィードからデータを取得するときに画像が取得できないケースに遭遇しました。</p><pre><code>&lt;enclosure url=&quot;https://xxx.xyz/xxxx.jpg&quot; type=&quot;image/jpeg&quot; length=&quot;0&quot; /&gt;</code></pre><p>取得しようと設定してもundefinedになります・・</p><p>parserするときに属性が削除されてしまいurlがなくなっていました。そこでXMLParserのignoreAttributesとattributeNamePrefixオプションの設定を追加したら取得できるようになりました🎉</p>

const parser = new XMLParser({
  ignoreAttributes: false, // 属性を無視しない
  attributeNamePrefix: "", // 属性名のプレフィックスを削除
});

<h2 id="h9a28d23373">いろんなサービスのRSSフィードを見てみよう👀</h2><p><span class="txt-small">※2024/6/11時点</span></p><h3 id="ha62a81d053">note</h3><p><a href="https://www.help-note.com/hc/ja/articles/4402395202841-iframe-RSS%E3%81%A7-%E8%87%AA%E5%88%86%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%ABnote%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B" target="_blank" rel="noopener noreferrer nofollow">iframe、RSSで、自分のサイトにnoteを表示する</a></p><pre><code>&lt;item&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;media:thumbnail&gt;画像URL&lt;/media:thumbnail&gt;
  &lt;description&gt;&lt;![CDATA[ 本文 ]]&gt;&lt;/description&gt;
  &lt;note:creatorImage&gt;クリエイター画像&lt;/note:creatorImage&gt;
  &lt;note:creatorName&gt;クリエイター名&lt;/note:creatorName&gt;
  &lt;pubDate&gt;Thu, 08 Sep 2022 01:47:28 +0900&lt;/pubDate&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;guid&gt;記事URL&lt;/guid&gt;
&lt;/item&gt;</code></pre><h3 id="h36df264104">Qiita</h3><p><a href="https://help.qiita.com/ja/articles/qiita-feed" target="_blank" rel="noopener noreferrer nofollow">フィード機能（ホーム・タイムライン・トレンド）</a></p><pre><code>&lt;entry&gt;
  &lt;id&gt;tag:qiita.com,2005:PublicArticle/記事ID?&lt;/id&gt;
  &lt;published&gt;2024-06-11T15:46:46+09:00&lt;/published&gt;
  &lt;updated&gt;2024-06-11T15:46:49+09:00&lt;/updated&gt;
  &lt;link rel=&quot;alternate&quot; type=&quot;text/html&quot; href=&quot;記事URL＋パラメータ&quot;/&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;content type=&quot;html&quot;&gt;本文&lt;/content&gt;
  &lt;author&gt;
    &lt;name&gt;ユーザ名&lt;/name&gt;
  &lt;/author&gt;
&lt;/entry&gt;</code></pre><h3 id="hbfca088075">Zenn</h3><p><a href="https://zenn.dev/zenn/articles/zenn-feed-rss" target="_blank" rel="noopener noreferrer nofollow">ZennをRSSフィードで購読する</a></p><pre><code>&lt;item&gt;
  &lt;title&gt;&lt;![CDATA[ 記事タイトル ]]&gt;&lt;/title&gt;
  &lt;description&gt;&lt;![CDATA[ 本文 ]]&gt;&lt;/description&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;guid isPermaLink=&quot;true&quot;&gt;記事URL&lt;/guid&gt;
  &lt;pubDate&gt;Wed, 12 Jun 2024 00:00:00 GMT&lt;/pubDate&gt;
  &lt;enclosure url=&quot;OGP画像URL&quot; length=&quot;0&quot; type=&quot;image/png&quot;/&gt;
  &lt;dc:creator&gt;ユーザ名&lt;/dc:creator&gt;
&lt;/item&gt;</code></pre><h3 id="h926adb4daf">はてなブックマーク</h3><p><a href="https://developer.hatena.ne.jp/ja/documents/bookmark/misc/feed/" target="_blank" rel="noopener noreferrer nofollow">はてなブックマークフィード仕様</a></p><p>RSS 2.0、Atom形式の両方あります。</p><pre><code>&lt;item&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;link&gt;記事URL&lt;/link&gt;
  &lt;description&gt;本文&lt;/description&gt;
  &lt;pubDate&gt;Thu, 23 May 2024 11:57:41 +0900&lt;/pubDate&gt;
  &lt;guid isPermaLink=&quot;false&quot;&gt;hatenablog://entry/ID?&lt;/guid&gt;
  &lt;enclosure url=&quot;画像URL&quot; type=&quot;image/png&quot; length=&quot;0&quot; /&gt;
&lt;/item&gt;</code></pre><pre><code>&lt;entry&gt;
  &lt;title&gt;記事タイトル&lt;/title&gt;
  &lt;link href=&quot;記事URL&quot; /&gt;
  &lt;id&gt;hatenablog://entry/記事ID?&lt;/id&gt;
  &lt;published&gt;2024-06-11T17:45:54+09:00&lt;/published&gt;
  &lt;updated&gt;2024-06-11T17:45:54+09:00&lt;/updated&gt;
  &lt;summary type=&quot;html&quot;&gt;要約&lt;/summary&gt;
  &lt;content type=&quot;html&quot;&gt;本文&lt;/content&gt;
  &lt;category term=&quot;カテゴリ&quot; label=&quot;カテゴリ&quot; /&gt;
  &lt;category term=&quot;カテゴリ&quot; label=&quot;カテゴリ&quot; /&gt;
  &lt;link rel=&quot;enclosure&quot; href=&quot;画像URL&quot; type=&quot;image/png&quot; length=&quot;0&quot; /&gt;
  &lt;author&gt;
    &lt;name&gt;ユーザ名&lt;/name&gt;
  &lt;/author&gt;
&lt;/entry&gt;</code></pre>

<p>📝参考サイト</p><ul><li><a href="https://zenn.dev/kazuki_tam/articles/f7d3c0f1074969" target="_blank" rel="noopener noreferrer nofollow">Astro環境でnote記事一覧を事前ビルドして表示する方法</a></li><li><a href="https://zenn.dev/catnose99/articles/cb72a73368a547756862" target="_blank" rel="noopener noreferrer nofollow">チーム個々人のテックブログをRSSで集約するサイトを作った（Next.js）</a></li></ul>

AstroでRSSフィードから記事一覧を取得してCloudflare Pagesで表示してみる

<p>組織内サーバーをCloudflare Accessで保護してみた話<br><a href="https://blog.future.ad.jp/%E7%B5%84%E7%B9%94%E5%86%85%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92cloudflare-access%E3%81%A7%E4%BF%9D%E8%AD%B7%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E8%A9%B1" target="_blank" rel="noopener noreferrer">https://blog.future.ad.jp/%E7%B5%84%E7%B9%94%E5%86%85%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92cloudflare-access%E3%81%A7%E4%BF%9D%E8%AD%B7%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E8%A9%B1</a><br>Cloudflare Zero Trustを利用して開発環境への安全なアクセス方法を構築する<br><a href="https://developers.cyberagent.co.jp/blog/archives/39259/" target="_blank" rel="noopener noreferrer">https://developers.cyberagent.co.jp/blog/archives/39259/</a><br>WARP Client を使ったゼロトラスト導入<br><a href="https://www.mki.co.jp/lp/cloudflare/column_zerotrust_2.html" target="_blank" rel="noopener noreferrer">https://www.mki.co.jp/lp/cloudflare/column_zerotrust_2.html</a><br>Cloudflare PagesでホスティングしてIP制限ありでSPAを公開してみた<br><a href="https://note.shiftinc.jp/n/n4086f2bae17c" target="_blank" rel="noopener noreferrer">https://note.shiftinc.jp/n/n4086f2bae17c</a></p>

<p>Cloudflare PagesにデプロイしたサイトにCloudflare Accessで簡単にアクセス制限の設定ができたのでその記録です。</p><p><span class="txt-small">※Freeプラン登録の手順は省きます。</span></p><h2 id="h3afe48768b">Cloudflare Accessとは</h2><blockquote><p>Cloudflare AccessはCloudflare Zero Trustの一部で、安全なアプリケーションアクセスを提供します。ユーザー認証、SSO、MFAなどの機能を通じてゼロトラストセキュリティを実現します。</p></blockquote><table><tbody><tr><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p><strong>内容</strong></p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>ユーザー数の制限</strong></p></td><td colspan="1" rowspan="1"><p>最大50人のユーザーが利用可能（Freeプラン）</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>基本的なセキュリティ機能</strong></p></td><td colspan="1" rowspan="1"><p>シングルサインオン（SSO）、多要素認証（MFA）、デバイス姿勢チェック</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>アプリケーションの制限</strong></p></td><td colspan="1" rowspan="1"><p>特定の数のアプリケーションに対するアクセス制御</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>サポートの制限</strong></p></td><td colspan="1" rowspan="1"><p>コミュニティサポートやセルフサポートリソースのみ利用可能</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>シンプルなポリシー設定</strong></p></td><td colspan="1" rowspan="1"><p>基本的なポリシー設定が可能</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>アイデンティティプロバイダーの統合</strong></p></td><td colspan="1" rowspan="1"><p>Google Workspace、Microsoft Azure ADなどの主要プロバイダーと統合</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>トラフィック暗号化</strong></p></td><td colspan="1" rowspan="1"><p>全てのトラフィックが暗号化され、セキュアな通信を保証</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>ログイン試行の監視</strong></p></td><td colspan="1" rowspan="1"><p>ユーザーのログイン試行を監視し、不正なアクセスを検出</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>セッション管理</strong></p></td><td colspan="1" rowspan="1"><p>セッションのタイムアウト設定など、セッション管理機能</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>簡易設定と導入</strong></p></td><td colspan="1" rowspan="1"><p>簡単に設定でき、すぐに導入可能</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>アクセスログ</strong></p></td><td colspan="1" rowspan="1"><p>基本的なアクセスログを提供し、アクセスの監査が可能</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>シームレスなユーザー体験</strong></p></td><td colspan="1" rowspan="1"><p>ユーザーにとってシームレスなアクセス体験を提供</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>IP制限</strong></p></td><td colspan="1" rowspan="1"><p>特定のIPアドレス範囲からのアクセスを制限可能</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>リアルタイム監視</strong></p></td><td colspan="1" rowspan="1"><p>リアルタイムでのアクセス監視機能</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>バージョン管理</strong></p></td><td colspan="1" rowspan="1"><p>ポリシーや設定のバージョン管理が可能</p></td></tr></tbody></table><p><em>”ChatGPT”</em></p>

<h2 id="h0117b4c01d">Cloudflare Pagesへデプロイしたサイトにアクセス制限を設定する</h2><p>ダッシュボードのサイドバーからZero TrustまたはWorkers &amp; Pagesの管理画面どちらからでも設定が可能です。</p><h3 id="hdbfc612ee2">Workers &amp; Pagesから設定</h3><ol><li>ダッシュボードからWorkers &amp; Pagesを開く</li><li>アクセス制限をかけるサイトの「管理」へ</li><li>Access ポリシーの「アクセスポリシーを有効にする」</li><li>プレビューのデプロイに対してアクセスポリシーが有効になりました</li></ol><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/d9a93c6dc0064f2b9297562521072218/access01.png" alt="" width="1080" height="487"></figure><p>プレビューURLにアクセスするとCloudflare Accessの画面が表示されます。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/c6183c6f86b14aa382baf24166e2f2d0/access02.png" alt="" width="1080" height="578"><figcaption>認証画面とワンタイムPIN入力画面</figcaption></figure><p>Emailを入力し「Send me a code」をクリックするとワンタイムPIN入力画面に遷移します。Cloudflareから「Login code for xxx.xxx.pages.dev」とメールが届きます。</p><p>記載のワンタイムPIN入力、「Sign in」で認証が通るとサイトが表示されます。</p><p>※最初のリクエストから10分後に期限切れます。</p><h4 id="h54b026409b">プロダクションURLにも制限を適用する</h4><ol><li>管理ページのAccess ポリシー＞ポリシーを管理からApplicationsへ移動</li><li>自動で作成されたApplicationの「Configure」を開く</li><li>「Overview」タブに移動</li><li>「+ Add domain」で条件を追加</li><li>Subdomainは空欄の状態で保存</li></ol><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e5dd99ad01184cff8e0c9a777584b395/access03.png" alt="" width="1080" height="909"></figure><p>プロダクションURLにアクセスして認証画面が表示されたら成功です。</p><h4 id="hf8f9bf5dc7">許可していないアクセスの場合</h4><p>CloudflareのForbiddenページが表示されます。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4b70f471b6c440d9b7dc42941c9b0df2/access08.png" alt="" width="1080" height="507"></figure>

<h3 id="h52a7f8538e">Zero Trustから設定</h3><p>以下は、特定のメールアドレスだけ認証を許可するための手順です。</p><ol><li>ダッシュボードからZero Trustを開く</li><li>サイドバーのAccess＞Applicationsを開く</li><li>「＋Add an application」をクリックし開いたページ内の「<strong>Self-hosted</strong>」の「Select」を選択</li><li>設定の登録<ol><li>Application name：設定名</li><li>Session Duration：セッション時間</li><li>Application domain：対象ドメイン（サブドメイン）</li></ol></li><li>ポリシー設定の登録<ol><li>Policy name：ポリシー設定名</li><li>Action：アクション（<strong>許可</strong>を選択）</li><li>Session duration：セッション期間</li></ol></li><li>ルールの登録<ol><li>Selector：<strong>Emails</strong>を選択</li><li>Value：許可するメールアドレス</li></ol></li><li>次へ・・で完了まで進む</li></ol><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/7a14d955c1ac4d5a94069d96ce8192e4/access04.png" alt="" width="1080" height="985"></figure>

<h2 id="hb2c3eac6b1">特定IPだけアクセスを許可する</h2><p>すでにアクセス制限をしているサイトに対して、特定IPだけアクセスを許可する設定を追加してみます。</p><ol><li>ダッシュボードからZero Trustを開く</li><li>サイドバーのAccess＞Applicationsを開く</li><li>条件を追加するApplicationの「Configure」を開く</li><li>「Policies」の「＋Add a policy」をクリックし開いたページ内のポリシーを登録<ol><li>Policy name：ポリシー設定名</li><li>Action：アクション（<strong>Bypass</strong>を選択）</li></ol></li><li>ルールの登録<ol><li>Selector：<strong>IP ranges</strong>を選択</li><li>Value：<strong>許可するIP</strong></li></ol></li><li>「Add policy」をクリックして表示されたページの「Save application」をクリックで完了</li></ol><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/2ab1d9c804a54e0fb4b30d815457f17a/access05.png" alt="" width="1080" height="695"></figure><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/ec667b574d26402cbf01659a190bb479/access06.png" alt="" width="1080" height="445"></figure><p>Policiesページの認証条件は上から順番に実行されます。（上の図では、メールアドレス認証＞IPの順）</p><p>認証の順番を変更する場合は、左端にある「︙」をドラッグで上下に移動するか、右端にある「︙」のMove up／Move down／Move toで移動して入れ替えが可能です。</p>

<h2 id="ha465acebfc">設定のテストを実行する</h2><ol><li>ダッシュボードからZero Trustを開く</li><li>サイドバーのAccess＞Applicationsを開く</li><li>テストをするApplicationの「Configure」を開く</li><li>「Policies」の「Test your policies」をクリック</li><li>メールアドレスを入力し「Test policies」で実行</li></ol><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/f851d63f48524ea0beb3d9f7e72a6771/access07.png" alt="" width="1080" height="733"></figure><p>許可されていない場合「Access denied」と表示され、許可されている場合「Access granted」とPoliciesには実行された結果が表示されます。</p>

<p>📝参考</p><ul><li><a href="https://blog.future.ad.jp/%E7%B5%84%E7%B9%94%E5%86%85%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92cloudflare-access%E3%81%A7%E4%BF%9D%E8%AD%B7%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E8%A9%B1" target="_blank" rel="noopener noreferrer nofollow">組織内サーバーをCloudflare Accessで保護してみた話</a></li><li><a href="https://developers.cyberagent.co.jp/blog/archives/39259/" target="_blank" rel="noopener noreferrer nofollow">Cloudflare Zero Trustを利用して開発環境への安全なアクセス方法を構築する</a></li><li><a href="https://www.mki.co.jp/lp/cloudflare/column_zerotrust_2.html" target="_blank" rel="noopener noreferrer nofollow">WARP Client を使ったゼロトラスト導入</a></li><li><a href="https://note.shiftinc.jp/n/n4086f2bae17c" target="_blank" rel="noopener noreferrer nofollow">Cloudflare PagesでホスティングしてIP制限ありでSPAを公開してみた</a></li></ul><p>👀すごい！<br><a href="https://zenn.dev/delta/articles/4ec191931eded3" target="_blank" rel="noopener noreferrer nofollow">Cloudflare Zero Trustを使って、赤ちゃんの様子をモニタリングするシステムを構築する</a></p>