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

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

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

<h2 id="h9710ffdf15">余談</h2>Cloudflare Registrarはドルベースの料金体系を採用しているため、円安の場合には費用が増加する可能性があります。為替変動によって予期せぬコスト増加が生じる可能性があります。2/18時点<table><tbody><tr><th colspan="1" rowspan="1">ドメインサービス</th><th colspan="1" rowspan="1">更新費</th></tr><tr><td colspan="1" rowspan="1">さくらのドメイン</td><td colspan="1" rowspan="1">3,923円</td></tr><tr><td colspan="1" rowspan="1">エックスサーバードメイン</td><td colspan="1" rowspan="1">1,650円</td></tr><tr><td colspan="1" rowspan="1">お名前.com</td><td colspan="1" rowspan="1">1,628円</td></tr><tr><td colspan="1" rowspan="1">ムームードメイン</td><td colspan="1" rowspan="1">2,029 円</td></tr><tr><td colspan="1" rowspan="1">スタードメイン</td><td colspan="1" rowspan="1">2,394円</td></tr><tr><td colspan="1" rowspan="1">Cloudflare Registrar</td><td colspan="1" rowspan="1">約2,656円（$17.68）</td></tr></tbody></table>2/18時点📝参考<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></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 />
 該当：{totalCount}件
 </div>
 <div className={styles.wrap}>
 {keyword === "" && キーワードを入力してください}
 {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 && (
 
 「{keyword}」を含む記事はありません。
 
 キーワードを変更して再検索してください。
 
 )}
 </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>getAllBlogListは、microCMS-SDKのコンテンツの全件取得を行うgetAllContents()メソッドを使っています。<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>microCMSのドキュメントにもあるように、完全一致する結果を返してくれるわけではありませんが、そこまで厳密にしなくてもいいのでqクエリパラメータを使いました。<blockquote>qパラメータによる検索は、コンテンツに関する情報を形態素解析した結果を対象に実施されます。検索語句と一致するキーワードの登録がないコンテンツでも、検索結果に含まれることがあります。正確な部分一致検索が必要な場合は、filtersパラメータのcontainsの使用をご検討ください。</blockquote>クエリパラメータ q <a href="https://document.microcms.io/content-api/get-list-contents#ha8abec0b2f">https://document.microcms.io/content-api/get-list-contents#ha8abec0b2f</a><h4 id="he267d78153">keywordが未指定のとき</h4>keywordが指定されてないときは全件該当してしまうので、結果を返さないようにpostsを含まないようにしています。（もっといい書き方あるだろう・）

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

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

📝参考 ・<a href="https://blog.microcms.io/astro-search/" target="_blank" rel="noopener noreferrer nofollow">AstroとmicroCMSを使った検索機能を実装する</a> ・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> ・<a href="https://developers.cloudflare.com/workers/runtime-apis/nodejs/" target="_blank" rel="noopener noreferrer nofollow">CloudflareダッシュボードからNode.jsを有効にする</a> ・<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>

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

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

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

CloudflareのEdge RuntimeとmicroCMSのqパラメータを使ってキーワード検索結果ページを作る

Cloudflare Pagesの無料プランで配信できるファイル数が最大20,000。１ファイルあたりの容量が最大25 MiB。十分ではありますが、Cloudflare R2を使って画像や動画などメディアファイルをストレージにアップして配信してみようと思います。 公式：<a href="https://developers.cloudflare.com/pages/platform/limits/" target="_blank" rel="noopener noreferrer">https://developers.cloudflare.com/pages/platform/limits/</a>Files<blockquote>Pages uploads each file on your site to Cloudflare’s globally distributed network to deliver a low latency experience to every user that visits your site. Cloudflare Pages sites can contain up to 20,000 files.</blockquote>​File size<blockquote>The maximum file size for a single Cloudflare Pages site asset is 25 MiB.</blockquote><h2 id="h7ae6b91486">Cloudflare R2の無料枠</h2><ul><li>ストレージ　10GB/月</li><li>クラス A オペレーション (POST・書き込み)　100万回/月</li><li>クラス B オペレーション (GET・読み込み)　1,000万回/月</li><li>データ転送　無制限</li></ul> 個人で利用するには十分ですね。

