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

Cloudflare Pages に Web Analytics を導入する

Wed, 22 Jul 2026 00:00:00 +0900

Cloudflare Dashboard で、Workers & Pages を選択します。

対象の Pages プロジェクトを選択した後、Metrics タブを選択し、ページ下部にある Web Analytics → Enable をクリックします。

これで OK です。

Cloudflare Web Analytics を導入する

Tue, 21 Jul 2026 00:00:00 +0900

Cloudflare を経由していないサイトの場合の設定方法です。

Cloudflare Web Analytics にサイトを追加

Cloudflare Dashboard で、 Analytics > Web Analytics と進みます。

Add a site をクリックします。

ホスト名を入力し、Done をクリックします。

Cloudflare を経由していないサイトの場合、登録後に JavaScript snippet が表示されるのでコピーします。

このスニペットを、通常はの直前などに入れます。

Cloudflare Pages で静的サイトを公開する（GitLab 連携）

Sun, 17 May 2026 00:00:00 +0900

前提・環境

ソース管理: GitLab (GitHub でもやり方は同じ)
ホスティング: Cloudflare Pages
DNS: Cloudflare（既存ドメインのサブドメインに展開する想定）

GitLab 側で必要なこと

ほぼ何もしなくて構いません。
.gitlab-ci.yml を書く必要はなく、Cloudflare Pages が直接 git clone してビルドします。

最低限の準備は次のとおりです。

リポジトリが Cloudflare からアクセスできること（Public ならそのまま、Private なら次節の OAuth で許可します）
プロダクションブランチ（main など）を決めておくこと

ブランチ運用は Cloudflare Pages 側で自動的に処理されます。

プロダクションブランチへの push → 本番デプロイ
それ以外のブランチへの push → 自動でプレビュー URL が発行される

Cloudflare Pages 側のセットアップ

Cloudflare ダッシュボード → Workers & Pages を選択します。

Create application を選択します。

下部にある Get started をクリックします。

Import an existing Git repository の Get started を選択します。

Git プロバイダの接続

GitHub だけでなく GitLab も公式サポートされています。
GitLab のタブを選択し、Connect GitLab から OAuth で認証を行います。
認証後、対象リポジトリを選び、Begin setup を選択します。

ビルド設定で指定する項目

Framework preset: 使っているフレームワークに該当があれば選びます。自前のシェルスクリプトでビルドするなら None で構いません
Build command: リポジトリ直下から実行されるビルドコマンド
Build output directory: 成果物のディレクトリ（例: dist、public）
Root directory: 通常は空欄でリポジトリ直下
Environment variables: 必要に応じて設定します

初回デプロイの確認

Save and Deploy を選択すると数分でビルドが走り、プレビュー URL（<project>.pages.dev）が発行されます。
ここでまず動作確認をしてから、カスタムドメインを当てに行きます。

カスタムドメインの設定

DNS も Cloudflare で管理しているなら、ほぼワンクリックで終わります。

初回デプロイ完了後、Add custom domain を選択するとカスタムドメインの設定画面に移行します。

メニューからアクセスする場合は、Workers & Pages の Custom domains タブを選択します。

Set up a custom domain を選択します。
続いて、適用したいドメインを入力し、Continue をクリックします。
すると、CNAME レコードが自動で追加されます（手動編集は不要です）。

Activate domain をクリックすると設定完了です。
TLS 証明書も Cloudflare 側で自動発行されます（数分待ちます）

SSL/TLS モードの変更

SSL/TLS モードは Full (strict) にしておきます。
Cloudflare Pages の出口側は有効な証明書を持つので、Full (strict) でもエラーにはならず、Flexible のように HTTPS が中途半端な状態を避けられます。

SSL/TLS の Overview を選択し、SSL/TLS encryption の Configure をクリックします。

Full (Strict) を選択して、Save をクリックして完了です。

気をつけること

`NODE_VERSION` の明示

Cloudflare Pages のデフォルト Node は古いことがあります。
package.json の engines だけでは効かないので、ビルド設定の環境変数で明示します。

ビルド時間と無料枠

無料枠は 同時ビルド 1 並列・月 500 回までです。
push のたびにビルドが走るので、頻繁な push を続けると上限に近づきます。CI ライクに何度も push しまくる運用には向きません。

初回ビルドは npm install がフレッシュで 5〜10 分かかることもあります。2 回目以降はキャッシュが効きます。

プレビュー URL の検索エンジン除外

Cloudflare Pages は本番ドメイン以外（<project>.pages.dev や <branch>.<project>.pages.dev）にも 自動で X-Robots-Tag: noindex を付けます。Google にプレビュー版がインデックスされる事故は基本的に起きません。

まとめ

すべて 無料枠で完結し、自前のサーバー運用はゼロです。
GitLab に push して数分で本番反映される、最小構成になっています。

GitLab Pages + Cloudflare プロキシでも同じことはできますが、TXT 検証や SSL モード調整など「2 サービスを連携させるための作業」が発生します。
Cloudflare 内で完結させると、覚えることが 1 箇所にまとまって精神的に楽です。

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発行前はプロキシを灰色に保つ — 証明書が発行されてからオレンジ雲に切り替える