85
67

More than 3 years have passed since last update.

【Node】dotenvで環境変数を設定する

Last updated at Posted at 2020-03-23

概要

  • Nodeでプログラムを実行する時に環境(dev/stag/prodなど)ごとに値が異なる部分はコードを修正せずに実行するため環境変数として埋め込むことがよくあると思います
  • セットする環境変数が1つ2つであればコマンド実行時に設定すればよいですが規模が大きくなってきたらファイルでまとめて定義したくなるでしょう
  • そんな時はdotenvを使うと便利です
    • dotenvを使うと.envファイルに定義された値を環境変数として使うことができます
    • また、システムの環境変数として値が設定されていればそちらを優先して使うということもできます
    • なので、開発時はローカルで.envを配置し、本番ではホスティングサービスの機能で環境変数として設定するといった使い方をすることでリポジトリ内のファイルを変更せずに実行することができます

Nodeスクリプトの実行時にdotenvを使う場合

  • シンプルな形でいうとindex.jsがあってnode index.jsで実行するようなケースです
  • まずはdotenvをinstallします
npm i dotenv
  • 次にサンプル用のindex.jsを作成します
    • require('dotenv').config();としておくことでdotenvが適用されるようになります
    • process.envで環境変数を取得できます
    • TEST_VALUEという環境変数の値を取得しコンソールに出力するサンプルです
index.js
require('dotenv').config();

const value = process.env.TEST_VALUE;

console.log(value);
  • 最後に値を定義する.envファイルを作成します
.env
# 環境変数を定義
TEST_VALUE=.envで値を設定しています
  • 実行してみましょう
node index.js
  • ログに.envで値を設定していますと出力されているはずです
  • .envの値をシステム環境変数で上書きできることも確認しておきましょう
TEST_VALUE="コマンドで値を設定しています" node index.js
  • ログにコマンドで値を設定していますと出力されているはずです

webpackでビルド時にdotenvを使う場合

  • webpackなどでビルドしてから実行するケースも多くあると思います
  • ここではWebpackでdotenvを使う場合の手順を紹介します
  • dotenv-webpackというライブラリを使用します
npm i webpack webpack-cli dotenv-webpack
  • webpackの設定ファイルを作成します
webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    // { systemvars: true } を設定するとシステム環境変数も読み込まれるようになる
    new Dotenv({ systemvars: true }),
  ],
};
  • index.jsを修正します
    • dotenvはビルド時に適用されるため設定が消えてスッキリしました
index.js
const value = process.env.TEST_VALUE;

console.log(value);
  • ビルドして実行してみましょう
# ビルド(dist/main.jsが出力される)
npx webpack -p index.js
# 実行
node dist/main.js
  • 実行すると.envで値を設定していますとログが出力されるはずです
  • システムの環境変数で上書く場合ビルド時に環境変数を設定します
# 環境変数を設定してビルド
TEST_VALUE="コマンドで値を設定しています" npx webpack -p index.js
# 実行
node dist/main.js
  • 実行するとコマンドで値を設定していますとログが出力されるはずです

まとめ

  • dotenvを使った環境変数の設定のしかたを紹介しました
  • Nodeを使ったアプリでもこういった技術を活用してCI/CD回していきましょう!
85
67
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
85
67