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 repositoryGet started を選択します。

Git プロバイダの接続

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

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

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

初回デプロイの確認

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

カスタムドメインの設定

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

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

メニューからアクセスする場合は、Workers & PagesCustom 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/TLSOverview を選択し、SSL/TLS encryption の Configure をクリックします。

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

気をつけること

NODE_VERSION の明示

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

ビルド時間と無料枠

無料枠は 同時ビルド 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 箇所にまとまって精神的に楽です。

Hugo で構築されています。
テーマ StackJimmy によって設計されています。