🌀

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

2022/05/09に公開

React

Vite

tech

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.MODE は staging となります。

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モードで表示してみます。