😸

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

2023/04/18に公開

frontend

Vite

dotenv

tech

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

dotenvとは？

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

https://www.npmjs.com/package/dotenv

Viteでdotenvを利用する方法

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

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

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

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

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

export default {
  plugins: [
    // ...プラグインの設定
  ],
  define: {
    API_KEY: import.meta.env.API_KEY,
    API_URL: import.meta.env.API_URL,
  },
};

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

const apiKey = import.meta.env.API_KEY;
const apiUrl = import.meta.env.API_URL;

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

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

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

開発環境用の.env.development:

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

本番環境用の.env.production:

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

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

{
  "scripts": {
    "dev": "vite --mode development",
    "build:dev": "vite build --mode development",
    "build:prod": "vite preview --mode production"
  }
}

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

まとめ

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

This article was drafted by ChatGPT(GPT-4).
The responsibility for the text of this article belongs to Junpei.

dotenvとは？

Viteでdotenvを利用する方法

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

まとめ

Discussion