Cloudflareを使用してGitLab Pagesで独自ドメインを設定する

ベルトトルト
2019.07.04

GitLab Pagesで独自ドメインを設定していきます。

前回の記事でGitLab Pagesを使用して、ページを公開するところまでいきました。

2019.02.25

GitLab Pagesの使い方｜無料でホームページを作成

GitLabで無料でページを公開する方法を紹介します。 HTMLやCSSで静的コンテンツを作成し、独自ドメインを設定して公開するところまで、全て無料で出来ます。公開するためのサーバーの準備なども必要ありません。ページを公...

ページを公開した状態では、URLが「https://xxxxxx.gitlab.io」というように、「gitlab.io」というドメインになってしまうので、独自ドメインを使用できるようにします。

今回は「Cloudflare（クラウドフレア）」というサービスを利用します。
「Cloudflare」を利用する理由は、無料でSSLが利用できて、なおかつ簡単に設定できるから、という理由です。

Cloudflareの登録

まず、https://www.cloudflare.com/a/sign-up よりアカウントを作成します。
「Email」と「Password」を入力して「Create Account」ボタンをクリックします。

アカウントの登録は以上で完了です。次からドメインの設定になります。

Cloudflareでドメインの設定

WEBサイトのドメインを入力して「Add site」ボタンをクリックします。

DNSのスキャンが始まります。「Next」ボタンをクリックして次に進みます。

プランの選択画面になります。独自ドメインを設定するだけであれば無料プランで構わないので、「FREE」を選択し、「Confirm plan」ボタンをクリックします。

内容の確認になるので、「Confirm」ボタンをクリックします。

DNSレコードの設定画面になります。

ドメインとGitLab Pagesのページを紐付けるために、AレコードもしくはCNAMEを設定しますが、本記事ではCNAMEで設定します。
以下のようにCNAMEを設定します。

Name：取得済みの独自ドメイン
Value：GitLab PagesのURL（xxxxxx.gitlab.io のような形式）

CNAMEの入力が完了したら、一番下の「Continue」ボタンをクリックします。
ネームサーバーの変更を促されます。今回の記事では、ドメインを「お名前.com」で取得しているので

「03.dnsv.jp」と「01.dnsv.jp」⇒「kari.ns.cloudflare.com」「wanda.ns.cloudflare.com」に変更
「02.dnsv.jp」と「04.dnsv.jp」⇒ 削除

と言われています。
この内容を控えておいて、ひとまず「Continue」ボタンをクリックし、設定を完了します。

以上でドメインの設定が完了です。

ネームサーバーの設定

Cloudflareで変更を促されていたネームサーバーの変更を行います。
本記事では「お名前.com」での手順を記載します。

「お名前.com」にログインし、「ネームサーバーの変更」をクリックします。

変更対象のドメインをチェックし、「他のネームサーバーを利用」タブをクリックします。
プライマリネームサーバーとセカンダリネームサーバーに先ほど、Cloudflareの画面で表示されていた「wanda.ns.cloudflare.com」「kari.ns.cloudflare.com」を入力し、「確認画面へ進む」ボタンをクリックします。

変更内容を確認して、「設定する」ボタンをクリックします。

ネームサーバーの変更が完了です。

SSL証明書の作成

続いて、SSLを利用可能とするために、SSL証明書を作成します。
CloudflareのCrypto画面を開き、「Origin Certificates」にある「Create Certificate」ボタンをクリックします。

「List the hostnames」のところにドメインが初期表示されます。ドメインの内容を確認して、「Next」ボタンをクリックします。

これで証明書の文字列が生成されます。「Key format」はデフォルトのPEMのままとします。
「Origin Certificate」「Private key」この2つを後で使うので、コピーしておきます。

SSL証明書をGitLab Pagesに設定

GitLabのページを開き、「Settings」→「Pages」をクリックし、Pagesの設定画面を開きます。
「New Domain」ボタンをクリックします。

以下のように入力します。

