docs(env): clarify VITE_* variable exposure risk (#2433)

Author: jay-es

guide/env-and-mode.md

@@ -33,14 +33,14 @@ if (import.meta.env.DEV) {
 
 Vite は環境変数を `import.meta.env` オブジェクトの下で自動的に文字列として公開します。
 
-環境変数が誤ってクライアントに漏れてしまうことを防ぐために、`VITE_` から始まる変数のみが Vite で処理されたコードに公開されます。例えば、以下の環境変数だと:
+`VITE_` プレフィックスの付いた変数は、Vite のバンドル後にクライアントサイドのソースコードに公開されます。環境変数が誤ってクライアントに漏れてしまうことを防ぐために、このプレフィックスの使用を避けてください。例えば、以下の場合を考えてみましょう:
 
 ```[.env]
 VITE_SOME_KEY=123
 DB_PASSWORD=foobar
 ```
 
-`VITE_SOME_KEY` だけが `import.meta.env.VITE_SOME_KEY` としてクライアントソースコードに公開され、`DB_PASSWORD` は公開されません。
+`VITE_SOME_KEY` のパース結果 `"123"` はクライアントに公開されますが、`DB_PASSWORD` の値は公開されません。これは以下のコードを追加することで確認できます:
 
 ```js
 console.log(import.meta.env.VITE_SOME_KEY) // "123"
@@ -53,6 +53,12 @@ console.log(import.meta.env.DB_PASSWORD) // undefined
 上に示したように、`VITE_SOME_KEY` は数値ですが、パースすると文字列が返ります。同じことはブール型の環境変数にも起こります。コード内で使用する場合には、必ず目的の型に変換するようにしてください。
 :::
 
+:::warning 秘密情報の保護
+
+`VITE_*` 変数には API キーなどのセンシティブな情報を含めるべきでは**ありません**。これらの変数の値はビルド時にソースコードにバンドルされます。本番環境では、バックエンドサーバーやサーバーレス/エッジ関数を使用して秘密情報を適切に保護することを検討してください。
+
+:::
+
 ### `.env` ファイル {#env-files}
 
 Vite は、[環境ディレクトリー](/config/shared-options.md#envdir)にある以下のファイルから追加の環境変数を読み込むために [dotenv](https://github.com/motdotla/dotenv) を利用します。
@@ -93,14 +99,6 @@ NEW_KEY2=test\$foo  # test$foo
 NEW_KEY3=test$KEY   # test123
 ```
 
-:::warning SECURITY NOTES
-
-- `.env.*.local` ファイルはローカル限定で、センシティブな変数を含めることができます。git にチェックインされるのを防ぐために、`.gitignore` に `*.local` を追加すべきです。
-
-- Vite のソースコードに公開される変数は最終的にクライアントバンドルに入るので、`VITE_*` 変数はセンシティブな情報を*含まない*ようにすべきです。
-
-:::
-
 ::: details 変数の逆順展開
 
 Vite は変数を逆順で展開することをサポートしています。
@@ -118,6 +116,12 @@ VITE_BAR=bar
 
 :::
 
+:::warning ローカル `.env` ファイルの無視
+
+`.env.*.local` ファイルはローカル限定で、センシティブな変数を含む可能性があります。git にチェックインされるのを防ぐために、`.gitignore` に `*.local` を追加すべきです。
+
+:::
+
 ## TypeScript 用の自動補完
 
 デフォルトで Vite は [`vite/client.d.ts`](https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts) で `import.meta.env` のための型定義を提供します。`.env.[mode]` ファイルで自前の環境変数を定義できますが、`VITE_` で始まるユーザー定義の環境変数に対する TypeScript の自動補完が欲しくなるかもしれません。