envsafe
「safe」というのは「type safe」という意味であって、「secure」という意味ではないmrsekut.icon
no dependencies
env.ts的なものを書いて型を定義する
その後、各環境ごとに.envを書く
環境というのは、devとかprodのことmrsekut.icon
実行時に、型と.envの内容が合致しているかどうかを検査する
そのenv.tsの方からimportして使う
例えば、
code:.env
HOGE=22
code:features/env/serverEnv.ts
import { num } from 'envsafe';
export const serverEnv = envsafe({
HOGE: num(),
});
code:ts
import { serverEnv } from 'src/features/env/serverEnv';
const hoge = serverEnv.HOGE; // number
ちゃんとnumber型になる
ここで以下のようにすると型が合致しないので実行時エラーになる
code:.env
HOGE="hoge"
Next.jsの場合は以下のようにinputを書かないとエラーになる ref code:ts
export const browserEnv = envsafe({
NEXT_PUBLIC_NO_DEFAULT: str({
})
});
なんか、NODE_ENV=productionになっていても、devDefaultが読み込まれるケースがそんざいするな #?? これ、危なすぎるだろ
何が原因だ
これ、本番buildしないと気づけない
Next.jsで使っているときの注意mrsekut.icon*4
以下の混合により、dev環境では正しく動くが、prod環境で動かない、ということが起きる
Next.jsでは、browserで使うものをNEXT_PUBLIC_から始める
envsafeにdevDefaultを書くと、production以外ではその値にfallbackされる
Next.jsででbrowser側で使用する場合は、input:を書かないといけない
正しくは、以下のように書くべきところを
code:browserEnv.ts
export const browserEnv = envsafe({
NEXT_PUBLIC_HOGE: str({
devDefault: 'dev',
}),
code:.env
NEXT_PUBLIC_HOGE='dev'
以下のように書いたとき
code:serverEnv.ts
export const serverEnv = envsafe({
HOGE: str({
devDefault: 'dev',
}),
code:.env
HOGE='dev'
この状態で本番buildして、const a = serverEnv.HOGEで参照すると
何故かdevが読み込まれる
devDefaultの値が読み込まれているということ
つまり、browserでも使う変数を誤ってserverに書いた場合に、devDefualtが読み込まれる
dev環境で見てもfallbackされるのでdevになる
つまり、browserに書くべきものを、誤ってserver側に書いていた場合に、気付くタイミングがない
devでは、devDefaultによって正しい値が読み込まれているように見えてしまう
prodでは、そのまま誤った値が表示される