環境構築#

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

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

環境変数#

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

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

import { Hono } from 'hono'
import { cache } from 'hono/cache'
import { cors } from 'hono/cors'
import { csrf } from 'hono/csrf'
import { logger } from 'hono/logger'

const app = new Hono()

export default {
  port: 32821,
  fetch: app.fetch,
}

import { env } from 'hono/adapter'

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

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

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

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

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

[vars]
PRIVATE_TOKEN = "SECRET_VALUE"

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

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

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

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

PRIVATE_TOKEN = "SECRET_VALUE"

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

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

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

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