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

Cloudflare PagesへデプロイしたサイトにCloudflare Accessでアクセス制限をかける

<p>サーバーの解約を機に同じアカウントで管理していたドメインをCloudflare Registrarに移管することにしました。</p><h2 id="h59afe2c4a4">スタードドメインで該当ドメインの利用停止</h2><p>「<a href="https://tedask.jp/server/move-domain-from-star-domain-to-xdomain/" target="_blank" rel="noopener noreferrer nofollow">【ドメイン】スタードメインからXドメインに移管する方法</a>」の記事を参考にスタードメインの利用停止を進めました。</p><p>利用停止直後は「解約」の表示になりませんでしたが、数分後にアクセスしたら解約に切り替わります。</p><p>whoisに設定しているメールアドレスを変更すると「ドメイン登録者情報のメールアドレス認証作業のお願い」メールが届くので認証用URLをクリックすると認証が完了します。認証鍵はダッシュボードから確認できるので利用する際にコピーすればＯＫです。</p>

<h2 id="hba9bc580af">Cloudflare Registrarへドメイン移管の手続きをする</h2><p>Cloudflare＞ドメイン登録＞ドメインの移管画面へ移動し、認証コード・連絡先情報を順に登録します。</p><p>Cloudflare Registrarからドメイン移管リクエストがあったとメール通知が届きます。他にCloudflareからドメインの購入通知やスタードメインから移管をキャンセルするためのページURLのメールが届きます。</p>

<h3 id="h417d4afa3c">移管完了</h3><p>Cloudflareのドメイン管理でドメインの移管状況が確認できます。移管中はステータスが「転送を保留中」ですが、完了すると「アクティブ」に変わります。（完了するまでに最大5日かかります。）</p>

<h2 id="h9710ffdf15">余談</h2><p>Cloudflare Registrarはドルベースの料金体系を採用しているため、円安の場合には費用が増加する可能性があります。為替変動によって予期せぬコスト増加が生じる可能性があります。</p><p>2/18時点</p><table><tbody><tr><th colspan="1" rowspan="1"><p>ドメインサービス</p></th><th colspan="1" rowspan="1"><p>更新費</p></th></tr><tr><td colspan="1" rowspan="1"><p>さくらのドメイン</p></td><td colspan="1" rowspan="1"><p>3,923円</p></td></tr><tr><td colspan="1" rowspan="1"><p>エックスサーバードメイン</p></td><td colspan="1" rowspan="1"><p>1,650円</p></td></tr><tr><td colspan="1" rowspan="1"><p>お名前.com</p></td><td colspan="1" rowspan="1"><p>1,628円</p></td></tr><tr><td colspan="1" rowspan="1"><p>ムームードメイン</p></td><td colspan="1" rowspan="1"><p>2,029 円</p></td></tr><tr><td colspan="1" rowspan="1"><p>スタードメイン</p></td><td colspan="1" rowspan="1"><p>2,394円</p></td></tr><tr><td colspan="1" rowspan="1"><p>Cloudflare Registrar</p></td><td colspan="1" rowspan="1"><p>約2,656円（$17.68）</p></td></tr></tbody></table><p style="text-align: right"><span class="txt-small">2/18時点</span></p><p>📝参考</p><ul><li><a href="https://tedask.jp/server/move-domain-from-star-domain-to-xdomain/" target="_blank" rel="noopener noreferrer nofollow">【ドメイン】スタードメインからXドメインに移管する方法</a></li><li><a href="https://zenn.dev/muchoco/articles/9039762136e15c" target="_blank" rel="noopener noreferrer nofollow">お名前.com から Cloudflare Registrar にドメイン移管した話</a><p></p></li></ul>

ドメイン管理をスタードメインからCloudflare Registrarに移管する

<h2 id="h1f01853ea1">getServerSidePropsで検索ページを作る</h2>

export const runtime = "experimental-edge";

