Deno Freshでローカルの.envとDeno Deployの環境変数のどちらもうまく扱う

やりたいこと

ローカルでは .env から変数を読み込みたい。Deno Deploy では、普通にプロジェクトの環境変数から読み込みたい。

コードの準備（ローカル用）

ローカルでは、開発用の dev.ts で x/dotenv をインポートすることにする。
x/dotenv の config({ export: true }) を使うと、.env ファイルにあるすべての <key>=<value> をロードできて便利。

dev.ts

#!/usr/bin/env -S deno run -A --watch=static/,routes/

import dev from "$fresh/dev.ts";
import { config } from "https://deno.land/x/dotenv@v3.2.0/mod.ts";

config({ export: true }); // Export all env key=value to Deno.env

await dev(import.meta.url, "/main.ts");

これで、.env のすべての <key>=<value> が Deno.env.get(<key>) で使えるようになる。
index.tsx で実際に読み取ってみる。

index.tsx

const HELLO = Deno.env.get("HELLO");
console.log(HELLO);

export default function Page() {
  return (
    <>
      <p>Welcome to `fresh`.</p>
      <div>env HELLO: {HELLO}</div>
    </>
  );
}

スプリット構文を使いたければ、.toObject() で env の中身をすべてオブジェクトにするサンプルが examples.deno.land にあった ので、それを利用してみる。

index.tsx

const { HELLO } = Deno.env.toObject();
console.log(HELLO);

export default function Page() {
  return (
    <>
      <p>Welcome to `fresh`.</p>
      <div>env HELLO: {HELLO}</div>
    </>
  );
}

コードの準備（Deno Deploy 用）

一方の Deno Deploy では、メインのエントリポイントが dev.ts ではなく、main.ts のはず。
main.ts で x/dotenv を使わないことにしておけば、Deno Deploy で main.ts がそのまま実行されたときに、Deno Deploy のプロジェクトで指定した環境変数が自動的に Deno.env で使えるようになる。よって、Deno Deploy 用に手を加えるコードは、ない。ミニマル。

環境変数の準備（ローカル）

肝心の .env ファイルをローカルに置く。

.env

HELLO=Local Hello

.env を gitignore するのを忘れずに。

.gitignore

.env

環境変数の準備（Deno Deploy）

Deno Deploy では、.env ではなく環境変数を設定する。
Settings > Environment Variables > Add Variable を開いて、

Key: "HELLO"
Value: "Deno Deploy Hello"

を設定して保存。

ローカルでテストしてみる

% deno task start
Task start deno run --allow-env -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 4 routes and 1 islands.
Listening on http://localhost:3000/
Local Hello

というログと、

<p>Welcome to `fresh`.</p>
<div>env HELLO: Local Hello</div>

のようなレンダリングが得られれば成功。
ローカルの .env から読み取られている!!

Deno Deploy でテストしてみる

ローカルのコードを Deno Deploy にプッシュ。Previewブランチでも、Mainブランチでも。

Main ブランチなら、Logs タブで Production のログに

Deno Deploy Hello        2022-12-03 23:09:14

のように出る。Preview ブランチなら、Deployments タブのアクションメニューから Logs を選ぶと、特定のデプロイのログを見られる。

そしてレンダリング結果として

<p>Welcome to `fresh`.</p>
<div>env HELLO: Deno Deploy Hello</div>

が得られれば成功。Local Hello ではなく、Deno Deploy のプロジェクトで指定した Deno Deploy Hello になっている!!!

環境変数は、プッシュ前に設定してあったものが有効になる。プッシュ後に環境変数を設定しても、生きない。プッシュ後に環境変数を変え忘れていたのを思い出したら、無意味な更新をプッシュしなければならない。つらい。

宣伝

宣伝: Fresh のドキュメントを https://fresh-ja.deno.dev/ で勝手に日本語化しています。協力者を募集中。