.envファイルに悪戦苦闘した話【node.js】

React×Node.js×MySQLでアプリ開発をしている際にぶつかった問題。

node.jsでMySQLに繋ぐために下記のようにDB情報を保持させた。

#index.js
const db = mysql.createPool({
  host: "127.0.0.1",
  user: "xxxxxxx",
  password: "xxxxxx",
  database: "xxxxx",
});

しかし、gitに上げているソースのため、接続情報をべた書きするのはNGであると考え、gitにコミットしないファイルに情報を保持させ、それを変数として使用して接続情報を保管しようと考えた。

そこで.envファイルである。当方は.envファイルを使用したことがなかったため、xxxx.envのようにファイル名＋.envだと思っていたが、そうではなく.envというファイルらしい。

まぁそこは大した話ではないのだが、まずはディレクトリ構造を記載する。

#当初のディレクトリ構造
プロジェクトフォルダ
├── README.md
├── clientディレクトリ
└── serverディレクトリ
    ├── .env
    ├── index.js
    └── package.json

この状態で、index.jsに.envを読み込ませ、その情報をDBの接続情報として使いたい。

まずは必要なdetenvモジュールをインストールする。

$ npm install dotenv
$ npm install dotenv --save  # package.json に依存情報を追記する場合

.envファイルは下記のような構造。

#.envファイル
DB_HOST = "127.0.0.1"
DB_USER = "ここはユーザID"
DB_PWD = "ここはパスワード"
DB_NAME = "ここはDB名"

上記まで完了したので、index.jsを記述していく。

#index.js
const path = require('path');
require('dotenv').config({path:path.resolve(__dirname,'../.env')});

const host = process.env.DB_HOST; 
const user = process.env.DB_USER; 
const pwd = process.env.DB_PWD; 
const db_name = process.env.DB_NAME; 

const db = mysql.createPool({
  host: host,
  user: user,
  password: pwd,
  database: db_name,
});

ここまで記述して、hostをconsole.logで確認したところ、undefinedとなった。期待値は127.0.0.1。

結論としては、.envファイルの格納場所が悪かったようだ。ディレクトリ構造を下記のようにしたら正常に動作した。

#当初のディレクトリ構造
プロジェクトフォルダ
├── README.md
├── .env
├── clientディレクトリ
└── serverディレクトリ
    ├── index.js
    └── package.json

まとめ

.envファイルはルートディレクトリに作る。