Open dynamis opened 2 years ago
process.env.BUCKET_NAME を参照してますね
ビルド前のソースコードも process.env を参照しています nitro server側はなぜか import.meta.env が参照できませんでした(気のせいかもしれませんが)
import.meta.env を使っていないためにプロダクションビルド時に vite が置換してくれず、実行時に BUCKET_NAME を引き続き環境変数として渡す必要があるということかなと思いました
環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが Vite で処理されたコードに公開されます。
とあるとおり、環境変数を展開してバンドルするには VITE_
からはじまる名前にする必要があるかと思います。
環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが Vite で処理されたコードに公開されます。
こちらはクライアント(Nuxt /pages
下など)での環境変数の参照が可能か否かに影響がある話だと思っていました
プロダクションでは、これらの環境変数は、静的に置換されます。
https://ja.vitejs.dev/guide/env-and-mode.html#production-replacement
上記引用によると VITE_ から始まるかに関わらず環境変数はバンドルに含まれるのではないでしょうか
VITE_BUCKET_NAME
に環境変数名を変更してプロダクションビルドの動作検証をしてみました
diff --git a/express/utils/env.js b/express/utils/env.js
index b3ae588..d12cf19 100644
--- a/express/utils/env.js
+++ b/express/utils/env.js
@@ -1,2 +1,2 @@
export const REGION = process.env.REGION ?? "ap-northeast-1";
-export const BUCKET_NAME = process.env.BUCKET_NAME ?? "";
+export const BUCKET_NAME = process.env.VITE_BUCKET_NAME ?? ""
.env
の値を適切に変更yarn build && yarn start
を実行http://localhost:3000/
にブラウザでアクセスしましたが Empty value provided for input HTTP label: Bucket.
が表示されました
プロダクションでは、これらの環境変数は、静的に置換されます。
この「これらの環境変数」とは、その上の import.meta.env.MODE
をはじめとするいくつかの特別な環境変数のことだと思います。(そういう意味では VITE_
からはじまる必要がある、という点は誤りですね。。。訂正します。)
$ grep -nr VITE_BUCKET_ .output
.output/server/chunks/middleware/index.mjs:8:const BUCKET_NAME = (_b = process.env.VITE_BUCKET_NAME) != null ? _b : "";
これをみると確かにサーバーサイドの環境変数への参照は展開してバンドルされず、そのままのようですね。
プロダクションビルド時に vite が置換してくれず、実行時に BUCKET_NAME を引き続き環境変数として渡す必要があるということかなと思いました
これは正しいです。
nitro server側はなぜか import.meta.env が参照できませんでした
結局ここが困りものなわけですよね。 すべて import.meta.env で統一したコードを書けて process.env 使わずに済めば全てビルド時の静的置き換えで済むのに...
念のため: process.env は BUCKET_NAME 以外に REGION の読み込みにも使っていた。
こちらは初期値があるから問題が顕在化しないことも多いと思うが、東京リージョン以外を使う場合、REGION も環境変数設定しないと動かないという意味では同じ。
26b6bbe0e3139da5f1215cfced4bc47786c5e920 で注意事項としてドキュメンテーションされたので、issueとしては対応完了になるでしょうか
nitro server側はなぜか import.meta.env が参照できませんでした
server middleware だから Node 標準ではないフレームワークやバンドル/ビルドツールである Nuxt/Vite のビルドによる変換処理は挟まらない。なので当然 import.meta.env 発変えないという話でしたね。
process.env があるか、.env ファイルを読むかという処理を明示的に書けそうな気もするけど取りあえず環境変数も Nuxt 側と Express 側で性質が違い、それぞれに何処でどのように設定すべきか違うというのは無理に解消しなくとも良いかと思いました。
issueとしては対応完了になるでしょうか
bug ではないしそういう仕様だと思えば何ら問題ないですが、使い勝手としては何とかしたい (.env 書くだけで良い形に express 側のコードを改善したい) という要望としては残ってても良いかも。(使い勝手を便利にするために必要以上にコードが複雑化するのは初心者向けの説明・サンプルコードとしては不適と考えることも出来るけど)
https://github.com/webdino/lyceum-pokemon/issues/105 の変更により、Expressのコードはtsupでビルドするようにしましたので、定数置換可能になったかと思います https://esbuild.github.io/api/#define
環境変数ではなく .env にて BUCKET_NAME を設定するように指示されているが、npm run dev はそれで問題ないが npm start する場合には s3 のライブラリが .env を読みにいかずに環境変数 (や ~/.aws/config) などだけを見に行くようで、環境変数として BUCKET_NAME を設定していなければ Bucket 指定がされておらず
Empty value provided for input HTTP label: Bucket.
エラーになる/ へのアクセス時のサーバログ
/api/trainers へのアクセス時のサーバログ:
.output/server/chunks/middleware/index.mjs の冒頭部分:
process.env.BUCKET_NAME を参照してますね。こちらのコードを webpack した結果っぽい: https://github.com/webdino/lyceum-pokemon/blob/42d644afffc2c4cfc7cf5b71ba0156fd28c0d24a/express/utils/env.js
vite で .env をロードする といってるが vite がビルドした後の node .output/... を実行するときに読み込んでくれるケアまではしてくれないと言うことか。