1
1
# 環境変数とモード
2
2
3
- ## 環境変数 {#env-variables}
3
+ Vite は特定の定数を特別な ` import.meta.env ` オブジェクトの下で公開します。この定数は開発中はグローバル変数として定義され、ビルド時にはツリーシェイキングを効果的に行うために静的に置き換えられます。
4
+
5
+ ## ビルトイン定数
4
6
5
- Vite は環境変数を特別な ** ` import.meta.env ` ** オブジェクトに公開しており、これはビルド時に静的に置き換えられます。いくつかのビルトイン変数は全てのケースで利用可能です :
7
+ いくつかのビルトイン定数は全てのケースで利用可能です :
6
8
7
9
- ** ` import.meta.env.MODE ` ** : {string} アプリが動作している[ モード] ( #modes ) 。
8
10
@@ -14,7 +16,31 @@ Vite は環境変数を特別な **`import.meta.env`** オブジェクトに公
14
16
15
17
- ** ` import.meta.env.SSR ` ** : {boolean} アプリが[ サーバー] ( ./ssr.md#conditional-logic ) で動作しているかどうか
16
18
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}
18
44
19
45
Vite は、[環境ディレクトリー](/config/shared-options.md#envdir)にある以下のファイルから追加の環境変数を読み込むために [dotenv](https://github.com/motdotla/dotenv) を利用します。
20
46
@@ -34,27 +60,7 @@ Vite は特定のモードの `.env.[mode]` ファイルに加えて、常に `.
34
60
また、Vite の実行時に既に存在している環境変数は最も優先度が高く、` .env ` ファイルによって上書きされることはありません。例えば、` VITE_SOME_KEY = 123 vite build` を実行する場合。
35
61
36
62
` .env ` は Vite 起動時に読み込まれます。変更した後はサーバーを再起動してください。
37
- :::
38
63
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 ` は数値ですが、パースすると文字列が返ります。同じことはブール型の環境変数にも起こります。コード内で使用する場合には、必ず目的の型に変換するようにしてください。
58
64
:::
59
65
60
66
また、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
68
74
NEW_KEY3 = test$KEY # test123
69
75
` ` `
70
76
71
- 環境変数のプレフィックスをカスタマイズしたい場合は、[envPrefix](/config/shared-options.html#envprefix) オプションを参照してください。
72
-
73
77
:::warning SECURITY NOTES
74
78
75
79
- ` .env .* .local ` ファイルはローカル限定で、センシティブな変数を含めることができます。git にチェックインされるのを防ぐために、` .gitignore ` に ` * .local ` を追加すべきです。
76
80
77
81
- Vite のソースコードに公開される変数は最終的にクライアントバンドルに入るので、` VITE_ * ` 変数はセンシティブな情報を*含まない*ようにすべきです。
78
- :::
82
+
83
+ :::
79
84
80
85
::: details 変数の逆順展開
81
86
@@ -94,7 +99,7 @@ VITE_BAR=bar
94
99
95
100
:::
96
101
97
- ### TypeScript 用の自動補完
102
+ ## TypeScript 用の自動補完
98
103
99
104
デフォルトで Vite は [` vite/ client .d .ts ` ](https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts) で ` import .meta.env` のための型定義を提供します。` .env.[mode]` ファイルで自前の環境変数を定義できますが、` VITE_` で始まるユーザー定義の環境変数に対する TypeScript の自動補完が欲しくなるかもしれません。
100
105
@@ -124,11 +129,12 @@ interface ImportMeta {
124
129
:::warning import は型拡張を破壊する
125
130
126
131
` ImportMetaEnv` の拡張が上手く動かない場合、` import ` ステートメントが ` vite-env.d.ts` 内に存在しないことを確認してください。詳しい情報については、[TypeScript のドキュメント](https://www.typescriptlang.org/docs/handbook/2/modules.html#how-javascript-modules-are-defined) を参照してください。
132
+
127
133
:::
128
134
129
- ## HTML での置換
135
+ ## HTML での定数の置換
130
136
131
- Vite は HTML ファイルでの環境変数の置換もサポートしています 。` import.meta.env` にあるプロパティは、特別な ` %ENV_NAME %` 構文使用して HTML ファイルで使用できます:
137
+ Vite は HTML ファイルでの定数の置換もサポートしています 。` import.meta.env` にあるプロパティは、特別な ` %CONST_NAME %` 構文を使用して HTML ファイルで使用できます:
132
138
133
139
` ` ` html
134
140
< h1> Vite is running in % MODE % < / h1>
@@ -145,8 +151,7 @@ Vite は多くのフレームワークで使用されているため、条件分
145
151
146
152
つまり、 ` vite build` の動作中は、もし ` .env.production` があれば、環境変数をそこから読み込むということです:
147
153
148
- ` ` `
149
- # .env .production
154
+ ` ` ` [.env.production]
150
155
VITE_APP_TITLE = My App
151
156
` ` `
152
157
@@ -160,19 +165,17 @@ vite build --mode staging
160
165
161
166
また、` .env .staging ` ファイルを作成します:
162
167
163
- ` ` `
164
- # .env .staging
168
+ ` ` ` [.env .staging ]
165
169
VITE_APP_TITLE = My App (staging)
166
170
` ` `
167
171
168
172
` vite build` はデフォルトで本番環境のビルドを実行しますが、別のモードと ` .env ` ファイルの設定を変更することで、開発環境のビルドを実行することもできます:
169
173
170
- ` ` `
171
- # .env .testing
174
+ ` ` ` [.env .testing ]
172
175
NODE_ENV = development
173
176
` ` `
174
177
175
- ## NODE_ENV とモード
178
+ ### NODE_ENV とモード
176
179
177
180
` NODE_ENV ` (` process .env .NODE_ENV ` )とモードは異なる概念であると意識するのが重要です。それぞれのコマンドが ` NODE_ENV ` とモードにどのように影響するかを以下に示します:
178
181
0 commit comments