HonoでCloudflare Pagesにデプロイしてみた

HonoでPagesのテンプレートを作成

pnpm create hono my-awesome-app

cloudflare-pagesのテンプレートを選択

API Routing

docs

コード例

index.tsx

/** viteのエントリーポイントとして指定されたtsxファイル */
import router from './routes';

const app = new Hono();

/** GET RequestによるResponseを記述 */
app.get('/', (c) => {
  return c.render(<h1>Hello!</h1>)
});

/** Routing設定、次のコード例に続く */
app.route('/', router);
export default app;

routes/index.ts

import productRouter from './product';
const router = new Hono();

// ルート定義
router.route('/product', productRouter);

export default router;

routes/product.tsx

/** Component Render */
import { AllProduct, ShowProduct } from '../components/Product';

const productRouter = new Hono();

productRouter.get('/', (c) => {
  return c.render(<AllProduct />)
});

/** slug pathname routing */
productRouter.get('/:productId', (c) => {
  const { productId } = c.req.param();
  return c.render(<ShowProduct productId={productId} />)
});

export default productRouter;

* 省略しているコードがあります。
動かしたサンプルは以下

deploy

まずGitのcommitをします。CloudflareへのデプロイがgitのHEADを見ているからです。

git init
git add .
git commit -m "Initial commit."

pnpm run deploy

CLI上でPagesに新規で作るかのダイアログが出ます。
ブラウザでCloudflareの認証が入り、それが終わるとデプロイ完了です。

感想

• 一般的なviteとの相違点：viteはindex.htmlをエントリーポイントとしているが、Honoはindex.tsxで、distにビルドされたファイルも、_worker.jsになっている

• Routingはサーバーサイドで、React + react-router-domのようなSPA内のソフトナビゲーションではなく、リクエストごとにサーバー側でレスポンスを返す形になります

• Reactとの相違点：初期設定では、JSX構文を使用する際にReactのAPIのようなコードが自動補完で示されるが、公式のReactコードではなく、hono/jsxを使用した軽量な実装。このアプローチにより、Reactの仮想DOMや複雑なライブラリを使用することなく、簡潔で高速な処理が可能