Hono + Cloudflare Workers

Hono

普段APIを立てるときはNestJSを利用するのですが、今回はHonoを使います。

その理由はNodeJSへの依存が少ないのとCloudflare Workersに対応しているからです、ただそれだけ。

環境構築

Cloudflare Workers + Honoのテンプレートをつくっていたのでそれを利用します。

Cloudflare Workersの設定は主にwrangler.tomlに書き込まれているので、ここを設定します。

`wrangler.toml`

1
name = "hono-app"
2
compatibility_date = "2023-12-01"
3
main = "src/index.ts"
4
minify = true

基本的な設定はこんな感じです。

環境変数

結構詰まったのがここでした。

単にHonoを動かす場合には.envに書き込んでおけば、

1
import { Hono } from 'hono'
2
import { cache } from 'hono/cache'
3
import { cors } from 'hono/cors'
4
import { csrf } from 'hono/csrf'
5
import { logger } from 'hono/logger'
6

7
const app = new Hono()
8

9
export default {
10
  port: 32821,
11
  fetch: app.fetch,
12
}

1
import { env } from 'hono/adapter'
2

3
app.get('', async (c) => {
4
    const { PRIVATE_TOKEN } = env<{ PRIVATE_TOKEN: string}>(c)
5
    return c.json({ PRIVATE_TOKEN: PRIVATE_TOKEN })
6
})

のような感じで取得できます。

ところがCloudflare Workersで動かした場合にはこの方法では環境変数を取得できません。

公式ドキュメントを見てみると環境変数をwrangler.tomlに書き込む方法が解説されていますが、この手順ではwrangler.tomlに機密情報が含まれる場合wrangler.tomlをgitで管理することができないというデメリットが生じてしまいます。

1
name = "hono-app"
2
compatibility_date = "2023-12-01"
3
main = "src/index.ts"
4
minify = true
5

6
[vars]
7
PRIVATE_TOKEN = "SECRET_VALUE"

更に、このままworkersを立ち上げると、

1
Your worker has access to the following bindings:
2
- Vars:
3
  - PRIVATE_TOKEN: "SECRET_VALUE"

という感じで変数の中身がそのまま標準出力されます。

で、その対策として利用されるのが.*.varsという独自の仕組みで、大体.envと同じように使えます。

1
PRIVATE_TOKEN = "SECRET_VALUE"

開発環境の環境変数を突っ込みたい場合には.env.varsに書き込むと良いです。

1
Using vars defined in .dev.vars
2
Your worker has access to the following bindings:
3
- Vars:
4
  - PRIVATE_TOKEN: "(hidden)"

すると起動したときに値を隠すことができます。

これでローカルで環境変数をCloudflare Workersに渡すことができ、この値はそのままHonoが取得することができます。