<h2 id="hdee4aaab04">Cloudflare R2の設定</h2>ダッシュボードのサイドバー「R2」からまたは<a href="https://www.cloudflare.com/ja-jp/developer-platform/r2/" target="_blank" rel="noopener noreferrer">サービスページ</a>の「無料で試す」から遷移し、支払情報を登録します。 <h3 id="h82d9d02dd9">バケットの作成</h3>ダッシュボードのR2を開き、「バケットを作成する」に進みます。<img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/f83d479cb836429086812dcf16cfab85/Mask%20group.png" alt="" width="1125" height="288">バケット名（※）を入力し「バケットを作成する」に進みます。※バケット名に使用できるのは、小文字 (a ～ z)、数字 (0 ～ 9)、およびハイフン (-) のみです。<img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/0d0563591255423e84fa2d05e0e24caf/Mask%20group-5.png" alt="" width="1125" height="685">

<h3 id="he6489c41e9">作成したバケットにドメインを設定</h3>バケットが作成されファイルのアップロードができる状態になりました。ファイルを先にアップロードしてからドメイン設定でもどちらでもいいようです。今回は「設定」に進みます。<img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/7e0473145cce410d8f0cfcae3977167e/Group%2017.png" alt="" width="1125" height="524">今回は、Cloudflare Pagesに設定しているドメインのサブドメインをR2のバケットに設定します。パブリック アクセスの「ドメインに接続」をクリックするとカスタムドメインの入力欄が表示されます。設定したいドメイン（※）を入力し「続行」に進みます。※ドメインと表記していますが、今回のケースではサブドメインを指しています。<img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/332bf2b9b846496fbca83fce6db654c3/Mask%20group-1.png" alt="" width="1125" height="256"><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/9fcdc23ac61746279fbd875e6c01c63d/Mask%20group-2.png" alt="" width="1125" height="373">

<h3 id="hd0dbf53a3d">途中ですが失敗談</h3>今回はサブドメインを割り当てたかったのですが、間違ってカスタムドメインにメインドメインを設定してしまったところCNAMEがR2に置き換わり、ドメインがR2に向いてしまいました。<img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/963bbae9de2f41f9a79ccd963daa33fd/Group%2016.png" alt="" width="1125" height="204">バケットで設定したカスタムドメインを削除し、Pagesからカスタムドメイン設定を再設定して事なきを得ました。

<h3 id="hcd067993d5">DNSレコードの追加</h3>表示されたDNSレコードを確認し「ドメインに接続」に進むと反映待ちの画面になります。反映は数分ほどでした。<img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4d25fa819b8445f5a666f737b468c019/Mask%20group-3.png" alt="" width="1125" height="360"><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/9e0f5b15940949eeaf07aaec07f4e8ce/Mask%20group-4.png" alt="" width="1125" height="446">

<h3 id="hf2680f4114">ファイルをアップロードする</h3>「オブジェクト」画面でファイルをアップロードするとアップロードしたファイルが一覧に表示されます。<img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/ee85300ed923456d844fa553d5945c9d/Mask%20group-7.png" alt="" width="1125" height="544">一覧の該当オブジェクトをクリックすると詳細ページに遷移し、先ほど設定したカスタムドメイン＋ファイル名のURLが表示されます。アクセスしてみると問題なく表示されました。<img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/b26cf413f0fd423f911fcbec45393b93/Mask%20group-6.png" alt="" width="1125" height="464">

<h2 id="h1afe451c43">さいごに</h2>失敗はありましたが思いのほか簡単にアップロードと設定ができました。今回は読み込みだけなので、次回はAPIトークンを使った書き込みにも挑戦したいと思います。

Cloudflare R2のストレージにサブドメインの紐づけとファイルのアップを試してみる

