ほのとアストロの使い方

Astro: 強力な Web フレームワークで、私の現在のお気に入りです。その多用途性により、幅広いプロジェクトに最適です。 ただし、API 開発に関しては Hono が際立っています。

Hono: ユーザーフレンドリーな RPC システム (tRPC に似ていますが、より高速です) を備えたシンプルでポータブルな API フレームワーク。 このガイドでは、両方の長所を組み合わせる方法を説明します。

Astro のセットアップ

次を使用して新しい Astro プロジェクトを作成します:

<code class="language-bash">npm create astro@latest</code>

CLI プロンプトに従います。 次のコードでプロジェクトを開始します:

<code class="language-bash">npm run dev</code>

http://localhost:4321 で Astro プロジェクトにアクセスします。

ほののセットアップ

Hono をインストールします:

<code class="language-bash">npm install hono</code>

src/pages/api/[...path].ts でキャッチオール ルートを作成します:

<code class="language-typescript">// src/pages/api/[...path].ts
import { Hono } from 'hono';

const app = new Hono().basePath('/api/');

app.get('/posts', async (c) => {
    return {
        posts: [
            { id: 1, title: 'Hello World' },
            { id: 2, title: 'Goodbye World' },
        ],
    };
});
</code>

.basePath('/api/') は重要です。 Hono のルーティングを Astro のファイル構造に合わせます。 Astro プロジェクトのエンドポイントの場所に一致するように、必要に応じてこのパスを調整します (例: /foo/bar/ の場合は src/pages/foo/bar/[...path].ts)。

ほのとアストロの統合

すべてのリクエストを処理し、Hono にルーティングするための ALL エクスポートを作成します:

<code class="language-typescript">// src/pages/api/[...path].ts
import { Hono } from 'hono';
import type { APIRoute } from 'astro';

// ... (Hono app setup from previous step) ...

export type App = typeof app; // Export Hono app type

export const ALL: APIRoute = (context) => app.fetch(context.request);</code>

これで、http://localhost:4321/api/posts は Hono 経由で模擬データを返します。

型付き RPC クライアントの追加

タイプセーフな API 対話の場合は、Hono の hc クライアントを使用します:

<code class="language-typescript">// src/pages/some-astro-page.astro
import { hc } from 'hono/client';
import type { App } from './api/[...path].ts';

const client = hc<App>(window.location.href);

const response = await client.posts.$get();
const json = await response.json();

console.log(json); // { posts: [...] }</code>

結論

このセットアップは、Astro のフロントエンド機能と Hono の効率的なバックエンド機能を組み合わせ、タイプ セーフティを備えた合理化された開発エクスペリエンスを提供します。 Hono の広範な機能を探索して、さらに高度な API 開発を行ってください。

以上がほのとアストロの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。