「Domain」：設定したいカスタムドメイン
「Certificate (PEM)」：先ほど Cloudflare で作成したSSL証明書の「Origin Certificate」の文字列
「Key (PEM)」：先ほど Cloudflare で作成したSSL証明書の「Private key」の文字列

「Certificate (PEM)」「Key (PEM)」の文字列は、「—-BEGIN CERTIFICATE—-」などの文字を含めて全部コピペします。
さらにCloudflareの証明書の文字列が必要になります。
「CloudFlare’s Origin CA — RSA Root」というものです。

以下の文字列(CloudFlare’s Origin CA)をコピーします。

—–BEGIN CERTIFICATE—– MIID/DCCAuagAwIBAgIID+rOSdTGfGcwCwYJKoZIhvcNAQELMIGLMQswCQYDVQQG EwJVUzEZMBcGA1UEChMQQ2xvdWRGbGFyZSwgSW5jLjE0MDIGA1UECxMrQ2xvdWRG bGFyZSBPcmlnaW4gU1NMIENlcnRpZmljYXRlIEF1dGhvcml0eTEWMBQGA1UEBxMN U2FuIEZyYW5jaXNjbzETMBEGA1UECBMKQ2FsaWZvcm5pYTAeFw0xNDExMTMyMDM4 NTBaFw0xOTExMTQwMTQzNTBaMIGLMQswCQYDVQQGEwJVUzEZMBcGA1UEChMQQ2xv dWRGbGFyZSwgSW5jLjE0MDIGA1UECxMrQ2xvdWRGbGFyZSBPcmlnaW4gU1NMIENl cnRpZmljYXRlIEF1dGhvcml0eTEWMBQGA1UEBxMNU2FuIEZyYW5jaXNjbzETMBEG A1UECBMKQ2FsaWZvcm5pYTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB AMBIlWf1KEKR5hbB75OYrAcUXobpD/AxvSYRXr91mbRu+lqE7YbyyRUShQh15lem ef+umeEtPZoLFLhcLyczJxOhI+siLGDQm/a/UDkWvAXYa5DZ+pHU5ct5nZ8pGzqJ p8G1Hy5RMVYDXZT9F6EaHjMG0OOffH6Ih25TtgfyyrjXycwDH0u6GXt+G/rywcqz /9W4Aki3XNQMUHNQAtBLEEIYHMkyTYJxuL2tXO6ID5cCsoWw8meHufTeZW2DyUpl yP3AHt4149RQSyWZMJ6AyntL9d8Xhfpxd9rJkh9Kge2iV9rQTFuE1rRT5s7OSJcK xUsklgHcGHYMcNfNMilNHb8CAwEAAaNmMGQwDgYDVR0PAQH/BAQDAgAGMBIGA1Ud EwEB/wQIMAYBAf8CAQIwHQYDVR0OBBYEFCToU1ddfDRAh6nrlNu64RZ4/CmkMB8G A1UdIwQYMBaAFCToU1ddfDRAh6nrlNu64RZ4/CmkMAsGCSqGSIb3DQEBCwOCAQEA cQDBVAoRrhhsGegsSFsv1w8v27zzHKaJNv6ffLGIRvXK8VKKK0gKXh2zQtN9SnaD gYNe7Pr4C3I8ooYKRJJWLsmEHdGdnYYmj0OJfGrfQf6MLIc/11bQhLepZTxdhFYh QGgDl6gRmb8aDwk7Q92BPvek5nMzaWlP82ixavvYI+okoSY8pwdcVKobx6rWzMWz ZEC9M6H3F0dDYE23XcCFIdgNSAmmGyXPBstOe0aAJXwJTxOEPn36VWr0PKIQJy5Y 4o1wpMpqCOIwWc8J9REV/REzN6Z1LXImdUgXIXOwrz56gKUJzPejtBQyIGj0mveX Fu6q54beR89jDc+oABmOgg== —–END CERTIFICATE—–

コピーしたら、先ほど「Certificate (PEM)」の入力欄に入れた文字列の後ろに改行をいれて、「CloudFlare’s Origin CA」を貼り付けます。
「Certificate (PEM)」が下記のような感じになればOKです。