Preact ↗ は、モダンな Web アプリケーションを作るための人気のオープンソースフレームワークです。Preact は React と同じ API とコンポーネントモデルを共有するため、React の軽量な代替としても使えます。
このガイドでは、新しい Preact アプリケーションを作成し、Cloudflare Pages でデプロイします。
軽量なプロジェクトスキャフォールディングツール create-preact ↗ を使い、数秒で新しい Preact アプリをセットアップします。
ターミナルで npm init ↗ コマンドを実行し、タイトルを付けて新しいプロジェクトを作成します。
npm init preact
cd your-project-nameすべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。
SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。
詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。
repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub へプッシュします。
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サイトを Pages にデプロイするには、次の手順を実行します。
-
Cloudflare ダッシュボードで Workers & Pages ページを開きます。
Workers & Pages を開く ↗ -
Create application を選びます。
-
Pages タブを選びます。
-
Import an existing Git repository を選びます。
-
作成した新しい GitHub リポジトリを選び、Begin setup を選びます。
-
Set up builds and deployments セクションで、次の情報を入力します。
| 設定項目 | 値 |
|---|---|
| 本番ブランチ | main |
| ビルドコマンド | npm run build |
| ビルドディレクトリ | dist |
任意で Project name フィールドを変更できます。初期値は GitHub リポジトリ名ですが、一致させる必要はありません。Project name の値が *.pages.dev サブドメインになります。
設定が終わったら Save and Deploy を選択します。
最初のデプロイパイプラインが進行中であることが表示されます。Pages は依存関係をすべてインストールし、指定どおりにプロジェクトをビルドします。
サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。
新しいコミットをプッシュするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。
さらに、プルリクエスト向けにビルドとデプロイを繰り返す プレビューデプロイ も使えます。本番に出す前に、実際の URL で変更を確認できます。
このガイドを完了すると、Preact サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。