Cloudflare×Ghost Proで簡単！.pageドメインを使ったカスタムドメイン設定ガイド
.pageドメインでのセットアップをしている人を見なかったので。
ドメインといえば.comがいまでも主流ですが、ドメインを新規で使う分にはどれを選んでも同じなため、ちょっと面白いものを選びたいですね。
今回は.pageドメインを利用してみました。Googleがレジストラーとして管理しており、HTTPSが強制され、HSTS Preloadも勝手に登録されるのでブログを使う身としては安心でらくちんです。
HSTSとはなんぞや
HSTS（HTTP Strict Transport Security）って、簡単に言うと「ブラウザが自動でHTTPアクセスをHTTPSアクセスに切り替えるようにする仕組み」です。たとえばふつうならHTTPでアクセスすると、そのままHTTPでサーバーに行くわけですよね。でもHSTSを設定しておくと、いったんブラウザが「このサイトはHSTSに対応してるんだから、そもそもHTTPでの接続を試そうとしちゃダメ」って判断し、強制的にHTTPSに変えてくれるんです。
そうすると、ユーザーがURLバーに http://example.com って打ち込もうが何しようが、ブラウザ自体が「あ、ここはHSTSサイトなんだから」とHTTPSオンリーで通信しようとするので、結果的にHTTPでの通信を許さなくなるわけですね。これがどう便利かっていうと、たとえばSSL証明書の設定をミスっていたり、意図しないHTTPリクエストが入ったりしても、そこを自動的に撥ねてくれるわけですよ。
さらに「HSTS Preload」という仕組みもあって、これは多くのブラウザ（ChromeやFirefox、Safariなど）が共有している「はじめっからHTTPSに行くサイト一覧」みたいなリストに、あらかじめドメインを登録しておく方法です。Preloadリストに載ると、ユーザーのブラウザが初回アクセスする前から「ここは最初からHTTPS使うべし！」と分かるんですね。
つまり、HTTPでアクセスが来る前にブラウザ側が「そんな接続は聞きませんよ」とブロックして、HTTPSへ飛ばしてくれるから、リダイレクトをサーバー側で処理するよりも先に“安全”が担保されるんです。ブラウザは「このサイトは絶対HTTPSだな」と知っているから、HTTPでアクセスしようとした時点で止めちゃう。実際にリクエストがHTTPでサーバーに届く前からHTTPSに置き換えられるんですよ。
.pageドメインは、Googleが管理していることもあって、自動的にHSTS Preloadリストに載ります。なので、ユーザーが http://example.page なんて打っても「そのドメインは最初っからHTTPSしか通信させないように指定されてるよね？」ってブラウザが言って、無条件にHTTPSに切り替えちゃう。これを知らないと「なぜかHTTPでアクセスできないんだけど…？」という状況に陥りますが、そもそも「HTTPでアクセスできないのが正しい」わけですね。
それからHSTSは、一度ユーザーがアクセスして「このサイトはHSTSですよ」っていうヘッダーをブラウザが受け取ると、設定した期間（たとえばmax-age=31536000 で1年とか）はずっとHTTPS強制モードでアクセスするようになります。しかも preload に登録していれば、ユーザーが一度もアクセスしなくても、リストを持ったブラウザが「このサイトはHTTPダメ」と判断する。
ただ、この機能は便利な半面、一度HSTS Preloadに登録すると外すのがちょっと大変だったりします。予期せぬトラブル（たとえばSSL証明書が期限切れで更新失敗しているのに、HTTPすら試せない）なんかを起こしてしまうと、緊急時の迂回ルートがなくなるんで、そこは注意が必要。
とはいえ、しっかりSSLまわりを管理していて、HTTPSへの一本化を進めたいならHSTSはかなり強力な味方ですね。「ブラウザが勝手にHTTPをHTTPSに書き換えてくれる」って状況そのものがセキュリティ強化につながるし、Google的にも（SEO評価的にも）HTTPS推奨なんで、安心感が段違いです。
要するに、「もうHTTPでアクセスなんかさせるもんか。ユーザーが間違えて打ち込もうが何しようが全部HTTPSへ持ってくぞ！」っていう、ちょっと強引だけど頼もしいセキュリティ機構なんですね。特に今回みたいに .pageドメインを使ってる人は、最初から自動でPreloadされてるわけなので、設定で頭を悩ませるというよりは「何もしなくてもHTTPが不可になってるじゃん」って現象に出会うかもしれません。でも、それがHSTSの力というわけです。
ブログのホスティングについて
本ブログのホスティングはCMSであるGhostの提供する公式ホスティングであるGhost Proを利用しています。
ブログといえばWordPressですが、WordPressらしさがあまりかっこよくない上に、WordPressの運営が今はもめているようですから、今からブログを始めるのであればちょこっとGhostを試してみてもいいと思います。
まあ、とはいえ今回の騒動もユーザー側の影響は少ないですから、別にって方は定石のWordPressといった感じでもいいです。ここら辺はちょこっと触ってみて気に入ったほうを使えばいいと思います。
何と言ったってWordPressでホスティングをすれば、制限はあれども無料でサイトを構築できますものね。
ドメインを購入する
まずはドメインを購入しましょう。
購入できるドメインはレジストラによって異なりますが、迷惑なメールでの割引通知や使いやすいドメイン管理画面が欲しいのであれば実質的にCloudflareとGandiに絞られます。
かつてはGoogleもドメインを販売していて、使いやすかったのですが、サ終しました。
Cloudflareはドメインを卸値で売っています。更新料が初期購入の費用と同じなのでコストの計算が付きやすいですが、割引もないので1円でドメインを取得することはできません。別のレジストラから買ってきて移管してもいいと思うかもしれませんが、Clouflareで販売していないドメインは移管しても更新はCloudflareでは行えません。ちょっと面倒。
このドメインあるかなあぁ。買えるかなあというものはCloudflareが検索サイトを用意してくれていますから、ここでいろいろ試してください。
ドメインの購入に関して、ドメインなんて安く買えればそれでいいのでしたらどこを使っても同じですが、設定やメールのうざさが天と地ほどの差があります。
ドメインを買ったことがない、よくわからんって人は以下の記事を見てみてください。
HimaJyun
私は今回このサイトで利用するドメインを購入しました。見ての通り、.pageドメインです。
ドメインについての豆知識
世の中にはたくさんドメインがあります。
.comや.net、.infoなど購入や利用に何も制限がないドメインもあれば.newなど利用に特定の要件が設定されているドメインもあります。
ちょっと面白いのがGoogleの管理しているドメインです。
（Google Domainsはサ終によりGoogleからドメインを買うことはできなくなりましたが、Google Registryは今もあります。つまり、Googleはドメインを直接販売しませんが、ドメインの管理事業はそのままです。他の会社からGoogleの管理しているドメインを購入できます）
Googleの管理しているドメインはHTTPSが強制され、自動的にHSTS Preloadに登録されます。これにはセキュリティ的なメリットもありますし、ブログなんかを書く場合はGoogleからの評価的にお得です。HSTSなんか自分で設定するの面倒ですからね。
X
ChromeでもHTTPSでの接続が優先され、HTTPでの接続前にユーザーに警告が表示されるようになりました。
JPRS
ということで、買ってみるならGoogleのドメインは面白いからおススメしたいよ～ってことでした。
逆に売られているからと言って購入ができるわけじゃないドメインもあります。
.co.jpなどは有名ですが、個人ではそんなドメイン面白くもありません。.bankや.pharmacyなどです。面白ドメインかと思いきや利用用途が本当の銀行や薬局の身になっており、実質的に個人での所有は不可能です。気をつけるほどでもないですが、頭の片隅にでも置いといてください。
Ghost Proにカスタムドメインを設定する
Ghost Proはマネージドサービスなので、最初っからghost.ioというドメインでアクセスが可能です。そこにカスタムドメイン（つまりあなたのドメイン）を追加するということで、ghostの管理するサーバーとあなたのドメインを紐づけることになります。
Ghost
カスタムドメインを追加する- Ghost公式ドキュメント
私はCloudflareからドメインを購入しましたので、以下のインストラクションに従います。なお、ブログなどではwwwなどのサブドメインを利用することが一般的です
Ghost
CloudflareではDNSのほかにCDNとしての側面もありますが、今回はDNSだけを利用します。
Ghost ProはCDNにFastlyを使っていますので、Cloudflare側ではCDNを使う必要はありません。というか、何も考えずプロキシ機能を有効化してしまうとエラーで画像なんかが読み込めなくなったりします。
Ghost
2025/03/06追記
CloudflareのProxyを有効にすると画像が読み込めなくなるとしていましたが、「Scrape Shield」の「Hotlink の保護」が有効化されていたためでした。ghostはsakashita.pageの下にある画像ファイルを管理画面ghost.ioから読み込もうとするため画像が表示されないだけでした。
これはいわゆる「画像への直リンク」の禁止をするための機能です。
したがって「Scrape Shield」の「Hotlink の保護」 を無効化することで普通に使えます。「直リンク」を許可したくない場合は、ルールから細かく設定をすることもできますが、めんどくさいのでオフにしました。
ただ、カスタムドメインの登録時にはGhostのシステムが確認をとれなくなるので、登録の時だけProxyをオフにし、登録出来たらProxyをオンにすれば問題ありません。
追記終わり
Cloudflareの管理画面からDNSのメニューを開きます。
DNSの設定画面で以下のようにレコードを追加します。
サブドメイン DNS 設定
| レコードタイプ | ホスト | 値 | プロキシ状態 |
|---|---|---|---|
| CNAME | www | [subdomain].ghost.io | DNSのみ |
| A | @ | 178.128.137.126 | DNSのみ |
このときプロキシをオフにする（雲マークを灰色にする）ことが重要です。
Ghostのカスタムドメインセットアップ画面に行き、ドメインのことを入力し、ActivateをクリックしたらGhostがシステムのほうから設定を自動的に確認してくれます。
AレコードはApexドメインへのアクセスに対しても同じ内容を返却するための設定であり、オプショナルなものです。今回はCloudflareを利用しますから実はこの設定は不要なのです。つまり、Cloudflareを利用する場合、CNAMEレコードへの登録だけで問題ありません。具体的な設定方法は次のセクションで。
最後にGhostで設定の確認を行いますが、これがたまに確認がうまくいきません。半日以上待ってからもう一度GhostのほうでActivateするとうまくいきます。焦らないで安心してください。
Apexドメインへのアクセスをwwwサブドメインへとリダイレクトする
Apexドメイン、ルートドメインやネイキッドドメインなどと呼ばれますが、ここに来るアクセスをwwwなどのサブドメインへとリダイレクトすることがCloudfalreでは簡単にできます。
昔であればNginxなどでちまちま書いていたのですが、Cloudflareをつかうことで、データセンターをルーターと見立てることができて便利です。
公式フォーラムを見てみます。
するとモデレーターの方が以下のようなコメントを残しているので、リンクをたどります。
This tutorial is deprecated in favour of Single Redirects — Example rules · Cloudflare Rules docs
と、いうことでリンクをたどりますと、公式ドキュメントへとたどり着きます。
どうやら以前、自分で必要な項目をフィールドに埋めていた設定画面がRulesに統一され、ぽちぽちボタンをクリックしていくだけで設定ができるようになったようです。
丁寧にガイドが書かれていますので、この公式ドキュメントを参考に手順をすすめていきます。
「ルール」から「テンプレート」を見ていくと「ルートから WWW にリダイレクト」とあります。
デプロイをしようとすると、Cloudflare内でリダイレクトをするためのプロキシがApexドメインにありませんと出ます。
要するにCloudflareに来たApexドメインへのアクセスを内部でごにょごにょするための設定が必要ということです。
具体的な設定はDNSのAレコードまたはAAAAレコード、CNAMEレコードにプロキシを設定するということです。
どれに設定をしても全く同じですので好きなものを選べばいいです。
（一応気になる人向けですが、AレコードはIPv4アドレスの指定用、AAAAレコードはIPv6アドレスの指定用、CNAMEはDNSでの「リンク」です。）
私は特に理由はないですが、なんとなくAAAAレコードを選びました。
AAAAレコードを選んだ場合は100::を指定します。Aレコードを選んだ場合は192.0.2.1を指定します。CNAMEレコードを選んだ場合は、自分のサブドメインを指定します。
下に行って設定を完成させて終わりです。
おまけ
.pageドメインのHSTS設定項目はどうなっているのか？
CloudflareではHSTSの設定が管理画面からポチポチするだけでできるようになっているのですが、.pageなどのドメインでは（多分googleが）勝手に登録してくれるので設定が不要です。Cloudflareからではどう見えるんだろうなあと気になったので、設定画面を見てみます。
普通に設定項目がありますし、そもそも有効になっていませんね……
有効にしておきましょう。
どうやら.pageドメインではHSTS Preloadへ自動的に登録されるってことなようです。HSTS自体は自分でセットアップしてくださいってことのようですね。
実際にHSTS Preloadへの登録申請を行うページで私のドメインがどうなっているのか見てみます。
ここで申請を行います
ということで、下のほうにあるドメインのPreload状況を確認してみると......
実際の結果を見たい方はこちら......
問題なく登録されていることがわかります。まあ、各ドメインを登録しているというより、まるっと.pageドメインが登録されているのでしょう。
サイトにhttpでアクセスしてみる
Cloudflareではhttpをhttpsでリダイレクトする設定になっていても、HSTS Preloadに登録していない限り、リダイレクト前にブラウザがHTTPでの接続と警告をユーザーに表示します。.pageなどを利用しているドメインではHSTS Preloadに勝手に登録されるはずなので、httpでアクセスしても勝手にhttpsの接続に切り替わるはずです。というかhttpでの接続が不可能なはずです。
ブラウザのアドレス欄に私のサーバーのドメインをhttpで入力して実験してみます。
私の場合、サブドメインであるwwwへリダイレクトをしているため以下のように接続が切り替わるはずです。
- ブラウザに
http://sakashita.pageを入力してエンター - .page ドメインは HSTS Preload に登録されているため、ブラウザが 自動的に HTTPS へ切り替えて
https://sakashita.pageへアクセスを試みる - DNS で名前解決を行い、Cloudflare のサーバーへ到達
- Cloudflare は Apex ドメイン（sakashita.page へのアクセス）に対し、www サブドメインへのリダイレクトを返す（例えば 301）
- ブラウザが
https://www.sakashita.pageへアクセスし直す - 再度 DNS を引いて Cloudflare に接続
- Cloudflare が裏で Ghost のサーバーにプロキシし、最終的にブラウザにコンテンツが表示される
実際にアクセスしてみると、上で仮定したようにうまく接続されます。
やったね！！
04/06追記
「ルール」の「設定」にある「Managed Transforms」から「セキュリティ ヘッダーを追加する」という設定項目があります。機能としては説明にもあるように、「クロスサイト スクリプティング (XSS) 保護を提供する、セキュリティ関連の HTTP レスポンス ヘッダーをいくつか追加します。」とのことで、つまりそのサイトへのアクセスがオリジンからのものであるかどうかを判定するものだ。
先日、Cloudflareでセキュリティ対策を強化しようと思い、試しにXSS関連のレスポンスヘッダーを有効にしてみたところ、Ghost(Pro)の管理画面から「View site」をクリックしても自分のサイトにアクセスできなくなってしまった。表示されるのはアクセス拒否系のメッセージで、一瞬何が起きたのか分からなかったが、どうやらこれはCloudflare側のセキュリティ設定が正しく機能しているがゆえの挙動のようだった。Ghostの管理画面は .ghost.io ドメイン上で動いており、自分のブログは独自ドメインで運用しているので、オリジンが異なる。そのため、Cloudflareで「他オリジンからのiframe埋め込みを拒否する」といった設定が有効になっていると、Ghostの管理画面上から自サイトをプレビューしようとした時にセキュリティ上ブロックされてしまう、というわけだ。
今回のケースのように、CloudflareのXSS対策をオンにしたことで、Ghostの管理画面からのプレビューが使えなくなったり、意図しないブロックが発生したりするようであれば、無理にその機能を有効にしておく必要はない。いずれはCSPの導入も検討すべきだが、それよりもまずはCloudflareの設定と、自分が使っているCMSやホスティング環境との相性をしっかり見ておくことが、実際には重要になってくる。セキュリティは大事だけれど、それによって本来の管理機能が使えなくなるようでは本末転倒だし、SEOのためにやっているつもりが、実は効果がなかったというパターンも少なくない。だからこそ、自分の目的に応じて「どこまでやるか」を冷静に見極めるのが、結局一番大事なのかもしれない。
追記終わり
これでCloudflareとGhost Proを組み合わせたカスタムドメインの設定からリダイレクトまで、できたとおもいます。
Ghostを使っている人は多くはないと思うのですが、参考になればうれしいです。ぜひご自身のブログ運営スタイルに合わせて試してみてください。それでは、快適なウェブを！
