はじめての Pages その５ 専用ドメイン (Custom Domain) をセットアップする方法

今日は、Cloudflare PagesにCustom Domainをセットしていきます。Workersと同様に通常のCNAME設定では、ホスト側でHTTPヘッダーによる制御ではじかれてしまうため、Custom DomainとしてPages側にそのドメインを認識させる必要があります。

そのセットアップを初めて行ったところ少しだけ苦戦しましたので備忘録を兼ねていかに手順をまとめておきます。

Pagesの立ち上げ

まずは中身は何でも良いのでPagesでWebサイトを起動します。最近アップデートがかかりGit連携、Zipアップロードに加えて、フォルダアップロード機能が加わりました。ただし引き続きアップロードするレポジトリは１つに（フォルダなら１個のフォルダの中に全てが含まれている）まとめておく必要があります。

Custom Domain セットアップ

Custom Domainのタブをクリックします。
Set up a custom domainを押します。

自分がPagesサイトをぶら下げたいドメインを入力します。

ここでPagesをホスティングしたいサブドメインを含んだCloudflareで管理しているドメインを入力します。
例えばpages.harunobukameda.comでWebサイトをホスティングしたければ、そのままpages.harunobukameda.comと入力しContinueを押します。

Active domainを押します。

以下の通り認証中となります。

harunobukameda.comのDNS管理画面に行くと、以下の通りDNS Proxyモードでサブドメインが１個CNAMEでセットされています。

しばらくするとPagesのCustom Domain画面で以下の通りセットしたドメインがActiveになります。

そのドメインでアクセスすると問題なくPageが表示されています。