カスタムドメイン

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

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

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



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

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

 

Cloudflareの登録

まず、https://www.cloudflare.com/a/sign-up よりアカウントを作成します。

「Email」と「Password」を入力して「Create Account」ボタンをクリックします。

Cloudflareの登録

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

Cloudflareでドメインの設定

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

サイトを入力

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

DNSの検索

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

プランの選択

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

プランの確認

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

DNSレコードの設定

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

  • Name:取得済みの独自ドメイン
  • Value:GitLab PagesのURL(xxxxxx.gitlab.io のような形式)

CNAMEの設定

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」にログインし、「ネームサーバーの変更」をクリックします。

お名前.comのメニュー

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

変更するネームサーバーを入力

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

ネームサーバーの変更確認

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

ネームサーバーの変更完了

SSL証明書の作成

続いて、SSLを利用可能とするために、SSL証明書を作成します。

CloudflareのCrypto画面を開き、「Origin Certificates」にある「Create Certificate」ボタンをクリックします。

CloudflareのCrypto

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

SSL証明書の作成

これで証明書の文字列が生成されます。
「Key format」はデフォルトのPEMのままとします。

「Origin Certificate」
「Private key」
この2つを後で使うので、コピーしておきます。

SSL証明書の作成

SSL証明書の作成

SSL証明書をGitLab Pagesに設定

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

GitLab Pages

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

  • 「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です。

新しいドメイン

ここまで出来たら「Create New Domain」ボタンをクリックします。

作成が完了すると、以下のような画面になります。
この画面の指示にしたがってCloudflareのDNS設定画面でTXTレコードを設定する必要があります。

TXTレコードの設定

TXTレコードの設定

GitLab側から見ると、登録したドメインをそのユーザーが所有しているか分からないため、所有権の確認が必要となります。

上記のGitLabの画面で、「Verification status」のところに以下のような文字列が表示されています。

_gitlab-pages-verification-code.xxxxxxxxxxx TXT gitlab-pages-verification-code=xxxxxxxxxxxxxxxxxx

この情報をCloudflareに登録します。

Cloudflareの画面上部のメニューから「DNS」を選択し、TXTレコードを以下のように登録します。

DNSレコードの設定

登録が完了したら、GitLab Pagesの画面に戻ります。
赤くなっている「Unverified」ボタンをクリックします。
登録が正常に完了していれば、「Successfully verified」の文字が表示されます。

設定した内容が反映されるまで時間が掛かる場合があります。

認証成功

SSLの設定

Cloudflareの画面上部のメニューから「Crypto」を選択し、SSLの設定を行います。
「Full」に設定しておきます。

SSLの設定

あとは、設定したドメインが反映されるのを待ちます。
しばらく時間が掛かることもあります。

以上でGitLab Pagesで独自ドメインを使用することができました。

GitLab PagesやCloudflareを使用することで、ドメイン登録料は掛かるものの、それ以外は無料で独自ドメイン+SSLでページを公開することができますので、ぜひ利用してみてください。

参考

・公式ドキュメント(英語)
https://docs.gitlab.com/ee/user/project/pages/getting_started_part_three.html

 

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。