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