webpackでビルドしているVue.jsから、.envファイルの値を参照する

JavaScriptでAlgoliaのAPIを叩くときに、APP IDとAPIのKEYを引数に渡す必要があるんだけど、それらを外部ファイルにして、Gitにコミットしないようにしたかったけど、webpackの設定をどう書けばいいのかよくわかんなくてつらかったのでメモ。

Vue.jsをwebpack v4でビルドしてる環境です。

dotenvのインストール

$ npm install dotenv --save

ほかにもdotenv-webpackとかいろいろあって、どれをつかえば…！ってなってた。

.envの作成

ルート直下に.envという名前のファイルを作成して、以下のような感じで保存する。

APP_ID=*****
API_KEY=*****

.envをignore

.envをGit管理化から除外するために、.gitignoreに.envを追記する。

webpackの設定

webpack.config.jsに以下の内容を追記する。

require('dotenv').config({ path: __dirname + '/.env' });

const config = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        APP_ID: JSON.stringify(process.env.APP_ID),
        API_KEY: JSON.stringify(process.env.API_KEY)
      }
    });
  ]
};

.config() の引数の { path: __dirname + '/.env' } がないと .env ファイルが読み込まれなくてそこでハマってた。

process.envの値を利用

Vueファイルからprocess.env.APP_IDとprocess.env.API_KEYを参照できるようになっているので、algoliasearch()の引数に指定する。

import algoliasearch from 'algoliasearch';
const client = algoliasearch(process.env.APP_ID, process.env.API_KEY);

サンプルファイルを作成

.envの値が空の状態のサンプルファイルを.env.exampleとかいう名前（なんでもいい）で作成して、Gitにコミットしておく。

APP_ID=
API_KEY=

他の人がこのリポジトリを触るときは、これらの値をなんらかの形で共有して、各自で.envファイルを作成してもらう。