Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Hono

最終更新 Markdown で表示Agent セットアップ

CLI から始める — Hono API、React SPA、Cloudflare Vite plugin を備えたフルスタックアプリを足場から作成し、高速に開発できます。

npm create cloudflare@latest -- my-hono-app --template=cloudflare/templates/vite-react-template

またはデプロイだけする — Hono、React、Vite を使ったフルスタックアプリを作成します。CI/CD とプレビューまで設定済みです。

Workers にデプロイ

Hono とは

Hono ↗ は、Web アプリケーション向けの超高速で軽量なフレームワークで、Cloudflare Workers との相性が非常に良いです。 Workers Assets を使うと、Workers 上の Hono API と SPA を組み合わせて、フルスタックアプリを簡単に作れます。

React SPA 付きのフルスタック Hono アプリを作成する

  1. create-cloudflare CLI（C3）で新しいプロジェクトを作成します

    npm create cloudflare@latest -- my-hono-app --template=cloudflare/templates/vite-react-template

    このプロジェクトはどう構成されていますか？

    プロジェクトの簡略化したファイルツリーです。

    • my-hono-app
      • src
        • worker/
          • index.ts
        • react-app/
      • index.html
      • vite.config.ts
      • wrangler.jsonc

    wrangler.jsonc は Wrangler 設定ファイル です。 このファイルでは次のとおりです。

    • main は src/worker/index.ts を指します。これが Worker 上で動く Hono アプリです。
    • assets.not_found_handling は single-page-application です。SPA が処理するルートは Worker に届かないため、課金対象になりません。
    • Cloudflare の開発者プラットフォーム上のリソースへバインディングを追加する場合は、ここで設定します。詳細は バインディング を参照してください。

    vite.config.ts は Cloudflare Vite plugin を使うよう設定されています。Worker を Cloudflare Workers ランタイムで実行するため、ローカル開発環境を本番に近づけられます。

    src/worker/index.ts が Hono アプリです。最初は /api エンドポイントが 1 つあります。 src/react-app/src/App.tsx の React アプリがこのエンドポイントを呼び出し、返ってきたメッセージを SPA に表示します。

  2. Cloudflare Vite plugin でローカル開発します

    プロジェクトを作成したら、プロジェクトディレクトリで次のコマンドを実行し、ローカル開発サーバーを起動します。

    npm run dev

    ローカル開発では何が起きていますか？

    このプロジェクトはローカル開発とビルドに Vite を使うため、ホットモジュールリプレースメント（HMR）を含む Vite の機能がすべて使えます。

    加えて、vite.config.ts は Cloudflare Vite plugin を使うよう設定されています。アプリケーションは本番と同じ Cloudflare Workers ランタイムで動き、バインディングのローカルエミュレーションにもアクセスできます。

  3. プロジェクトをデプロイします

    プロジェクトは、*.workers.dev サブドメインまたは カスタムドメイン にデプロイできます。自機からでも、Cloudflare の Workers Builds を含む任意の CI/CD システムからでもデプロイできます。

    次のコマンドでビルドとデプロイを行います。CI を使う場合は、「デプロイコマンド」 の設定も合わせて更新してください。

    npm run deploy

バインディング

Hono アプリからバインディングへアクセスする方法は、Hono のドキュメント ↗ を参照してください。

バインディングを使うと、アプリケーションを Cloudflare Developer Platform と完全に統合でき、コンピュート、ストレージ、AI などへアクセスできます。

役に立ちましたか？