よく使いそうリダイレクト設定をCloudflare Pagesのサイトに設定する方法を試しました。 検証したリダイレクトの条件は以下の通り<ul><li>完全一致　/111/222/hoge/　→　/111/222/333/hoge/</li><li>一部任意　/222/333/splat/　→　/222/333/444/splat/</li><li>一部任意（複数）　/333/444/main/sub/　→　/333/444/555/main/sub/</li></ul>

<h2 id="hc44876bf82">_redirectsの作成</h2>publicディレクトリに_redirects（拡張子なし）ファイルを作成します。 <h2 id="h5ed61dc3bc">_redirectsの書き方</h2>[source] [destination] [code?][リダイレクト元] [リダイレクト先] [転送処理のステータスコード] <ul><li>無料プランでは、静的が2000件・動的が100件まで設定可能</li><li>静的＞動的の順で指定する</li></ul> 公式ドキュメント：<a href="https://developers.cloudflare.com/pages/platform/redirects" target="_blank" rel="noopener noreferrer">Cloudflare Redirects</a>

<h3 id="h977fd0d261">完全一致のリダイレクト</h3>/111/222/hoge/　→　/111/222/333/hoge/

#.htaccessで書く場合
RewriteRule ^111/222/hoge/$ /111/222/333/hoge/ [R=301]

<h3 id="h5e061b0d01">一部任意のリダイレクト</h3>/222/333/splat/　→　/222/333/444/splat/ 任意の箇所に「:splat」を割り当てます。「splat」の部分は変更が可能です。

#.htaccessで書く場合
RewriteRule ^222/333/(.*)/$ /222/333/444/$1/ [R=301]

<h3 id="hcb927b62c4">一部任意（複数）のリダイレクト</h3>/333/444/main/sub/　→　/333/444/555/main/sub/ 1つ目に「:main」、2つ目に「:sub」を割り当てます。任意の箇所が複数ある場合は、割り当てる名称が重複しないようにします。

/333/444/:main/:sub/ /333/444/555/:main/:sub/ 301

#.htaccessで書く場合
RewriteRule ^333/444/(.*)/(.*)/$ /333/444/555/$1/$2/ [R=301]

