React

React ↗ は、Facebookのオープンソースチームによって構築された、反応的で強力なフロントエンドアプリケーションを構築するための人気のフレームワークです。

このガイドでは、新しいReactアプリケーションを作成し、Cloudflare Pagesを使用してデプロイします。新しいReactアプリケーションを生成するためのバッテリー同梱ツールである create-react-app を使用します。

新しいプロジェクトの設定

create-cloudflare ↗ CLI (C3) を使用して新しいプロジェクトを設定します。C3は新しいプロジェクトディレクトリを作成し、Reactの公式セットアップツールを開始し、即座にデプロイするオプションを提供します。

create-cloudflare を使用して新しいReactプロジェクトを作成するには、次のコマンドを実行します：

npm create cloudflare@latest -- my-react-app --framework=react

yarn create cloudflare@latest my-react-app --framework=react

pnpm create cloudflare@latest my-react-app --framework=react

create-cloudflare は、Wrangler CLIやCloudflare Pagesアダプターを含む依存関係をインストールし、セットアップに関する質問をします。

アプリケーションのディレクトリに移動します：

cd my-react-app

ここから、次のコマンドでアプリケーションを実行できます：

npm start

Before you continue

All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.

Create a GitHub repository

Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:

git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin main

Cloudflare Pagesでデプロイ

Deploy via the `create-cloudflare` CLI (C3)

If you use create-cloudflare(C3) ↗ to create your new React project, C3 will install all dependencies needed for your project and prompt you to deploy your project via the CLI. If you deploy, your site will be live and you will be provided with a deployment URL.

Cloudflareダッシュボード経由でデプロイ

Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
アカウントホームで、Workers & Pages > Create application > Pages > Connect to Gitを選択します。
作成した新しいGitHubリポジトリを選択し、Set up builds and deploymentsセクションで次の情報を提供します：

Configuration option	Value
Production branch	`main`
Build command	`npm run build`
Build directory	`build`

サイトの設定が完了したら、最初のデプロイを開始できます。Cloudflare Pagesが create-react-app、プロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイするのを見ることができます。

サイトをデプロイした後、プロジェクト用のユニークなサブドメインが *.pages.dev に割り当てられます。 Reactアプリケーションに新しいコードをコミットするたびに、Cloudflare Pagesは自動的にプロジェクトを再ビルドし、デプロイします。また、新しいプルリクエストでプレビューのデプロイにアクセスできるため、変更が本番環境にデプロイされる前にサイトにどのように表示されるかをプレビューできます。

Learn more

By completing this guide, you have successfully deployed your React site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings