このガイドでは、Cloudflare Pages を始め、Git 連携で最初の Web サイトを Pages プラットフォームにデプロイします。Git 連携を使うと、接続した GitHub または GitLab リポジトリへ変更をプッシュするたびに、自動でビルドとデプロイが行われます。
Pages は GitHub ↗ と GitLab ↗ に対応しています。最初の Pages プロジェクトを作成する手順は次のとおりです。
-
Cloudflare ダッシュボードで Workers & Pages ページを開きます。
Workers & Pages を開く ↗ -
Create application > Pages > Connect to Git を選択します。
希望する Git プロバイダーでサインインするよう求められます。これにより Cloudflare Pages がプロジェクトをデプロイし、PR を プレビューデプロイ で更新できます。
個人アカウント、または Pages にアクセスを許可した組織から、GitHub プロジェクトを選べます。Pages でデプロイする GitHub リポジトリを指定します。プライベートリポジトリとパブリックリポジトリの両方に対応しています。
GitLab を使う場合は、個人アカウント、または所属する GitLab グループからプロジェクトを選べます。Pages でデプロイする GitLab リポジトリを指定します。プライベートリポジトリとパブリックリポジトリの両方に対応しています。
Git リポジトリを選んだら、Install & Authorize と Begin setup を選びます。続けて Set up builds and deployments でデプロイをカスタマイズできます。
project name は、プロジェクトのホスト名の生成に使われます。デフォルトでは Git プロジェクト名と同じです。
Production branch は、Cloudflare Pages がサイトの本番版をデプロイするときに使うブランチです。ほとんどのプロジェクトでは main または master ブランチです。本番ブランチ以外のブランチは、プレビューデプロイ に使われます。
Cloudflare Pages にデプロイするフレームワーク、ツール、プロジェクトに応じて、サイトの build command と build output directory を指定し、Cloudflare Pages にサイトのデプロイ方法を伝えます。このディレクトリの内容が、Web サイトのコンテンツとして Cloudflare Pages にアップロードされます。
ダッシュボードには、フレームワークごとのプリセットが用意されています。プリセットを選ぶと、そのフレームワークのデフォルトのビルドコマンドとビルド出力ディレクトリが入ります。この欄の正しい値がわからない場合は、ビルド設定 を参照してください。ビルド手順が不要な場合は、Build command 欄を空のままにします。
Cloudflare Pages は、リポジトリのルートディレクトリから処理を始めます。インストール手順を含むビルドパイプライン全体が、この場所から始まります。変更したい場合は、Root directory (advanced) > Path 欄で新しいルートディレクトリを指定します。
ビルド設定のしくみ
ビルドコマンドはフレームワークが提供します。たとえば Gatsby フレームワークは、ビルドコマンドとして gatsby build を使います。フレームワークを使わない場合は、Build command 欄を空のままにします。
ビルド出力ディレクトリはビルドコマンドから決まります。フレームワークごとに命名規則があり、たとえば多くのフレームワークではビルド出力ディレクトリ名が /public です。
ルートディレクトリは、サイトのコンテンツがある場所です。指定しない場合、Cloudflare は連携した Git リポジトリをルートディレクトリとみなします。モノレポのように 1 つのリポジトリに複数プロジェクトがある場合は、ルートディレクトリを指定する必要があります。
詳細は ビルド設定 を参照してください。
環境変数は、ビルドワークフローへ設定を渡す一般的な方法です。プロジェクトのセットアップ中に、キーと値のペアを環境変数として指定できます。初回ビルドが完了したあとに、さらにカスタマイズできます。
Node.js バージョンの環境変数の設定方法は、Hexo フレームワークガイド を参照してください。
Framework preset を選ぶか、フレームワークを使わない場合はこの欄を空のままにし、Root directory (advanced) を設定し、Environment variables (optional) をカスタマイズしたら、デプロイできます。
ビルド設定が終わったら、Save and Deploy を選びます。Cloudflare Pages がプロジェクトの依存関係をインストールし、プロジェクトをビルドし、Cloudflare のグローバルネットワークへデプロイするあいだ、プロジェクトのビルドログが出力されます。
プロジェクトのデプロイが完了すると、デプロイしたサイトを確認するための一意の URL が届きます。
初回デプロイのあと、Continue to project を選ぶと、Cloudflare Pages ダッシュボードでプロジェクトの設定を確認できます。このページでは、プロジェクトの現在のデプロイ状態、本番 URL と関連するコミット、過去のすべてのデプロイを確認できます。
Pages プロジェクトを削除する手順は次のとおりです。
-
Cloudflare ダッシュボードで Workers & Pages ページを開きます。
Workers & Pages を開く ↗ -
Pages プロジェクトを選び、Settings > Delete project を選びます。
Settings セクションでは、プロジェクト名の変更、Git 設定の更新、ビルドコマンド、ビルドディレクトリ、環境変数の更新など、詳細設定を構成できます。
- Pages プロジェクトに カスタムドメインを設定する。
- Cloudflare Web Analytics を有効にする。
- Access ポリシーを設定して、デプロイプレビューを閲覧できるユーザーを管理する。