Hono

Hono ↗ は、Cloudflare Pages と Workers、Deno、Bun 向けの小さくシンプルで超高速な Web フレームワークです。Hono が生まれた経緯は、作者の 和田裕介 ↗ への インタビュー で確認できます。

このガイドでは、新しい Hono アプリケーションを作成し、Cloudflare Pages でデプロイします。

create-cloudflare ↗ CLI（C3）で新しいプロジェクトを作成します。C3 は新しいプロジェクトディレクトリを作成し、Hono の公式セットアップツールを起動し、すぐにデプロイするかどうかを選べます。

create-cloudflare で新しい Hono プロジェクトを作成するには、次のコマンドを実行します。

npm create cloudflare@latest -- my-hono-app --framework=hono --platform=pages

yarn create cloudflare my-hono-app --framework=hono --platform=pages

pnpm create cloudflare@latest my-hono-app --framework=hono --platform=pages

新しい Hono プロジェクトには、静的ファイル用の public/static ディレクトリと、サーバーサイドコードのエントリポイントである src/index.ts があります。

次のコマンドで、アプリをローカル開発します。

npm run dev

yarn run dev

pnpm run dev

生成された Web アプリケーションは http://localhost:8788 で確認できます。

すべてのフレームワークガイドは、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

create-cloudflare（C3） ↗ で新しい Hono プロジェクトを作成すると、C3 はプロジェクトに必要な依存関係をすべてインストールし、CLI からデプロイするかどうかを尋ねます。デプロイするとサイトが公開され、デプロイ URL が渡されます。

サイトを Pages にデプロイするには、次の手順を実行します。

1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

   Workers & Pages を開く ↗

2. Create application を選びます。

3. Pages タブを選びます。

4. Import an existing Git repository を選びます。

5. 作成した新しい GitHub リポジトリを選び、Begin setup を選びます。

6. Set up builds and deployments セクションで、次の情報を入力します。

サイトの設定が終わったら、最初のデプロイを開始できます。Cloudflare Pages が my-hono-app とプロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイする様子が表示されます。

サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。 Hono サイトに新しいコードをコミットするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も利用できるので、本番に出す前に変更後の見た目を確認できます。