Preact

Preact ↗ は、モダンなウェブアプリケーションを構築するための人気のあるオープンソースフレームワークです。Preactは、Reactと同じAPIとコンポーネントモデルを共有しているため、軽量な代替としても使用できます。

このガイドでは、新しいPreactアプリケーションを作成し、Cloudflare Pagesを使用してデプロイします。 Preactチームが構築したオールインワン開発ツールであるwmr ↗を使用して、最適化されたウェブアプリケーションを迅速に生成します。

新しいプロジェクトのセットアップ

ターミナルでnpm init ↗コマンドを実行して、新しいプロジェクトを作成し、タイトルを付けます：

npm init wmr your-project-name
cd your-project-name

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 init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Cloudflare Pagesでデプロイ

サイトをPagesにデプロイするには：

Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
アカウントホームで、Workers & Pages > Create application > Pages > Connect to Gitを選択します。

まだGitHubアカウントへのアクセスを承認していない場合は、承認を求められます。Cloudflareは、ソースからプロジェクトを監視およびデプロイするためにこれが必要です。特定のリポジトリへのアクセスを制限することもできますが、Cloudflare Pagesに追加のリポジトリを追加したい場合は、GitHubの設定 ↗内でこのリストを手動で更新する必要があります。

作成した新しいGitHubリポジトリを選択し、Set up builds and deploymentsセクションで次の情報を提供します：

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

オプションで、Project nameフィールドをカスタマイズできます。デフォルトではGitHubリポジトリの名前が設定されますが、一致する必要はありません。Project nameの値は、*.pages.devサブドメインとして割り当てられます。

設定が完了したら、Save and Deployを選択します。

最初のデプロイパイプラインが進行中であることが表示されます。Pagesはすべての依存関係をインストールし、指定された通りにプロジェクトをビルドします。

サイトをデプロイした後、*.pages.devでプロジェクトのユニークなサブドメインを受け取ります。

Cloudflare Pagesは、新しいコミットがプッシュされるたびにプロジェクトを自動的に再ビルドし、デプロイします。

さらに、プルリクエストのためにビルドおよびデプロイプロセスを繰り返すプレビューデプロイメントにアクセスできます。これにより、プロダクションにデプロイする前に、実際のURLでプロジェクトの変更をプレビューできます。

Learn more

By completing this guide, you have successfully deployed your Preact 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