🖌️ Table of Contents

🖌️ TOC

【Vite】デプロイ環境ごとに参照する環境変数の値を変える

この記事では、Viteを利用したプロジェクトでdotenvを使って環境変数を管理し、オプションを使ってデプロイ環境ごとに参照する値を変更する方法について解説します。

dotenvとは？

dotenvは、環境変数をファイルから読み込むことができるNode.jsのライブラリです。これにより、アプリケーションの設定値や秘密鍵などをコードから分離し、プロジェクトごとに異なる環境変数を簡単に管理できます。

ref

Viteでdotenvを利用する方法

Viteでは、デフォルトでdotenvがサポートされており、特別な設定やインストールは不要です。ファイルをプロジェクトのルートディレクトリに作成し、環境変数を定義するだけでViteが自動的に読み込んでくれます。

以下に、ファイルの例を示します。

1API_KEY=123456789abcdef
2API_URL=https://example.com/api
3

これらの環境変数は、Viteの設定ファイルやアプリケーションのコード内でオブジェクトを通してアクセスできます。

例えば、Viteの設定ファイルで環境変数を参照する方法は以下の通りです。

1export default {
2  plugins: [
3    // ...プラグインの設定
4  ],
5  define: {
6    API_KEY: import.meta.env.API_KEY,
7    API_URL: import.meta.env.API_URL,
8  },
9};
10

また、アプリケーションのコード内でも同様にアクセスできます。

1const apiKey = import.meta.env.API_KEY;
2const apiUrl = import.meta.env.API_URL;
3

--modeオプションで環境を切り替える方法

Viteでは、オプションを使って、ビルドや開発サーバーの実行時に環境を切り替えることができます。ファイルに環境名を付けて、複数の環境ファイルを作成することができます。

例えば、開発環境用のファイルとしてを、本番環境用のファイルとしてを作成します。

開発環境用の:

1API_KEY=123456789abcdef
2API_URL=https://dev.example.com/api
3

本番環境用の:

1API_KEY=987654321abcdef
2API_URL=https://prod.example.com/api
3

これらの環境ファイルを利用して、オプションで環境を切り替えるには、のに以下のように記述します。

1{
2  "scripts": {
3    "dev": "vite --mode development",
4    "build:dev": "vite build --mode development",
5    "build:prod": "vite preview --mode production"
6  }
7}
8

上記の設定により、で開発環境の起動、およびでテスト環境／本番環境デプロイのためのビルドがそれぞれ選択されます。選択された環境に応じて、Viteは適切なファイルを読み込み、環境変数が反映されます。

まとめ

Viteでは、dotenvがデフォルトでサポートされており、環境変数の管理が容易になります。また、オプションを使って環境ごとに参照する値を変えることができます。これにより、開発環境と本番環境で異なる設定を簡単に切り替えることが可能となり、効率的な開発が実現できます。