Cloudflare で取得した独自ドメインを GitLab Pages に設定する方法

Tue, 12 May 2026 00:00:00 +0900

全体の流れ

GitLab側: カスタムドメイン登録と検証コードの取得
GitLab側: Pagesの公開範囲（Visibility）の設定
Cloudflare側: DNSレコード（CNAME/TXT）の設定
最終確認: SSL証明書の発行とプロキシの有効化

1. GitLab側でカスタムドメインを追加する

まず、GitLabに「このドメインを使います」と伝えて、検証用のコードを発行します。

プロジェクトの左メニュー [Deploy] > [Pages] を開きます。
Domains & settings のタブを選択し、[Add Domain] をクリックします。
使用したいドメイン（例: blog.example.com）を入力し、[Create new domain] をクリックします。
表示された画面から以下の2点をメモします。
- TXTレコードの値: gitlab-pages-verification-code=...
- CNAMEのターゲット: username-12345.gitlab.io

自分の「名前空間（Target）」を確認する方法

GitLab PagesのデフォルトURLを確認してください。例：https://username-12345.gitlab.io/my-project

この場合、Cloudflare側で指定するターゲットは username-12345.gitlab.io です。 .gitlab.io の直前まで（スラッシュより前のホスト部分）が、あなたの「名前空間（Namespace）」となります。

2. プロジェクトはPrivateのまま、Pagesだけを公開する

「ソースコードは見せたくないが、ブログとして誰でも見れるようにしたい」場合は、以下の設定が必須です。

[Settings] > [General] を開きます。
[Visibility, project features and permissions] セクションを展開します。
Project visibility は [Private] のままにします。
下の方にある [Pages] の権限設定を [Everyone] に変更します。
- ※ここが Only Project Members だと、独自ドメインにアクセスしてもGitLabのログイン画面が出てしまいます。
[Save changes] で保存します。

3. Cloudflare側でDNSレコードを設定する

Cloudflareの管理画面の左メニューから [Domains] > [Overview] を開き、該当のドメインをクリックします。

さらに左メニューから [DNS] > [Records] を開き、Add record をクリックして、以下の2つのレコードを追加します。

① CNAMEレコード（接続用）

項目	設定値の例	補足
Type	`CNAME`
Name	`blog`	サブドメイン部分のみ入力
Target	`username-12345.gitlab.io`	先ほど確認したGitLabのホスト名
Proxy status	DNS only (灰色雲)	SSL発行をスムーズにするため最初は必ず「灰色」にする

② TXTレコード（ドメイン所有確認用）

項目	設定値の例	補足
Type	`TXT`
Name	`_gitlab-pages-verification-code.blog`	`_gitlab-pages-verification-code.` の後にサブドメイン名を付ける
Content	`gitlab-pages-verification-code=...`	GitLabからコピーした検証コード

4. 仕上げ：検証とプロキシ有効化

① GitLabで検証する

DNS設定後、GitLabのPages設定画面で [Verify]（更新マーク）ボタンを押します。「Verified」になれば成功です。

⚠️ すぐに認証されない場合があります。 Cloudflare管理ドメインはDNSのTTLが短いため反映は比較的早いですが、DNSの浸透には最大48時間かかることがあります。Verifyが通らない場合は時間をおいて再試行してください。

② SSL証明書の発行を待つ

検証完了後、数分〜30分ほどでLet’s Encryptの証明書が自動発行され、https:// でアクセスできるようになります。

③ CloudflareのプロキシをONにする

https:// で正常に表示されたことを確認してから、CloudflareのDNSレコードを [Proxied（オレンジ雲）] に切り替えます。

プロキシを ON にするメリット

CDNによる高速化: 画像やJSがキャッシュされ、表示速度が向上します。
セキュリティ強化: DDoS保護やWAFが利用可能になります。
アクセス解析: Cloudflare側でトラフィックやアクセス地域を確認できます。

④ CloudflareのSSL/TLS設定を変更する

プロキシを有効にしたら、Cloudflareの [SSL/TLS] > [Overview] を開き、暗号化モードを確認します。

モード	説明	推奨
`Full`	GitLab側の証明書を検証せず暗号化	初心者・通常利用向け
`Full (strict)`	GitLab側にLet’s Encryptなど信頼されたCA発行の証明書が必要	SSL発行が正常に完了していれば利用可

⚠️ Full (strict) はSSL証明書が有効な状態でのみ機能します。証明書の発行前や更新タイミングで一時的にエラーになるリスクがあるため、迷ったら Full を選択してください。

5. 運用上の注意：キャッシュの扱い

Cloudflareのプロキシを有効にすると、CSSや画像などの静的ファイルがキャッシュされます。 サイトを更新しても古いコンテンツが表示される場合は、Cloudflareのキャッシュをクリアしてください。

手動でキャッシュをクリアする方法:

Cloudflareダッシュボードの [Caching] > [Configuration] を開く
[Purge Cache] > [Purge Everything]（または特定URLを指定）を実行する

まとめ

GitLab Pagesを独自ドメインで運用する主なポイントは以下の3点です。

正しいCNAMEターゲットを設定する — GitLabのPages URLから実際のホスト名を確認して使う
PagesのVisibilityを「Everyone」にする — Privateプロジェクトでも公開アクセスを許可する
SSL発行前はプロキシを灰色に保つ — 証明書が発行されてからオレンジ雲に切り替える

Cloudflare on ポンコツ地方エンジニアの技術ブログ