const Home: NextPage<Props> = ({ posts, keyword, totalCount, categories }) => {
  return (
    <>
      <div className={styles.header}>
        <SearchBox />
        <p className={styles.result}>該当：{totalCount}件</p>
      </div>
      <div className={styles.wrap}>
        {keyword === "" && <p>キーワードを入力してください</p>}
        {posts && totalCount > 0 && (
          <>
            <div className={styles.wrap}>
              <div className={styles.archive}>
                {posts
                  ? posts.map((post) => <PostItem key={post.id} post={post} />)
                  : ""}
              </div>
            </div>
          </>
        )}
        {totalCount === 0 && keyword && (
          <p className="notfound">
            「{keyword}」を含む記事はありません。
            <br />
            キーワードを変更して再検索してください。
          </p>
        )}
      </div>
      <CategoryList categories={categories} />
    </>
  );
};
export default Home;

export const getServerSideProps: GetServerSideProps = async (context) => {
  const keyword = context.query.q;
  const posts = keyword
    ? await getAllBlogList({
        q: `${keyword}`,
        fields: "必要なフィールドだけ取得（指定しなくてもいい）",
      })
    : null;
  const totalCount = posts ? posts.length : 0;
  const categories = await getAllCategoryList({ fields: "title,slug" });

  const data = keyword
    ? {
        posts,
        keyword,
        totalCount,
        categories,
      }
    : {
        keyword,
        totalCount,
        categories,
      };

  return {
    props: data,
  };
};

<h4 id="hcbe32938f2">エッジ ランタイムを設定</h4><pre><code>export const runtime = &quot;experimental-edge&quot;;</code></pre><h4 id="hc070b28ff1">クエリ文字列（?q=xxx）の取得</h4><pre><code>const keyword = context.query.q;</code></pre><h4 id="h1cc13c40af">microCMSのコンテンツの全文検索用のクエリパラメータを指定</h4><pre><code>q: `${keyword}`,</code></pre><p>getAllBlogListは、microCMS-SDKのコンテンツの全件取得を行うgetAllContents()メソッドを使っています。</p><pre><code>export const getAllBlogList = async (queries?: MicroCMSQueries) =&gt; {
 const listData = await client.getAllContents&lt;Blog&gt;({
  endpoint: &quot;blog&quot;,
  queries,
 });
 return listData;
};</code></pre><p>microCMSのドキュメントにもあるように、完全一致する結果を返してくれるわけではありませんが、そこまで厳密にしなくてもいいのでqクエリパラメータを使いました。</p><blockquote><p>qパラメータによる検索は、コンテンツに関する情報を形態素解析した結果を対象に実施されます。検索語句と一致するキーワードの登録がないコンテンツでも、検索結果に含まれることがあります。正確な部分一致検索が必要な場合は、filtersパラメータのcontainsの使用をご検討ください。</p></blockquote><p>クエリパラメータ q <a href="https://document.microcms.io/content-api/get-list-contents#ha8abec0b2f"><u>https://document.microcms.io/content-api/get-list-contents#ha8abec0b2f</u></a></p><h4 id="he267d78153">keywordが未指定のとき</h4><p>keywordが指定されてないときは全件該当してしまうので、結果を返さないようにpostsを含まないようにしています。（もっといい書き方あるだろう・）</p>

<h2 id="h6c42ace2bd">Cloudflare PagesでSSRを使えるように設定</h2><p>設定＞ビルド＆デプロイ＞ビルドの構成のフレームワークプリセット「Next.js」を選択します。（※Next.js（Static HTML Export）ではなくNext.js）<br>ビルド コマンド、ビルド出力ディレクトリなど選択時に自動で初期値が設定されます。</p><p>設定＞functions＞互換性フラグに<code>nodejs_compat</code>を登録します。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/bb87002b4a5b4acb9dea6d962dfdfc11/image.png" alt="" width="966" height="557"></figure><p>デプロイして検索結果が表示されたら成功です🎉</p>

