インフラ・ミドルウェア

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

GitLab のリポジトリを Cloudflare Pages に連携し、push だけで静的サイトを自動デプロイする手順をまとめます。カスタムドメイン・SSL/TLS 設定や無料枠の注意点も解説します。

前提・環境

  • ソース管理: 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 箇所にまとまって精神的に楽です。