<h2 id="ha214098e44">まとめ</h2>:slug は任意（*の指定でも可能だけど、1つしか使用できないので、任意の文字列を使用する方がいい）末尾の/は一致対象となる/333/444/test の場合、リダイレクトは実行されない/333/444/test/の場合、/333/444/555/test/にリダイレクトされる <h3 id="h6945648efb">失敗例</h3>.htaccessのように$1で指定できるかと思い試したところ、正規表現のような形式はリダイレクトループが発生してしまいました。/123/456/*/ /123/456/789/$1/ 301ERRTOOMANY_REDIRECTS のエラーが発生

Cloudflare pagesのサイト内で_redirectsを使ったリダイレクトをする方法

以前、<a href="https://hono.dev/" target="_blank" rel="noopener noreferrer">Hono</a>を使った<a href="https://841-biboroku.info/entry/cloudflare-pages-function-basic-auth/" target="_blank" rel="noopener noreferrer">Basic認証を試しました</a>が、今回はCloudflareで紹介されている記事と参考サイト「<a href="https://zenn.dev/calldoctor_blog/articles/9e0398a0880931" target="_blank" rel="noopener noreferrer">Cloudflare PagesにBasic認証をかけた話</a>」のサンプルコードをもとに_middleware.tsでBasic認証を実装してみました。

<h2 id="h2794b9d17f">環境変数を設定／wrangler.toml</h2><ul><li>Basic認証用のユーザ名とパスワード</li><li>Basic認証を除外したいホスト名</li></ul> ※wrangler.tomlは.gitignoreで除外します <img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/09cd7552b83249f79e08ffa577157a96/environment-variables.png?w=1111&amp;h=354" alt="" width="1111" height="354">

BASIC_AUTH_USER = "xxx"
BASIC_AUTH_PASSWORD = "xxx"
ALLOW_BASIC_HOST="xxx"

<h2 id="h287f141369">envの値が取得できない</h2><code>process.env.BASIC_AUTH_USER</code><code>env.BASIC_AUTH_USER</code>dotenvでもうまくいかず。 onRequestではどんな引数が使える・？ onRequestメソッドで渡されるオブジェクトのプロパティが公式ドキュメントにありました。<a href="https://developers.cloudflare.com/pages/platform/functions/api-reference/#eventcontext" target="_blank" rel="noopener noreferrer">https://developers.cloudflare.com/pages/platform/functions/api-reference/#eventcontext</a> <code>const guardByBasicAuth = async( next, request, env) =&gt;</code> <h2 id="he15e32f127">型をつける</h2>next,request,envの型付けは以下の参考サイトをもとに設定しました。<a href="https://dev.to/charca/password-protection-for-cloudflare-pages-8ma" target="_blank" rel="noopener noreferrer">Password Protection for Cloudflare Pages</a> <h3 id="h03d7a26a71">try～catchのerrorはどうすればいい？</h3><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/09f38cd2a16c40b2abc069b336d1bc0e/error.png" alt="" width="454" height="75">unknowを指定してもvscodeで波線が消えません。 参考：<a href="https://zenn.dev/rabbit/scraps/1efe3f5fa86da1" target="_blank" rel="noopener noreferrer">いつの間にか、try { } catch (error) { } の errorが `unknown` になってしまう問題。</a><a href="https://tech.wasd-inc.com/entry/2021/09/03/184109" target="_blank" rel="noopener noreferrer">TypeScriptでcatch句の変数(error.message)を使おうとするとVSCodeに怒られる件</a> 本当は型チェックをして処理～をしなければ、ですが今回はanyで対応しました。

<h3 id="h231939227f">ヘッダー情報host/authorizationに型付け</h3><a href="https://developer.mozilla.org/en-US/docs/Web/API/Headers" target="_blank" rel="noopener noreferrer">Headers - Web APIs | MDN</a><blockquote>interface Headers This Fetch API interface allows you to perform various actions on HTTP request and response headers. These actions include retrieving, setting, adding to, and removing. A Headers object has an associated header list, which is initially empty and consists of zero or more name and value pairs.&nbsp;You can add to this using methods like append() (see Examples.) In all methods of this interface, header names are matched by case-insensitive byte sequence.</blockquote>

const headers: Headers = request.headers;
const authorization: string | null = headers.get('authorization') ?? null;

<h3 id="h3175221e20">ローカルでBasic認証がかかるか確認</h3>package.jsonにscriptのエイリアス登録して実行してましたが、もっと早くプレビューできる方法があるようです。 変更前package.jsonに設定していた以下を実行<code>"wrangler": "next build &amp;&amp; next export &amp;&amp; npx wrangler pages dev ./out",</code><code>npm run wrangler</code>ビルドもするため時間がかかります。 変更後<code>npx wrangler pages dev -- next dev</code>かなり早く実行されるようになりました。 公式ドキュメント：​​<a href="https://developers.cloudflare.com/pages/platform/functions/local-development/#run-your-pages-project-locally" target="_blank" rel="noopener noreferrer">Run your Pages project locally</a><code>npx wrangler pages dev [directory] [-- command]</code>

<h3 id="h335a87b5ef">参考サイト</h3><a href="https://www.to-r.net/media/cloudflare-pages-basic/" target="_blank" rel="noopener noreferrer">Cloudflare Pagesに Basic認証をかける</a><a href="https://dev.to/charca/password-protection-for-cloudflare-pages-8ma" target="_blank" rel="noopener noreferrer">Password Protection for Cloudflare Pages</a><a href="https://zenn.dev/rabbit/scraps/1efe3f5fa86da1" target="_blank" rel="noopener noreferrer">いつの間にか、try { } catch (error) { } の errorが `unknown` になってしまう問題。</a><a href="https://tech.wasd-inc.com/entry/2021/09/03/184109" target="_blank" rel="noopener noreferrer">TypeScriptでcatch句の変数(error.message)を使おうとするとVSCodeに怒られる件</a> 📝<a href="https://841-biboroku.info/entry/cloudflare-pages-function-basic-auth/" target="_blank" rel="noopener noreferrer">Cloudflare Pages functionのMiddlewareとhonoでBasic認証をかける</a>