Reactで作成したアプリをCloudflare Pagesを使ってデプロイしてみました。
Cloudflare Pages自体は初めて利用するため、色々触ったり調べてみて初期段階で設定した方が良いと感じた設定があったので記事に書きたいと思います。
まず始めにCloudflare Pagesとは、何でしょうか？
Cloudflare Pagesとは
公式にはJAMStackプラットフォームと書かれてあります。
NetlifyやVercelと同じようなサービスで、Githubと連携することでフロントエンドの資材を簡単にビルド＆デプロイすることができるホスティングサービスです。
設定がとても簡単でGithubと連携することでGithub Actionsが自動で設定され指定したブランチにプッシュするだけでCloudflare Pagesの環境へ自動でデプロイされます。
先日以下のアプリを公開してみました！
このアプリを公開した直後にもろもろ入れた設定があるので紹介します。
1.Accessポリシーを設定する
ビルド毎に生成されるプレビュー用のURLが初期状態だと publicな状態 となっているためAccessポリシーを設定することで、自動で制限を掛けてくれます。
Access制限にはZeroTrustを導入する必要がありプラン購入が必要になりますが、フリープランもあるので個人で利用している分には追加するユーザーもそんなにいないと思うのでクレカ登録していても無料で使い続けられると思います。
Cloudflareの管理画面の左側のメニューから「Pages」を選択してCloudflare Pagesの管理画面を開き対象のアプリを選択します。
そしたら「設定」タブよりAccessポリシーの欄があるので、そこからAccessポリシーの有効化を行います。
有効化するためには以下の画面よりプラン選択を行います。
無料プランを選択します。
クレカ登録が必要なので登録を行い決済します。
決済が完了するとZeroTrustが有効となります。
これでAccessポリシーの設定が完了です。
2. _headerファイルを作成して、xxx.pages.dev をインデックス対象外にする
独自ドメインを設定した際には必ずCloudflareのサブドメインをインデックス対象外とする設定を入れておいた方がSEO的に良いです。
_header ファイルを公開ディレクトリに作成します（拡張子は不要です）
_header ファイルについて公式にも記載がありますので参考にしてください。
Headers · Cloudflare Pages docs
以下の記述を書いてください。
xxxの部分はご自身環境に合わせてリネームしてください。
https://xxx.pages.dev/*
X-Robots-Tag: noindex
3. キャッシュの設定を追加する
CloudFlare pagesで初期のままではページのキャッシュが効いてないので設定を追加する必要があります。
小さいサービスでそこまで頻繁に更新がかからないのと、DDoS攻撃対策としてキャッシュを入れておきます。
キャッシュの設定を行うときは _header ファイルに Cache-Control を追加してあげます。
/assets/*
Cache-Control: max-age=3600
assetsの部分は使用するフレームワークやSSGにより異なるかと思いますので適宜変更してください。
上記の例では1時間キャッシュを有効にする設定としています。
最後に
ホスティングサービスは簡単なツールを作るには結構重宝します。
Cloudflare PagesのようにGithub連携が出来て簡単にビルド＆デプロイできるサービスは開発者にとってとても便利なサービスです。
他にも色々なサービスがありますがまずはCloudflare Pagesで色々触って試していきたいなと思います。
