Vite, React, TypeScriptでの環境変数のハンドリング方法！

〜ステージングと本番環境をきちんと分けよう〜

目次

1. はじめに
2. 環境変数の設定
3. npm scriptsの更新
4. Viteで環境変数を使用する方法
5. Gitで.envファイルを無視する方法
6. まとめ

はじめに

Vite, React, TypeScriptでのプロジェクトを管理しているとき、開発、ステージング、本番といった環境ごとに異なる設定をする必要があります。今回の記事では、これらの環境ごとに異なる環境変数を設定する方法を解説します。

環境変数の設定

まず、プロジェクトルートに環境ごとの.envファイルを作成します：

• .env.development.local：開発環境用の環境変数をここに設定します。
• .env.staging.local：ステージング環境用の環境変数をここに設定します。
• .env.production.local：本番環境用の環境変数をここに設定します。

各ファイルには、VITE_というプレフィクスをつけた環境変数を設定します。例えば、以下のように設定します：

VITE_APP_TITLE="My Cool App"

npm scriptsの更新

次に、package.jsonのscriptsセクションを更新します：

"scripts": {
    "dev": "vite --mode development & npm run sv",
    "build:staging": "vite build --mode staging",
    "build:prod": "vite build --mode production",
    "vite": "vite",
    "sv": "php -S localhost:8080",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "api:build": "aspida"
}

これで、npm run devを実行すると .env.development.local ファイルがロードされ、npm run build:stagingを実行すると .env.staging.local ファイルがロードされ、npm run build:prodを実行すると .env.production.local ファイルがロードされます。

Viteで環境変数を使用する方法

Viteでは、環境変数をアプリケーションの中で import.meta.env.VITE_APP_TITLE のように参照することができます。以下にそのサンプルコードを示します：

import React from "react";

const AppTitle = () => (
    <h1>{import.meta.env.VITE_APP_TITLE}</h1>
);

export default AppTitle;

Gitで.envファイルを無視する方法

最後に、これらの .env ファイルを Git のバージョン管理から除外します。これにより、セキュリティ上の問題を防ぐことができます。.gitignore ファイルに以下の行を追加します：

.env*.local

これで、.envで始まり、.localで終わるすべてのファイルがバージョン管理から除外されます。

まとめ

この記事では、Vite, React, TypeScriptプロジェクトで開発、ステージング、本番環境ごとに異なる環境変数を設定する方法を解説しました。この方法を使えば、環境ごとに異なる設定を簡単に管理することができます。

---

以上、ご覧いただきありがとうございました！質問やコメントがあれば、お気軽にコメント欄にお書きください。