目次
Netlifyと違ってGitLab PagesにはCDN機能がないので、Cloudflareを使います。
ページの公開設定やCI/CDの設定なんかは前回と同様なので説明は省略します。
【GatsbyJS】GitLab_Pagesに独自ドメインを設定
なお、レジストラーはお名前.comを使用しているものとします。
Cloudflareでの設定
日本語化されていたのでさほど難しくありませんでした。
Cloudflareのアカウント作成
Cloudflareのアカウントを持っていなかったので、新規作成しました。サインアップページにて手続きします。
- メールアドレス欄に有効なメールアドレスを入力します。
- パスワード欄にパスワードを設定します。
- 上記を入力したら「アカウントを作成」ボタンをクリックして先へ進みます。
少し待つとCloudflareから登録メールアドレス確認のためメールが来ます。メールに記載されたURLへブラウザでアクセスして確認作業を完了しましょう。
サイトの登録
- サイト名を入力します。今回は「rztest.space」としました。
- つづいて「サイトを追加」ボタンをクリックして先へ進みます。
プランを選択
今回はフリープランにします。
- 「Free」をクリック。
- ずずいと下にスクロールし、「プランを確認する」ボタンをクリックして先へ進みます。
DNSレコードの追加
- 上図①の「レコードを追加」ボタンを押し、下表1のようにAレコードを追加します。
- ⑤の「保存」ボタンを押してAレコードを保存します。
- ふたたび①の「レコードを追加」ボタンを押し、下表2のようにCNAMEレコードを追加します。
- ⑤の「保存」ボタンを押してCNAMEレコードを保存します。
- AレコードとCNAMEレコードの設定ができたら⑥の「続行」ボタンを押して先へ進みます。
表1
| タイプ | 名前 | IPv4アドレス | TTL | プロキシステータス |
|---|---|---|---|---|
| A | @ | 35.185.44.232 | 自動（デフォルトのまま） | プロキシ済み（デフォルトのまま） |
表2
| タイプ | 名前 | IPv4アドレス | TTL | プロキシステータス |
|---|---|---|---|---|
| CNAME | www | @ | 自動（デフォルトのまま） | プロキシ済み（デフォルトのまま） |
ネームサーバーを変更
「ネームサーバーを変更」画面に表示される「ネームサーバー1」「ネームサーバー2」の値を確認しておきます。レジストラー側で設定するときにコピペします。
レジストラー側の設定に移ります。が、Cloudflareの「ネームサーバーを変更」ページは開いたままにしておいてくださいね。
レジストラー側の設定
ブラウザの別タブでお名前.comのネームサーバー設定ページ を開きます。
- 下図①で対象とするドメインにチェックを入れます。
- ネームサーバーの選択セクションから②「その他」タブをクリック。
- ③の欄にネームサーバー1の値を入力します。
- 同様に④の欄にネームサーバー2の値を入力。
- 最後に⑤の「確認」ボタンをクリックします。
以上でレジストラー側の設定は完了です。
ふたたびCloudflare
Cloudflareのネームサーバーを変更画面に戻り、「完了しました、ネームサーバーをチェックしてください」ボタンをクリックしましょう。時間がかかるので、クイックスタートガイドをやってみるのもいいですね。
ネームサーバーのチェックが完了したら、ふたたびCloudflareの設定をします。
- 登録したドメインのダッシュボードから下図①の「SSL／TLS」アイコンをクリック。
- ②「概要」タブから「フル」または「フル（厳密）」にチェック。
- ③「オリジンサーバー」タブをクリックして先へ進みます。
- オリジンサーバータブで「証明書を作成」ボタンをクリック。
- すると「オリジン証明書のインストール」と題したモーダルが表示されるので、デフォルトのまま「次へ」ボタンをクリック。
- 表示された「オリジン証明書」「プライベートキー」をGitLab Pagesの設定にコピペします。
GitLab Pagesの設定
Cloudflareのページは開いたまま、新しいタブでGitLab Pagesの設定ページを開きます。
- ドメインを追加してLet’s Encryptはオフにします。下図①。
- ②「証明書（PEM）」欄にCroudflareの「オリジン証明書」をコピペします。
- 「オリジン証明書」の下に改行で1行開けて Cloudflare Origin CA — RSA Root を追加でコピペします。変更されてなければ下記のコードです。
- ③「キー（PEM）」欄にCroudflareの「プライベートキー」をコピペします。
- 検証ステータス欄に表示されている検証コードをCroudflareのDNS TXTレコードにコピペして設定します。完了したら④更新マークのボタンをクリック。「検証済み」となればOK。
- 最後に⑤「変更を保存」ボタンをクリックします。
上記1〜5の手順をwww有り／無しそれぞれについて行います。
Cloudflare Origin CA — RSA Root
-----BEGIN CERTIFICATE-----
MIIEADCCAuigAwIBAgIID+rOSdTGfGcwDQYJKoZIhvcNAQELBQAwgYsxCzAJBgNV
BAYTAlVTMRkwFwYDVQQKExBDbG91ZEZsYXJlLCBJbmMuMTQwMgYDVQQLEytDbG91
ZEZsYXJlIE9yaWdpbiBTU0wgQ2VydGlmaWNhdGUgQXV0aG9yaXR5MRYwFAYDVQQH
Ew1TYW4gRnJhbmNpc2NvMRMwEQYDVQQIEwpDYWxpZm9ybmlhMB4XDTE5MDgyMzIx
MDgwMFoXDTI5MDgxNTE3MDAwMFowgYsxCzAJBgNVBAYTAlVTMRkwFwYDVQQKExBD
bG91ZEZsYXJlLCBJbmMuMTQwMgYDVQQLEytDbG91ZEZsYXJlIE9yaWdpbiBTU0wg
Q2VydGlmaWNhdGUgQXV0aG9yaXR5MRYwFAYDVQQHEw1TYW4gRnJhbmNpc2NvMRMw
EQYDVQQIEwpDYWxpZm9ybmlhMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKC
AQEAwEiVZ/UoQpHmFsHvk5isBxRehukP8DG9JhFev3WZtG76WoTthvLJFRKFCHXm
V6Z5/66Z4S09mgsUuFwvJzMnE6Ej6yIsYNCb9r9QORa8BdhrkNn6kdTly3mdnykb
OomnwbUfLlExVgNdlP0XoRoeMwbQ4598foiHblO2B/LKuNfJzAMfS7oZe34b+vLB
yrP/1bgCSLdc1AxQc1AC0EsQQhgcyTJNgnG4va1c7ogPlwKyhbDyZ4e59N5lbYPJ
SmXI/cAe3jXj1FBLJZkwnoDKe0v13xeF+nF32smSH0qB7aJX2tBMW4TWtFPmzs5I
lwrFSySWAdwYdgxw180yKU0dvwIDAQABo2YwZDAOBgNVHQ8BAf8EBAMCAQYwEgYD
VR0TAQH/BAgwBgEB/wIBAjAdBgNVHQ4EFgQUJOhTV118NECHqeuU27rhFnj8KaQw
HwYDVR0jBBgwFoAUJOhTV118NECHqeuU27rhFnj8KaQwDQYJKoZIhvcNAQELBQAD
ggEBAHwOf9Ur1l0Ar5vFE6PNrZWrDfQIMyEfdgSKofCdTckbqXNTiXdgbHs+TWoQ
wAB0pfJDAHJDXOTCWRyTeXOseeOi5Btj5CnEuw3P0oXqdqevM1/+uWp0CM35zgZ8
VD4aITxity0djzE6Qnx3Syzz+ZkoBgTnNum7d9A66/V636x4vTeqbZFBr9erJzgz
hhurjcoacvRNhnjtDRM0dPeiCJ50CP3wEYuvUzDHUaowOsnLCjQIkWbR7Ni6KEIk
MOz2U0OBSif3FTkhCgZWQKOOLo1P42jHC3ssUZAtVNXrCk3fw9/E15k8NPkBazZ6
0iykLhH1trywrKRMVw67F44IE8Y=
-----END CERTIFICATE-----以上、GitLab PagesでCloudflare CDNを使用する設定は完了です。お疲れ様でした。
ちなみに、CloudflareのSSLを使った場合はGitLab Pagesの設定ページでドメインを削除するとすぐに次のプロジェクトに再利用できます。
🔗 リンク
参考
- VuePressのブログをカスタムドメイン+SSL対応させたGitLab Pagesにデプロイする | dotstudio
- Setting up GitLab Pages with Cloudflare Certificates | GitLab