Cloudflare Pages に移行しました

2021-12-27  /  Cloudflare Pages, お知らせ

Netlify で構築していたのですが、日本からでもアクセスが速そうなのと、色々機能が豊富そうな Cloudflare Pages に移行しました。

参考: Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる

GitHub との連携

最初のプロジェクト作成の際に Cloudflare Pages 用の GitHub App を使えるようにして、対象のリポジトリを選択します。

ビルドの構成

基本的な SSG のツールに対応したプリセットが用意されています。サイトで利用している Hugo を選択すると、自動でビルドコマンド、ビルド出力ディレクトリが設定されました。

環境変数

あらかじめ用意されている Hugo は古いバージョンのようなので、環境変数でバージョンを指定します。

HUGO_VERSION に対して 0.89.4 を設定しました。

DNS の設定

Apex ドメインを利用してサイトを表示させるためには Cloudflare のマネージド DNS を利用する必要があります（CNAME の Flatting が必要だから？詳しく知らない）。

移行は以下の順序で対応できました。

  1. Cloudflare の DNS サービスを有効にする
    • 既存の DNS と同じ内容（レコード）が自動で設定された状態になります
  2. NS レコードを Cloudflare の DNS に切り替える
    • 移行前と同じ状態になっているので、Netlify の旧サイトにアクセスし続ける状態
  3. Cloudflare Pages の方でカスタムドメインの設定をする
    • ここで CNAME が設定され、Netlify を参照しているレコードがなくなり、新サイトにアクセスできるようになります。

リダイレクトの設定

www ありを www なしに

www.kawaken.dev でアクセスされた場合にkawaken.devへとリダイレクトさせます。

ページルールを利用して以下のように設定しました。

参考: About Transform Rules · Cloudflare Rules docs

新旧で URL を変えた

移行に合わせて URL を変えたところなどあり、リダイレクトの設定を行いました。

_redirectsというファイルに以下のように記載しました。

[source] [destination] [code?]

このファイルは公開ディレクトリの root に配置させる必要があります。Hugo ではstaticに置くとそのまま公開用ディレクトリに配置されます。

参考: Redirects · Cloudflare Pages docs

クローラー避け

Cloudflare Pages ではビルドされた内容は sample.pages.dev といったドメインでサイトが公開されています。このデフォルトのサイトを Google などで index されないようにするため、ヘッダーを返せるようにします。

リダイレクトと同じように_headersというファイルを使い設定します。

https://sample.pages.dev/*
  X-Robots-Tag: noindex

参考: Headers · Cloudflare Pages docs

終わりに

Cloudflare Pages に移行して、あまり待たされている感じは少なくなったように思います。ちゃんと測ってないですが。

Worker などの機能もあるので簡単な管理画面とか作れたら良いかもしれません。