【Vue.js】環境変数で本番環境と開発環境のURLを管理する

Vue.jsでAPIを叩く際に、エンドポイントのベースURLを環境変数で管理する方法が分からずハマったので、備忘録としてまとめます。

バージョン

• Vue.js 3.3.11

記事の信頼性

• 独学で未経験から従業員300名以上の自社開発企業へ転職しました。
• 実務ではVue.jsとRailsを毎日書いています。
• 初心者や駆け出しエンジニアがつまづくポイントも身をもってよく理解しています。

問題

ぼくは今クイズアプリを作っているのですが、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ファイルを作成します。

ただし今回は開発環境と本番環境で参照するURLを分けたいので、.env.developmentと.env.productionを作成します。

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

VITE_API_URL=http://localhost:3000

ぼくのプロジェクトではビルドにViteを使っているので、接頭にVITE_をつける必要があります。

同じように本番環境用のenv.productionにも参照したいベースURLを記述しましょう。

なおVite以外のビルドツールを使っている場合は、VUE_APP_API_URL=http://localhost:3000のようにVITE_ではなくVUE_APP_をつけてください。

②環境変数の使用

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

Viteを使っている場合、以下のように記述すればOKです。

// Vite の環境変数を読み込む
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) {
    // 省略
  }
}

あとはVite側で自動的に.envファイルの命名規則にしたがって適切な環境変数を読み込んでくれます。

Vite以外のビルドツールの場合は微妙に書き方が異なり、以下のように記述する必要があります。

// Vite 以外の場合は微妙に書き方が違う
const API_URL = process.env.VUE_APP_API_URL;

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

これで無事にAPIを呼び出してデータを取得することができました！

おわりに

今まではそもそもビルドツールを意識していなかったので、良い勉強の機会となりました！

参考文献

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

技術書が好きなエンジニア向け

あわせて読みたい

【エンジニア向け】効率的な技術書の読み方5選【経験談】 スキルアップに直結させるための効率的な技術書の読み方を知りたくないですか？この記事ではエンジニア向けに効果的なインプットのための技術書の読み方を5つ紹介します。最後まで読めば自分に合う読み方が1つくらい見つかるはずです。ぜひご一読ください。