Deno

Deno は V8 上に構築された JavaScript ランタイムです。 Node.js ではありません。 Hono は Deno でも動作します。

Hono を使用して TypeScript でコードを書き、 deno コマンドでアプリケーションを起動します。 そして "Deno Deploy" にデプロイ出来ます。

1. Deno のインストール

まず deno コマンドをインストールします。 公式ドキュメント を参照してください。

2. セットアップ

Deno でもスターターを使用できます。 deno init コマンドでプロジェクトを作成してください。

deno init --npm hono --template=deno my-app

my-app に移動しますが、 Deno では Hono を明示的にインストールする必要はありません。

cd my-app

3. Hello World

main.ts を変更します:

main.ts

import { Hono } from 'hono'

const app = new Hono()

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

Deno.serve(app.fetch)

4. Run

ローカルで開発サーバーを実行します。次に、 Web ブラウザで http://localhost:8000 にアクセスします。

deno task start

ポートを変える

main.ts の Deno.serve の引数を変更することでポート番号を指定できます:

Deno.serve(app.fetch) 
Deno.serve({ port: 8787 }, app.fetch) 

静的ファイルの提供

静的ファイルを提供するには hono/deno から serveStatic をインポートして使用します。

import { Hono } from 'hono'
import { serveStatic } from 'hono/deno'

const app = new Hono()

app.use('/static/*', serveStatic({ root: './' }))
app.use('/favicon.ico', serveStatic({ path: './favicon.ico' }))
app.get('/', (c) => c.text('You can access: /static/hello.txt'))
app.get('*', serveStatic({ path: './static/fallback.txt' }))

Deno.serve(app.fetch)

上のコードは、このようなディレクトリ構成で機能します。

./
├── favicon.ico
├── index.ts
└── static
    ├── demo
    │   └── index.html
    ├── fallback.txt
    ├── hello.txt
    └── images
        └── dinotocat.png

rewriteRequestPath

http://localhost:8000/static/* を ./statics にマップしたい場合、 rewriteRequestPath をオプションに追加してください:

app.get(
  '/static/*',
  serveStatic({
    root: './',
    rewriteRequestPath: (path) =>
      path.replace(/^\/static/, '/statics'),
  })
)

mimes

MIME タイプを追加するためには mimes を使用します:

app.get(
  '/static/*',
  serveStatic({
    mimes: {
      m3u8: 'application/vnd.apple.mpegurl',
      ts: 'video/mp2t',
    },
  })
)

onFound

要求されたファイルが見つかったときの処理を onFound で指定できます:

app.get(
  '/static/*',
  serveStatic({
    // ...
    onFound: (_path, c) => {
      c.header('Cache-Control', `public, immutable, max-age=31536000`)
    },
  })
)

onNotFound

onNotFound を使用して、要求されたファイルが見つからない場合の処理を記述できます:

app.get(
  '/static/*',
  serveStatic({
    onNotFound: (path, c) => {
      console.log(`${path} is not found, you access ${c.req.path}`)
    },
  })
)

precompressed

precompressed オプションを使うと Accept-Encoding ヘッダに基づいて .br や .gz といった拡張子を持っているファイルが有るか確認し、提供します。 Brotli 、 Zstd 、 Gzip の順で優先されます。 それらが無ければ元のファイルが提供されます。

app.get(
  '/static/*',
  serveStatic({
    precompressed: true,
  })
)

Deno Deploy

Deno Deploy is a serverless platform for running JavaScript and TypeScript applications in the cloud. It provides a management plane for deploying and running applications through integrations like GitHub deployment.

Hono は Deno Deploy もサポートしています。 公式ドキュメントを参照してください。

テスト

Deno でアプリケーションをテストするのは簡単です。 Deno.test と、公式ライブラリの assert か assertEquals を @std/assert からインポートして書いてください。

deno add jsr:@std/assert

hello.ts

import { Hono } from 'hono'
import { assertEquals } from '@std/assert'

Deno.test('Hello World', async () => {
  const app = new Hono()
  app.get('/', (c) => c.text('Please test me'))

  const res = await app.request('http://localhost/')
  assertEquals(res.status, 200)
})

次にこのコマンドを実行します:

deno test hello.ts

npm と JSR

Hono is available on both npm and JSR (the JavaScript Registry). You can use either npm:hono or jsr:@hono/hono in your deno.json:

{
  "imports": {
    "hono": "jsr:@hono/hono"
    "hono": "npm:hono"
  }
}

To use middleware you need to use the Deno directory syntaxt in the import

{
  "imports": {
    "hono/": "npm:/hono/"
  }
}

When using third-party middleware, you may need to use Hono from the same registry as the middleware for proper TypeScript type inference. For example, if using the middleware from npm, you should also use Hono from npm:

{
  "imports": {
    "hono": "npm:hono",
    "zod": "npm:zod",
    "@hono/zod-validator": "npm:@hono/zod-validator"
  }
}

We also provide many third-party middleware packages on JSR. When using the middleware on JSR, use Hono from JSR:

{
  "imports": {
    "hono": "jsr:@hono/hono",
    "zod": "npm:zod",
    "@hono/zod-validator": "jsr:@hono/zod-validator"
  }
}