🌀

Vite + React + TypeScript で 環境変数ファイルを作成する

2022/05/09に公開

Vite + React + TypeScript で環境変数ファイルを作成する方法です。

Vite の動作モード

▶ 標準のモードは development と production

Viteで作成したアプリケーションは import.meta.env.MODEで動作モードを取得できます。

App.tsx
export function App() {
  return (
+    <p>MODE: {import.meta.env.MODE}</p>
  )
}

アプリケーションをnpm run devでビルドすると development モードになり、上記のコードでは import.meta.env.MODE は development と表示されます。
アプリケーションをnpm run buildでビルドするとproductionモードになり、上記のコードでは import.meta.env.MODE は production と表示されます。

▶ モードを追加する

developmentモードや、productionモード以外のモードが必要な場合は、build コマンドに modeオプションを指定します。
例えば検証用にstaging モードが必要な場合はnpm run build --mode stagingとなります。
毎回手打ちしてもいいですが、package.json の scripts に設定しておくと手間がありません。
以下のコードであればアプリケーションを npm run build:stg でビルドすると staging モードになり、import.meta.env.MODEstaging となります。

package.jsonの一部抜粋
 "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
+    "build:stg": "npm run build -- --mode staging",
    "preview": "vite preview",

※補足:「--」はオプションの終わりを意味します。
"build:stg": "tsc && vite build --mode staging"とする場合は不要ですが、
"build:stg": "npm run build -- --mode staging"のようにnpm run buildを呼び出す形で記述する場合は、一旦「--」でオプションの終了を明示します。

環境ファイル

▶ 環境ファイルを作成する

ルート直下に環境変数ファイルを作成します。(※srcフォルダ直下ではありません)

ファイル名は
developmentモード用の「.env」と「.env.local」
productionモードは「.env.production」と「.env.production.local」になります。
その他のモードは「.env.モード名」と「.env.モード名.local」となります。

▶ 「.env.xxxxx」と「.env.xxxxx.local」の違い

「.env」は git 管理されますが、「.env.xxxxx.local」は git 管理されません。
「.gitignore」ファイルの中を確認すると*.localの記述があり、「.env.xxxxx.local」はgit の管理対象外になります。
(※「.gitignore」 ファイルに*.localの記述がなければ追加しましょう)
つまり他の開発者と共有しない、自分のPCだけで使用するローカル環境の設定値を定義したりします。

▶ ファイルの優先順位

  • developerモードの場合
    「.env.local」> 「.env」の順になります。
    「.env.local」と「.env」で同じ名称の設定値が定義されていれば「.env.local」の設定値が優先されます。どちらか一方にだけ定義されている設定値であれば、その値が使用されます。

  • productionモードの場合
    「.env.production.local」>「.env.production」> 「.env.local」と「.env」の順になります。
    「.env.local」と「.env」の設定値も読み込まれることに注意が必要です。
    設定値が「.env.production.local」や「.env.production」に定義されておらず「.env.local」に定義されている場合は、「.env.local」の値が使用されます。

▶ 設定値の定義方法

プレフィックス「VITE_」を付けて定義します。「VITE_」を付けないとその設定値は読み込まれません。
このプレフィックスは vite.config.ts で変更することができます。
詳しくは コチラ Vite.config の envPrefix を参照してください。

.env.local
VITE_ENV_AND_ENVLOCAL_VALUE = ".env.local と .envに定義した値(.env.local)"
.env
VITE_APP_TITLE = "PIYOKO SERVICE (DEV)"

VITE_ENV_AND_ENVLOCAL_VALUE = ".env.local と .envに定義した値(.env)"

VITE_ENV_VALUE = ".envにだけ定義した値"
.env.production
VITE_APP_TITLE = "PIYOKO SERVICE (PROD)"

▶ TypeScript用の型定義ファイルを作成する

srcフォルダ内に 環境設定ファイルで定義した内容に対応する TypeScript 用の型定義ファイルを作成します。
srcフォルダ内にあ「vite-env.d.ts」ファイルが存在すればそこに書いてもいいですし、新たにファイルを作成してもかまいません。
新たにファイルを作成する場合は、ファイル名は何でもいいのですが、型定義ファイルは「xxxxx.d.ts」とするのが慣習です。

今回はsrcフォルダ内にあ「vite-env.d.ts」ファイルに以下の内容を追記しました。

vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  readonly VITE_ENV_AND_ENVLOCAL_VALUE: string
  readonly VITE_ENV_VALUE: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

使用する際に、import.meta.env.と入力するとインテリセンスが効いて、入力候補が表示されるようになります。

▶ 動作確認

App.tsx で env ファイルに定義した値を、developerモードと productionモードで表示してみます。

App.tsx
export function App() {
  return (
    <>
      <h2>APP TITLE: {import.meta.env.VITE_APP_TITLE}</h2>
      <ul>
        <li>VITE_ENV_AND_ENVLOCAL_VALUE: {import.meta.env.VITE_ENV_AND_ENVLOCAL_VALUE}</li>
        <li>VITE_ENV_VALUE: {import.meta.env.VITE_ENV_VALUE}</li>
      </ul>
    </>
  )
}
  • developerモード
    .env、.env.local の両方に定義した値は.env.localの値が優先で表示されています。

  • productionモード
    .env、.env.local の内容も表示されています。

.envファイルへ定義を追加した場合、再度ビルドが必要です。
ホットリロードでは値は読み込まれません。

以上、Vite + React + TypeScript で環境変数ファイルを作成する手順でした。

参考

https://ja.vitejs.dev/guide/env-and-mode.html

Discussion