Vite環境でenvファイルによる環境変数の設定方法を探していませんか？

この記事を最後まで読めば、envファイルで環境変数を扱う方法や、本番環境と開発環境で異なるURLを設定する方法を理解できます。

この記事を書いているぼくは実務経験１年。独学で未経験から従業員300名以上の自社開発企業へ転職しました。実務ではVue.jsとRailsを毎日書いています。

この記事で解説するViteのバージョンは5.0.10です！

【Vite】envファイルで環境毎の環境変数を管理する

この記事では以下の実装を題材に、envファイルによる環境変数の設定方法を解説します。

ぼくは今クイズアプリを作っているのですが、APIのエンドポイントを指定する際に、暫定的にURLをベタ書きしていました↓

const getQuizzes = async () => {
  try {
    const response = await axios.get('http://localhost:3000/api/v1/quizzes')
    // 省略
  } catch (error) {
    // 省略
  }
}

開発が進んできたので、そろそろベタ書きをやめて環境変数で管理したいです。

開発環境と本番環境で参照するURLが異なるため、各環境に応じた環境変数を設定する必要があります。

そこで実施するのは次の2ステップです。

1. .envファイルの作成
2. 環境変数の使用

順番に解説します。

1. .envファイルの作成

まずはルートディレクトリ直下に.envファイルを作成します。

作成したら次のように記述します。

VITE_API_URL=http://localhost:3000

Viteを使う場合、接頭にVITE_をつける必要があります。

開発環境と本番環境で参照する値を変えたい場合

開発環境と本番環境で参照するURLやAPIキーを分けたい場合、.envファイルではなく以下の2ファイルを作成します。

• .env.development
• .env.production

この2ファイルに設定したい環境変数をそれぞれ記述します。

VITE_API_URL=http://localhost:3000

VITE_API_URL=https://sample-app.co.jp/

2. 環境変数の使用

.envファイルが用意できたらあとは実際に使うだけです。

以下のように環境変数を読み込めば使用できます。

// 環境変数を読み込む
const API_URL = import.meta.env.VITE_API_URL;

const getQuizzes = async () => {
  try {
    const response = await axios.get(`${API_URL}/api/v1/quizzes`)
    // 省略
  } catch (error) {
    // 省略
  }
}

これだけでOKです。

開発環境と本番環境で参照する値を変えたい場合

じつは環境毎に読み込む値を変更したい場合も、上記とおなじ実装で問題ありません。

Vite側で自動的に以下の2ファイルから環境に応じた値を参照してくれます。

• .env.development
• .env.production

Viteの命名規則にしたがっているため、この2つのファイル名を間違えないように注意してください。

おわりに

この記事ではVite環境でenvファイルによる環境変数の設定方法を解説しました。

環境毎の切り替えもとても簡単なので、ぜひ覚えておいてくださいね。

また以下の記事では、学習効率を高めたい方向けに、効率的な技術書の読み方を紹介しています。

こちらの記事もぜひ読んでみてください。

あわせて読みたい

「技術書の内容が頭に入らない」を防ぐ5つの読書方法 「技術書の内容が頭に入らない」を防ぐための5つの読書方法を紹介します。最後まで読めば効率よくインプットできるようになります。

参考文献

• 環境変数とモード​ – Vite
• Modes and Environment Variables – Vue CLI