Honoで環境変数を扱う方法

Hono + Bun#

TypeScriptでアプリケーションを作成する際、環境変数の読み込みについては毎回困るので対応方法についてメモしてみました

フレームワーク	環境変数	ファイル	備考
Bun	process.env	.env	-
Cloudflare Workers	c.env	.dev.vars	-
Vite	import.meta.env	.env	`VITE_`のプレフィックスが必要
Node	process.env	.env	dotenvが必要

Viteでの環境変数の読み込みについてのドキュメントによるとViteでは環境変数をimport.meta.envで読み込み、更にそれぞれの環境変数はVITE_のプレフィックスがついている必要があります。

内部的にはdotenvが利用されているらしいので、追加でdotenvをインストールする必要はありません。

Node.jsではそのまま環境変数を読み込むことが出来ないのでdotenvをインポートする必要があります。

使い方に関してはレポジトリのREADME.mdを読んでください。

Bunではドキュメントによれば何もしなくても.envが読み込まれます。Viteのようなプレフィックスも不要です。

process.envで読み込むことが出来ますがエイリアスがあるのでBun.envとしても読み込めます。

Cloudflare Workers + Honoの環境ではContextと呼ばれる仕組みを利用してc.envで環境変数にアクセスできます。

更にBindingsの仕組みを使うことで本来環境変数を読み込むと型がstring | undefinedになってしまうのですが、値が存在することを保証させることができます。

API_KEY=XXXXXXXX

というような文字列を.dev.varsに書き込みます。

type Bindings = {
  API_TOKEN: string
}

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

のような感じで利用できます。これについてはHonoの公式ドキュメントが充実しているのでそちらを読んでみるとよいでしょう。

で、今回はCloudflare Workersは使わないけどHonoもBunも使う状況でBindingsを利用して環境変数をちゃんと読み込みたいという需要に対する解決策を提案します。

Cloudflare Workersを使っていない場合(bun wrangler dev src/index.tsのように実行していない場合)は.dev.varsを読み込まないのでc.envとやっても環境変数を読み込むことは出来ません。

Bunを使っていればBun.envで読み込めますがstring | undefinedになってしまいます。

app.use('*', async (c: Context, next) => {
  c.env = { ...process.env }
  await next()
})

で、早いですが結論から言うと上のコードをsrc/index.tsに書き込みます。

するとprocess.envの中身がc.envにマージされます。

こうしたうえでBindingsを正しく設定することでc.env.API_TOKENがundefinedにならずに取得することができます。　

わかってしまえば簡単でした。記事は以上。