Hono

Hono ↗は、Cloudflare PagesおよびWorkers、Deno、Bun用の小さく、シンプルで、超高速なウェブフレームワークです。このガイドでは、新しいHonoアプリケーションを作成し、Cloudflare Pagesを使用してデプロイします。

新しいプロジェクトを作成する

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

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

npm

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

yarn

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

pnpm

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

プロジェクトを開き、src/server.jsファイル（またはTypeScriptを使用している場合はsrc/server.ts）を作成します。ファイルに次の内容を追加します：

import { Hono } from "hono";
const app = new Hono();

app.get("/", (ctx) => ctx.text("Hello world, this is Hono!!"));

export default app;

CSS、画像、またはJavaScriptファイルなどの静的ファイルを提供するには、src/server.js/tsファイルに次の内容を追加します：

app.get("/public/*", async (ctx) => {
  return await ctx.env.ASSETS.fetch(ctx.req.raw);
});

これにより、dist内のpublicフォルダー内のすべてのファイルがアプリケーションで提供されます。

ノート

distディレクトリはバンドルプロセス中に作成され、使用されます。distディレクトリ内にpublicディレクトリを作成する必要があります。dist内にpublicを持つことは一般的には望ましくありません。なぜなら、distはリポジトリにコミットするためのディレクトリではなく、publicはそうだからです。

この問題を解決するためのさまざまな代替手段があります。たとえば、.gitignoreファイルを設定してdistディレクトリを含めるが、その内容はpublicディレクトリを除外することができます。あるいは、別の場所にpublicディレクトリを作成し、バンドルプロセスの一部としてdist内にコピーすることもできます。

package.jsonファイルを開き、scriptsセクションを更新します：

JavaScript

    "scripts": {
        "dev": "run-p dev:*",
        "dev:wrangler": "wrangler pages dev dist --live-reload",
        "dev:esbuild": "esbuild --bundle src/server.js --format=esm --watch --outfile=dist/_worker.js",
        "build": "esbuild --bundle src/server.js --format=esm --outfile=dist/_worker.js",
        "deploy": "wrangler pages publish dist"
    },

TypeScript

    "scripts": {
        "dev": "run-p dev:*",
        "dev:wrangler": "wrangler pages dev dist --live-reload",
        "dev:esbuild": "esbuild --bundle src/server.ts --format=esm --watch --outfile=dist/_worker.js",
        "build": "esbuild --bundle src/server.ts --format=esm --outfile=dist/_worker.js",
        "deploy": "wrangler pages publish dist"
    },

次に、次のコマンドを実行します。

npm install npm-run-all --save-dev

npm-run-allをインストールすると、単一のコマンド（npm run dev）を使用して、npm run dev:wranglerとnpm run dev:esbuildを同時にウォッチモードで実行できるようになります。

ローカル開発で実行する

次のコマンドを実行して開発ワークフローを開始します：

npm run dev

http://localhost:8788で生成されたウェブアプリケーションを確認できるはずです。

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でデプロイする

Deploy via the create-cloudflare CLI (C3)

If you use create-cloudflare(C3) ↗ to create your new Hono 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ダッシュボード経由でデプロイする

1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
2. アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Gitに接続を選択します。
3. 作成した新しいGitHubリポジトリを選択し、ビルドとデプロイの設定セクションで次の情報を提供します：

設定オプション	値
プロダクションブランチ	main
ビルドコマンド	npm run build
ビルドディレクトリ	dist

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

ノート

Cloudflare Pagesに最初のサイトをデプロイするための完全なガイドについては、始めるガイドを参照してください。

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

関連リソース

チュートリアル

HonoとCloudflare Pagesに関する他のチュートリアルについては、次のリソースを参照してください：

• スタッフディレクトリアプリケーションの構築 : このチュートリアルでは、D1を使用してスタッフディレクトリを構築する方法を学びます。このアプリケーションは、ユーザーが組織の従業員に関する情報にアクセスできるようにし、管理者がアプリ内で新しい従業員を直接追加できるようにします。 これを行うには、まずデータをシームレスに管理するためのD1データベースをセットアップし、その後HonoXフレームワーク ↗とCloudflare Pagesを使用してアプリケーションを開発およびデプロイします。

デモアプリ

HonoとCloudflare Pagesを使用したデモアプリケーションについては、次のリソースを参照してください：

• Hackathon Helper : A series of starters for Hackathons. Get building quicker! Python, Streamlit, Workers, and Pages starters for all your AI needs!
• NBA Finals Polling and Predictor : This stateful polling application uses Cloudflare Workers AI, Cloudflare Pages, Cloudflare Durable Objects, and Hono to keep track of users' votes for different basketball teams and generates personal predictions for the series.
• Whatever-ify : Turn yourself into...whatever. Take a photo, get a description, generate a scene and character, then generate an image based on that calendar.
• Staff Directory demo : Built using the powerful combination of HonoX for backend logic, Cloudflare Pages for fast and secure hosting, and Cloudflare D1 for seamless database management.
• Vanilla JavaScript Chat Application using Cloudflare Workers AI : A web based chat interface built on Cloudflare Pages that allows for exploring Text Generation models on Cloudflare Workers AI. Design is built using tailwind.