Gatsby ↗ は、ウェブサイトとアプリを作るオープンソースの React フレームワークです。このガイドでは、新しい Gatsby アプリケーションを作成し、Cloudflare Pages でデプロイします。新しい Gatsby サイトの作成には gatsby CLI を使います。
ターミナルで次のコマンドを実行し、gatsby CLI をインストールします。
npm install -g gatsby-cliGatsby をインストールしたら、gatsby new で新しいプロジェクトを作成できます。new コマンドには、既存テンプレートを使うための GitHub URL を渡せます。例として、次のコマンドをターミナルで実行し、gatsby-starter-lumen テンプレートを使います。ほかのテンプレートは Gatsby の Starters ↗ で確認できます。
npx gatsby new my-gatsby-site https://github.com/alxshelepenok/gatsby-starter-lumenすべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。
SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。
詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。
repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub へプッシュします。
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin mainサイトを Pages にデプロイする手順は次のとおりです。
-
Cloudflare ダッシュボードで Workers & Pages ページを開きます。
Workers & Pages を開く ↗ -
Create application を選択します。
-
Pages タブを選択します。
-
Import an existing Git repository を選択します。
-
作成した新しい GitHub リポジトリを選択し、Begin setup を選択します。
-
Build settings セクションで、Framework preset に Gatsby を選びます。選ぶと、次の情報が表示されます。
| 設定項目 | 値 |
|---|---|
| 本番ブランチ | main |
| ビルドコマンド | npx gatsby build |
| ビルドディレクトリ | public |
サイトの設定が終わったら、最初のデプロイを開始できます。Cloudflare Pages が gatsby とプロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイする様子が表示されます。
サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。
Gatsby サイトに新しいコードをコミットするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も使えるので、本番に出す前に変更後の見た目を確認できます。
Gatsby プロジェクトで 動的ルート ↗ を使う場合は、これらのルートが効くように プロキシリダイレクト を設定します。
/users/[id] のような動的ルートがある場合は、次の例を参考にプロキシリダイレクトを作成します。
/users/* /users/:id 200このガイドを完了すると、Gatsby サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。