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>

Cloudflare Pages functionの_middleware.tsでBasic認証をかける方法

Cloudflare CloudflareでBasic 厳格モード { strict: false } app.get('/hello')一致しませんGET /hello/。 厳格モードを に設定するとfalse、両方のパスが同等に扱われます。

Cloudflareにデプロイするとプロダクションやプレビュードメイン、*.pages.devが発行される。メインドメイン以外は、Basic認証をかける。ついでに特定ディレクトリにもBasic認証をかけられるか試してみる。 <h2 id="h9f510f3156">やりたいこと</h2><ul><li>Cloudflare Pagesのドメイン.pages.devに対して<ul><li>Basic認証をかける</li><li>X-Robots-Tag：noindexを設定する</li></ul></li><li>メインドメインの特定ディレクトリにBasic認証をかける</li></ul> <h2 id="hbc2483da4e">使用したもの</h2><ul><li>Cloudflare Pages function Middleware</li><li>Cloudflare Pagesの環境変数（ローカルは wrangler.toml）</li><li>npmパッケージ　<a href="https://hono.dev/" target="_blank" rel="noopener noreferrer">hono</a></li></ul>

<h3 id="h056623fbb6">Middleware</h3>functions/_middleware.ts

import { Hono } from 'hono'
import { basicAuth } from 'hono/basic-auth'
import { EventContext, handle } from 'hono/cloudflare-pages'
type Bindings = {
 eventContext: EventContext
 BASIC_AUTH_USER: string
 BASIC_AUTH_PASSWORD: string
 BASIC_HOST: string
}

const app = new Hono<{ Bindings: Bindings }>({ strict: false })

app.all(
 '/basic/*', 
 async (c, next) => {
 const auth = basicAuth({
 username: c.env.BASIC_AUTH_USER,
 password: c.env.BASIC_AUTH_PASSWORD,
 })
 return auth(c, next)
 }
)

app.all(
 '*', 
 async (c, next) => {
 const BASIC_HOST = c.env.BASIC_HOST
 const host = c.req.header('Host')

 if( host != BASIC_HOST ){
 const auth = basicAuth({
 username: c.env.BASIC_AUTH_USER,
 password: c.env.BASIC_AUTH_PASSWORD,
 })
 return auth(c, next)
 }
 return c.env.eventContext.next()
 }
)

app.all(
 '*',
 async (c) => {
 return c.env.eventContext.next()
 }
)

export const onRequest = handle(app)

<h3 id="hff1010bd17">Cloudflareの環境変数を設定</h3>Pages &gt; 対象プロジェクト &gt; 設定 &gt; 環境変数プロダクション、プレビュー両方に以下を設定。<ul><li>BASIC_AUTH_PASSWORD</li><li>BASIC_AUTH_USER</li><li>BASIC_HOST</li></ul> <h3 id="h666874f32a">X-Robots-Tagの設定</h3>public/_headers

https://:project.pages.dev/
  X-Robots-Tag: noindex

<h3 id="h6f5a739cfb">ローカルで実行して確認してみる</h3>wrangler.toml

BASIC_AUTH_USER = "ユーザ名"
BASIC_AUTH_PASSWORD = "パスワード"
BASIC_HOST="ホスト名"