Cloudflare Pages に移行した
本ページを Cloudflare Pages に移行してみた。
はじめに
リポジトリの設定
ブログのリポジトリにアクセスし、Hugo でビルドして Cloudflare Pages にデプロイできるように設定する。
Get started · Cloudflare Pages docs内の以下の手順を行い、対象のリポジトリおよびブランチを設定する。
ビルドの設定
ビルドの設定については、自分が使用しているフレームワークを選択する。 自分は Hugo を使用しているので、フレームワークプリセットに Hugo を選択すると、以下のように必要な設定が入力されている。
Cloudflare Pages で使用されている Hugo のバージョンが古くビルドに失敗するため、使用する Hugo のバージョンを明示的に指定する。 環境変数を設定することで、ビルド時にある程度の設定が可能となっている。
以下のように、プロダクション、プレビューともに HUGO_VERSION を設定した。
設定後、ビルドに成功すると、自分で指定したプロジェクト名.pages.dev でビルドしたページへアクセスできるようになる。
このページを自分で用意したドメインに紐づければ Cloudflare Pages への移行は完了となる。
上記の設定を一通り行うと、今後は PR を作成するたびに PR branch でページがビルドされ、以下のように確認できるようになる。 ビルドに失敗した場合は、PR のマージができないようになる。
www ドメインでリダイレクトするように設定
<www.m1yam0t0.com> にアクセスしたとき、m1yam0t0.com へリダイレクトするようにしていたため、その設定も行った。 Cloudflare Pages の場合、Bulk Redirect を行うことで設定できる。
Redirecting www to domain apex · Cloudflare Pages docs
上記のドキュメントを参考にリダイレクトを設定できた。
おわりに
Cloudflare Pages への移行はスムーズに移行できた。リポジトリを設定するだけでプレビューの確認からページの公開まで簡単にできた。
さらに、Cloudflare Access を組み合わせることで、pages.dev ドメインのページのアクセスを制限できる。
DNS の設定なども含め、Cloudflare 内のサービスで完結できることは強みではないかと思う。
また、今回の移行にあたり、ドキュメントが非常に充実しており、各項目について該当するドキュメントにアクセスするように導線が用意されているため、非常にわかりやすかった。
今後、業務でドキュメントを作成する際は心がけていきたい。