HonoでAPIを作成し、Cloudflareにデプロイする。

はじめに

前回の続きです。CloudflareのAPIを作成した記事を見ていると、Honoのフレームワークをよく見かけます。たまに記事で見かけると思ってたので、今回Cloudflareを触るのをきっかけにHonoも実装していこうと思います。

そもそもHonoって何？？

Cloudflare社の和田裕介さんが開発したWebフレームワークです。Web標準に基づいて構築されているため、あらゆるJavaScript ランタイムで動作するのが特徴です。
(e.g.　Cloudflare Workers、Fastly Compute、Deno、Bun、Vercel、Netlify、AWS Lambda、Lambda@Edge、Node.js など)

小話：元々、和田さんはCloudflare社でHonoを作っていたわけではなく、Honoを作っていたらCloudflare社にスカウトされたようです。いいOSSを作成してればBigTech企業から声がかかってきたんですね。おもしろい。
今では、cloudflareのstarter　frameworkにhonoが選べるのがまたいいですね！

プロジェクト作成

~/develop/cloudflare_api (HEAD)$ npm create cloudflare@latest
Need to install the following packages:
create-cloudflare@2.23.0
Ok to proceed? (y) y


> npx
> create-cloudflare


using create-cloudflare version 2.23.0

╭ Create an application with Cloudflare Step 1 of 3
│ 
├ In which directory do you want to create your application?
│ dir ./young-moon-ae78
│
├ What would you like to start with?
│ category Framework Starter
│
╰ Which development framework do you want to use?
  ○ Analog
  ○ Angular
  ○ Astro
  ○ Docusaurus
  ○ Gatsby
  ● Hono
  ○ Next
  ○ Nuxt
  ○ Qwik
  ○ React
  ○ Remix
  ○ Solid
  ○ Svelte
  ○ Vue

何回かエンターを押していくとstarterの状態でデプロイまで実施されURLが発行されます。

プログラム

src/index.ts

import { Hono } from 'hono'

type Bindings = {
  [key in keyof CloudflareBindings]: CloudflareBindings[key]
}

const app = new Hono<{ Bindings: Bindings }>()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

export default app

→これだけだと発展性がないので、DB接続まで実施したいですね。