JavaScriptコードから機密情報の設定値を外出しするdotenvという便利ツール

はじめに

JavaScript でプログラムを書いていると機密情報を含んだ設定値を記述することがあります。

私の場合は、AWS のアクセスキーなどでした。

それでいろいろと調べていたところ、JavaScript のコードでprocess.env.XXXXXという記述を何度か見かけました。

process.env.XXXXXとはなにかという説明がなく使われていたので最初分からなかったのですが、これはdotenvというツールを用いて、機密情報の設定値を JavaScript のコードから外部ファイルに外だししたものでした。

この記事では、dotenvの使い方をご紹介します。

dotenv のインストール

npm か yarn のどちらかでプロジェクトにdotenvをインストールします。

> npm install dotenv

or

> yarn add dotenv

dotenv の設定

dotenvはプロジェクトのルートに.envという設定ファイルを作成する必要があります。

後述のサンプルプログラムで使用する内容なら、以下のように記述します。

S3_BUCKET_NAME=S3BucketName
ACCESS_KEY_ID=AccessKeyID
SECRET_ACCESS_KEY=SecretAccessKey
DISTRIBUTION_ID=DistributionID

この情報が GitHub などに上がったら大変なので、.gitignoreに以下の設定をちゃんとしておきます。

.env

サンプルプログラム

では実際にどのようにdotenvを使うのかですが、以下の記事で使用した JavaScript のビルドファイルで試してみます。

www.aruse.net

元々の JavaScript コードの設定値部分は以下のようになります。

const config = {
    folderPath: '../build',        // path relative script's location
    s3BucketName: '{S3バケット名}',
    accessKeyId: '{アクセスキーID}',               // IAM user's AccessKeyID
    secretAccessKey: '{シークレットアクセスキー}',  // IAM user's SecretAccessKey
    DistributionId: '{CloudFrontのID}'            // DistributionId of CloudFront
};

これをdotenvを使ったら以下のようなコードになります。

require('dotenv').config();

const config = {
    folderPath: '../build', // path relative script's location
    s3BucketName: process.env.S3_BUCKET_NAME,
    accessKeyId: process.env.ACCESS_KEY_ID,     // IAM user's AccessKeyID
    secretAccessKey: process.env.SECRET_ACCESS_KEY, // IAM user's SecretAccessKey
    DistributionId: process.env.DISTRIBUTION_ID         // DistributionId of CloudFront
};

コードの先頭あたりでrequire('dotenv').config();を呼び出す必要がありますが、機密情報がコードからなくなりすっきりしましたね。

おわりに

dotenv を使うと、簡単に機密情報の設定値を JavaScript コードから外出しできます。

SPA (Single Page Application) だとこれだけではまだ要件が足りないのですが、使えるところでは使っていきたいですね。