11# 環境変数とモード
22
3- ## 環境変数 {#env-variables}
3+ Vite は特定の定数を特別な ` import.meta.env ` オブジェクトの下で公開します。この定数は開発中はグローバル変数として定義され、ビルド時にはツリーシェイキングを効果的に行うために静的に置き換えられます。
4+
5+ ## ビルトイン定数
46
5- Vite は環境変数を特別な ** ` import.meta.env ` ** オブジェクトに公開しており、これはビルド時に静的に置き換えられます。いくつかのビルトイン変数は全てのケースで利用可能です :
7+ いくつかのビルトイン定数は全てのケースで利用可能です :
68
79- ** ` import.meta.env.MODE ` ** : {string} アプリが動作している[ モード] ( #modes ) 。
810
@@ -14,7 +16,31 @@ Vite は環境変数を特別な **`import.meta.env`** オブジェクトに公
1416
1517- ** ` import.meta.env.SSR ` ** : {boolean} アプリが[ サーバー] ( ./ssr.md#conditional-logic ) で動作しているかどうか
1618
17- ## ` .env ` ファイル {#env-files}
19+ ## 環境変数 {#env-variables}
20+
21+ Vite は環境変数を ` import.meta.env ` オブジェクトの下で自動的に文字列として公開します。
22+
23+ 環境変数が誤ってクライアントに漏れてしまうことを防ぐために、` VITE_ ` から始まる変数のみが Vite で処理されたコードに公開されます。例えば、以下の環境変数だと:
24+
25+ ``` [.env]
26+ VITE_SOME_KEY=123
27+ DB_PASSWORD=foobar
28+ ```
29+
30+ ` VITE_SOME_KEY ` だけが ` import.meta.env.VITE_SOME_KEY ` としてクライアントソースコードに公開され、` DB_PASSWORD ` は公開されません。
31+
32+ ``` js
33+ console .log (import .meta.env.VITE_SOME_KEY) // "123"
34+ console .log (import .meta.env.DB_PASSWORD) // undefined
35+ ` ` `
36+
37+ 環境変数のプレフィックスをカスタマイズしたい場合は、[envPrefix](/config/shared-options.html#envprefix) オプションを参照してください。
38+
39+ :::tip env のパース
40+ 上に示したように、` VITE_SOME_KEY ` は数値ですが、パースすると文字列が返ります。同じことはブール型の環境変数にも起こります。コード内で使用する場合には、必ず目的の型に変換するようにしてください。
41+ :::
42+
43+ ### ` .env ` ファイル {#env-files}
1844
1945Vite は、[環境ディレクトリー](/config/shared-options.md#envdir)にある以下のファイルから追加の環境変数を読み込むために [dotenv](https://github.com/motdotla/dotenv) を利用します。
2046
@@ -34,27 +60,7 @@ Vite は特定のモードの `.env.[mode]` ファイルに加えて、常に `.
3460また、Vite の実行時に既に存在している環境変数は最も優先度が高く、` .env ` ファイルによって上書きされることはありません。例えば、` VITE_SOME_KEY = 123 vite build` を実行する場合。
3561
3662` .env ` は Vite 起動時に読み込まれます。変更した後はサーバーを再起動してください。
37- :::
3863
39- 読み込まれた環境変数は、` import.meta.env ` を経由してクライアントソースコードにも文字列として公開されます。
40-
41- 環境変数が誤ってクライアントに漏れてしまうことを防ぐために、` VITE_ ` から始まる変数のみが Vite で処理されたコードに公開されます。例えば、以下の環境変数だと:
42-
43- ``` [.env]
44- VITE_SOME_KEY=123
45- DB_PASSWORD=foobar
46- ```
47-
48- ` VITE_SOME_KEY ` だけが ` import.meta.env.VITE_SOME_KEY ` としてクライアントソースコードに公開され、` DB_PASSWORD ` は公開されません。
49-
50- ``` js
51- console .log (import .meta.env.VITE_SOME_KEY) // "123"
52- console .log (import .meta.env.DB_PASSWORD) // undefined
53- ` ` `
54-
55- :::tip env のパース
56-
57- 上に示したように、` VITE_SOME_KEY ` は数値ですが、パースすると文字列が返ります。同じことはブール型の環境変数にも起こります。コード内で使用する場合には、必ず目的の型に変換するようにしてください。
5864:::
5965
6066また、Vite は [dotenv-expand](https://github.com/motdotla/dotenv-expand) を使って、設定不要で env ファイルに書かれた変数を展開できます。構文の詳細については、[ドキュメント](https://github.com/motdotla/dotenv-expand#what-rules-does-the-expansion-engine-follow)を参照してください。
@@ -68,14 +74,13 @@ NEW_KEY2=test\$foo # test$foo
6874NEW_KEY3 = test$KEY # test123
6975` ` `
7076
71- 環境変数のプレフィックスをカスタマイズしたい場合は、[envPrefix](/config/shared-options.html#envprefix) オプションを参照してください。
72-
7377:::warning SECURITY NOTES
7478
7579- ` .env .* .local ` ファイルはローカル限定で、センシティブな変数を含めることができます。git にチェックインされるのを防ぐために、` .gitignore ` に ` * .local ` を追加すべきです。
7680
7781- Vite のソースコードに公開される変数は最終的にクライアントバンドルに入るので、` VITE_ * ` 変数はセンシティブな情報を*含まない*ようにすべきです。
78- :::
82+
83+ :::
7984
8085::: details 変数の逆順展開
8186
@@ -94,7 +99,7 @@ VITE_BAR=bar
9499
95100:::
96101
97- ### TypeScript 用の自動補完
102+ ## TypeScript 用の自動補完
98103
99104デフォルトで Vite は [` vite/ client .d .ts ` ](https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts) で ` import .meta.env` のための型定義を提供します。` .env.[mode]` ファイルで自前の環境変数を定義できますが、` VITE_` で始まるユーザー定義の環境変数に対する TypeScript の自動補完が欲しくなるかもしれません。
100105
@@ -124,11 +129,12 @@ interface ImportMeta {
124129:::warning import は型拡張を破壊する
125130
126131` ImportMetaEnv` の拡張が上手く動かない場合、` import ` ステートメントが ` vite-env.d.ts` 内に存在しないことを確認してください。詳しい情報については、[TypeScript のドキュメント](https://www.typescriptlang.org/docs/handbook/2/modules.html#how-javascript-modules-are-defined) を参照してください。
132+
127133:::
128134
129- ## HTML での置換
135+ ## HTML での定数の置換
130136
131- Vite は HTML ファイルでの環境変数の置換もサポートしています 。` import.meta.env` にあるプロパティは、特別な ` %ENV_NAME %` 構文使用して HTML ファイルで使用できます:
137+ Vite は HTML ファイルでの定数の置換もサポートしています 。` import.meta.env` にあるプロパティは、特別な ` %CONST_NAME %` 構文を使用して HTML ファイルで使用できます:
132138
133139` ` ` html
134140< h1> Vite is running in % MODE % < / h1>
@@ -145,8 +151,7 @@ Vite は多くのフレームワークで使用されているため、条件分
145151
146152つまり、 ` vite build` の動作中は、もし ` .env.production` があれば、環境変数をそこから読み込むということです:
147153
148- ` ` `
149- # .env .production
154+ ` ` ` [.env.production]
150155VITE_APP_TITLE = My App
151156` ` `
152157
@@ -160,19 +165,17 @@ vite build --mode staging
160165
161166また、` .env .staging ` ファイルを作成します:
162167
163- ` ` `
164- # .env .staging
168+ ` ` ` [.env .staging ]
165169VITE_APP_TITLE = My App (staging)
166170` ` `
167171
168172` vite build` はデフォルトで本番環境のビルドを実行しますが、別のモードと ` .env ` ファイルの設定を変更することで、開発環境のビルドを実行することもできます:
169173
170- ` ` `
171- # .env .testing
174+ ` ` ` [.env .testing ]
172175NODE_ENV = development
173176` ` `
174177
175- ## NODE_ENV とモード
178+ ### NODE_ENV とモード
176179
177180` NODE_ENV ` (` process .env .NODE_ENV ` )とモードは異なる概念であると意識するのが重要です。それぞれのコマンドが ` NODE_ENV ` とモードにどのように影響するかを以下に示します:
178181
0 commit comments