<h2 id="h93d835c79a">失敗・起こったエラー</h2><p>検索ページだけ作ってデプロイした結果</p><pre><code>Error occurred prerendering page &quot;/search&quot;. Read more: https://nextjs.org/docs/messages/prerender-error</code></pre><p>search/index.tsxに<code>export const runtime = &quot;edge&quot;;</code>を設定</p><pre><code>Error: Page /search provided runtime &apos;edge&apos;, the edge runtime for rendering is currently experimental. Use runtime &apos;experimental-edge&apos; instead.</code></pre><p>next.config.jsに<code>runtime: &apos;edge&apos;,</code>を設定</p><pre><code>experimental: {
  runtime: &apos;edge&apos;,
},</code></pre><pre><code>Error: Page /search provided runtime &apos;edge&apos;, the edge runtime for rendering is currently experimental. Use runtime &apos;experimental-edge&apos; instead.</code></pre><p>search/index.tsxに<code>export const runtime = &quot;erimental-edge&quot;;</code>を設定</p><pre><code>00:17:31.819Error occurred prerendering page &quot;/search&quot;. Read more: https://nextjs.org/docs/messages/prerender-error
00:17:31.819ReferenceError: self is not defined</code></pre><p>ビルドの構成から<code>next export</code>を削除したら静的ファイルが全部出力されなくなった・・</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/fced5e74e5b340aea6c3934df6ec4d15/image.png" alt="" width="986" height="293"></figure><p>ビルドの構成をNext.js（Static HTML Export）からNext.jsに変更して再デプロイしたら「Node.JS Compatibility Error」<br>「互換nodejs_compat性フラグが設定されていません」とのこと。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/b216e7c8f0fb410a965199b3f0b592f8/image.png" alt="" width="1059" height="432"></figure><h4 id="h370f4f57eb">ローカルの/search/ページでInernet Server Errorがでる</h4><pre><code>⚠ You are using an experimental edge runtime, the API might change.</code></pre><p>まだ解決できず、ローカルで動作確認するときはコメントアウトしています；</p><h4 id="hcd63b0c9a9">middlewareで設定していたBasic認証が効かなくなった</h4><p>以前、<a href="https://841-biboroku.info/entry/cloudflare-pages-function-basic-auth/" target="_blank" rel="noopener noreferrer nofollow"><u>functions/_middleware.tsでBasic認証を設定</u></a>をしていましたが、Edge runtimeの設定をしたら該当ファイルを読まなくなりBasic認証が解除されてしまいました。なのでBasic認証はNext.jsのmiddlewareに切り替えて実装することにしました。</p><p><br></p>

<p>📝参考<br>・<a href="https://blog.microcms.io/astro-search/" target="_blank" rel="noopener noreferrer nofollow">AstroとmicroCMSを使った検索機能を実装する</a><br>・Cloudflare Deploy a Next.js site＞<a href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-the-edge-runtime" target="_blank" rel="noopener noreferrer nofollow">Use the Edge Runtime</a><br>・<a href="https://developers.cloudflare.com/workers/runtime-apis/nodejs/" target="_blank" rel="noopener noreferrer nofollow">CloudflareダッシュボードからNode.jsを有効にする</a><br>・<a href="https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/examples.md" target="_blank" rel="noopener noreferrer nofollow">packages/next-on-pages/docs/examples.md</a></p>

<h2 id="h44f833b591">追記：sitemap.xmlが生成されなくなっていた</h2><p>cloudflareのビルドコマンドを変更したときにビルド出力ディレクトリが<code>.vercel/output/static</code>に切り替わったのにnext-sitemap.config.jsが以前の設定のままだったことが原因でした。<br>next-sitemap.config.jsの設定を変更し再デプロイで生成されるようになりました。</p>

//修正前
module.exports = {
  outDir: './out',
}

//修正後
module.exports = {
  outDir: '.vercel/output/static',
}