thumbnail

【GitLab】gitlab pagesでカスタムドメインを設定する

2022/10/20

gitlab pagesはGitLab上で簡単に静的サイトをホスティングできるサービスです(github pagesなどと同じ)。

gitlab pagesを利用するとCI/CD piplineから簡単にデプロイできるので、よくフロントのstaging環境などに活用しています。

GitLab上だけで簡単にデプロイが完結するので非常に便利なのですが、デフォルトのデプロイ先urlが[namespace].gitlab.io/../../[project名]となるため、フロントでの内部リンク先などの設定がややこしくなるという欠点があります。

そこでgitlab pagesに対してカスタムドメインを設定してみたのですが、結構簡単に設定できたので内容をまとめてみました。

カスタムドメイン設定方法

gitlab pages自体はすでに設定されている、かつ使用したいドメインも取得できている前提で進めます。

1. GitLabへのドメインの登録

GitLab上でpagesを利用しているプロジェクトに取得しているドメインを登録します。 プロジェクトのSettings/PagesからPagesの設定画面に飛び、New Domainのボタンをクリックします。

gitlab-pages-new-domain

New Domainボタンを押すとドメイン名入力画面に移るので使用するカスタムドメイン名を入力します。 (画像では例としてcustom.domain.comを登録しています)

gitlab-pages-domain-input

Create New Domainボタンを押すとGitLabへのドメイン追加は完了です。

2. DNSへのレコード登録

次に使用しているDNSサービスにレコードを登録します。 GitLab上でドメインを登録すると以下のような画面が出てきます。

gitlab-pages-edit-domain

ドメインにアクセスするためのDNSレコード例がDNSの欄に表示されているので、それに従いDNSサービスへ新しいレコードを登録します。

上の画像の場合だと登録するレコードはレコードタイプがALIAS(CNAME)で値は[namespace].gitlab.ioになります。

※ 使用するカスタムドメインがサブドメインではなくルートドメインの場合はレコードタイプをA、値を35.185.44.232で登録してください(参考)。

3. ドメインの所有権確認

最後にGitLab側がドメインの所有権を確認できるように、verification codeをDNSサービスへレコード登録します。

手順2でのドメイン設定画面上に登録すべきverification codeが表示されているので、そちらをDNSサービスのレコードへ追加します。

手順2画像の例ではドメインを_gitlab-pages-verification-code.custom.domain.com、レコードタイプをTXT、値をgitlab-pages-verification-code=62264...で登録すればOKです。

DNSへのverification codeの登録が完了したら、GitLab画面上からverifyを実行します。

gitlab-pages-verification-codeの認証が問題なく終われば、カスタムドメインからgitlab pagesへアクセスできるようになります。

おわり

gitlab pagesは閲覧権限をプロジェクトに招待されているGitLabユーザーに限定できるので、secureにstaging環境も用意できてオススメです 🥳

author picture

Mitsuru Takahashi

京都市内にてフリーランスエンジニアとして活動しています。

detail

Profile

author picture

Mitsuru Takahashi

京都市内にてフリーランスエンジニアとして活動しています。

detail

© 2022 mitsuru takahashi