Cloudflare初心者だけどHonoを触ってみたい！

はじめに

こんにちは！
犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です！

https://www.oto-trip.com/

この記事では、Cloudflare初心者がHonoのExampleを動かしていきます。
Honoってどんな感じ？と気になってらっしゃる方の参考になれば幸いです。

Honoとは

Honoとは、エッジで動く、イケてるフレームワークのようです！

https://zenn.dev/yusukebe/articles/0c7fed0949e6f7

使い方も簡単で、

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

app.get('/', (c) => c.text('Hono!!'))

export default app

とExpressっぽく書くだけで、超高速に動くアプリを簡単に作成できます。

HonoのExampleレポジトリ

ExampleはこちらのGithubレポジトリに公開されています。

https://github.com/honojs/examples

中身は、basicという基本的な機能紹介から、blogというCloudflareでブログを作るための例、jsx-ssrというHonoでJSXを使用する例など多種多様掲載されています。

インストール & デプロイ

では、さっそく公式Exampleのbasicを動かしていきます。

$ git clone https://github.com/honojs/examples.git
$ cd examples/basic
$ yarn install # 必要なライブラリのインストール
$ yarn dev # 開発サーバの起動

最初に開発サーバを起動すると、Cloudflare Workers用のCLIツールであるWranglerのログインを聞かれるので、OKしましょう。
そしてhttp://0.0.0.0:8787にアクセスすると、Hono!!って表示されます！簡単です。

ちなみにyarn deployだけで簡単にCloudflare Workersにデプロイできます。

$ yarn deploy

https://hono-example-basic.<UserID>.workers.dev/にアクセスすると、同様にHono!!って表示されるのが確認できます。
(デプロイが簡単なのは分かったので、忘れてしまう前に削除しましょう。)

コード

コードの中身を覗いていきましょう。

ルーティング

Honoはファイルベースのルーティングではなく、以下のようにコード上で表現します。

// Routing
app.get('/', (c) => c.text('Hono!!'))
// Use Response object directly
app.get('/hello', () => new Response('This is /hello'))

Basic認証

HonoでBasic認証を実装するのも非常に簡単です。
basicAuthという関数が提供されているので、それを以下のように使うだけです。

import { basicAuth } from 'hono/basic-auth'

app.use(
  '/auth/*',
  basicAuth({
    username: 'hono',
    password: 'acoolproject',
  })
)

これだけで、auth以下にアクセスするために認証が必要になります。

example/basicでbasicAuthを動かすためは、コードの一部を書き換える必要があります。

basic/src/index.ts

app.onError((err, c) => {
- console.error(`${err}`)
- return c.text('Custom Error Message', 500)
+ if (err instanceof HTTPException) {
+   const res = err.getResponse();
+   return new Response(
+     JSON.stringify({
+       message: 'Unauthorized',
+       status: 401,
+     }),
+     res
+   );
+ }
+ return c.text('Internal Server Error', 500);
});

• https://github.com/honojs/hono/issues/952

JSX

次にJSXの例を動かしてみましょう。

$ cd ../jsx-ssr
$ yarn install
$ yarn dev

basic同様にhttp://0.0.0.0:8787にアクセスすると以下のように表示されます。

基本骨格は以下の通りJSXで記載されています！

basic/src/index.ts

export const Top = (props: { posts: Post[] }) => {
  return (
    <Layout title={'Top'}>
      <main>
        <h2>Posts</h2>
        <ul>
          {props.posts.map((post) => (
            <List post={post} />
          ))}
        </ul>
      </main>
    </Layout>
  )
}

Next.js

なんと、Next.jsも動きます。

$ cd ../nextjs-stack
$ yarn install
$ yarn dev

Next.jsが動くなら、なんでも出来る！と思った一方で、せっかく軽量なフレームワークであるHonoに他のフレームワークを載せたら、それはなんだか違う気もしますけどね。

最後に

ここまで読んでいただきありがとうございました。
とても軽量で、そしてとても早いフレームワークであることが体験できました！
オトとりっぷでも何かに使えないか、模索したいですね。

また、犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください！

https://www.oto-trip.com/