【Angular応用講座】Angularプロジェクトからenvironment.tsを捨ててうっかりCreadentials(個人情報)の漏洩を防ぐ

本記事執筆途中で2022年も終わりに近づいて来ました。
気持ちはもう店じまいですが、今年最後の締めくくりにAngularネタを紹介します。
今回は主題の通り、AngularプロジェクトをGithubで他のコラボレーターに共有する際に割と困る

「environment.tsの個人情報埋込み問題」

を回避するためのテクニックです。
以下、適当な既存のAngularプロジェクトから

environment.ts

を、個人情報を含んだ

「.envファイル」

の中身で生成・書換えを行うように修正していく手順を説明していきます。
おおまかな流れでは、

開く/閉じる

            1. .envファイルの準備
2. dotenvとyargsのインストール
3. environment.tsファイルのリセット

となります。
さほど難しい内容ではないので、ポイントだけを軽く触れながら以降で解説してみます。

【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

「.env」ファイルの準備

Angularに限らずnode.jsでのアプリケーション開発においては、自分だけが利用できるローカル環境だけで利用するパラメーターは、

「.envファイル」

で管理するのがお手軽＆ベターです。
特に自分だけが使えて、他人に見られると困る代表的なものは、有料クラウドサービスのAPIキーなどが挙げられます。
ここでは例として、

AWSのAPIアクセスキー

のクレデンシャル情報を想定してみます。
お手元のAngularプロジェクトに

.env

が無い場合には、新規作成しておきましょう。
一例としてAWSのAPIアクセスキーの仕様で埋め込んだ

.env

は以下のようになっています。

開く/閉じる

            AWS_ACCESS_KEY_ID=hoge123456789
AWS_SECRET_ACCESS_KEY=HOGE_HOGE_PIYO_PIYO
AWS_DEFAULT_REGION=ap-northeast-1

なお、gitには

.env

ファイルは含めませんので、

.gitignore

ファイルには

.env

を追加しておきます。

開く/閉じる

            #...
#👇追記
.env

【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

dotenvとyargsの導入

Angularのビルド実行時に、.envファイルを呼び出すための

「dotenv」

と、簡単にnodejsでの実行コマンドを引数付きにできる

「yargs」

の2つをプロジェクトに追加します。

開く/閉じる

            $ yarn add yargs dotenv -D

注意が必要なのは

dotenv

の扱いですが、プロジェクト内から読み込まれる

.env

はプロジェクトのルートディレクトリではなく、リソースファイル(js/ts)と同じ階層にある

.env

となります。
きちんと

.env

を読み込んでいるか、その都度チェックしてみてください。
なお、Angularのデフォルト・プロジェクトでは

ts-node

があらかじめ入っているので、ここでは触れませんが、もし

package.json

に存在していないようであれば、以下でインストールしておきましょう。

開く/閉じる

            $ yarn add ts-node -D

これで、今回必要なツールが導入されました。
次の項目では、スクリプトを作成していきましょう。

【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

静的なenvironment.tsをAngularプロジェクトから除外する

それでは、

environment.ts

をAngularプロジェクトから取り除く作業に入ります。
まずは

environment.ts

をいきなり消去というわけにはいかないので、消去前の中身を良く確認しておきましょう。バックアップとしてどこかに保存しておいても結構です。
一例として、以下のようになっていたとします。

開く/閉じる

            export const environment = {
    production: false,
    accessKeyId: 'hoge123456789',
    secretAccessKey: 'HOGE_HOGE_PIYO_PIYO'
    defaultRegion: 'ap-northeast-1'
};

見てのように、AWSのプライベートAPIキーが

environment.ts

にハードコピーされているので、このままだとうっかりGitでプロジェクトを公開した場合、第三者に漏洩してしまうリスクがあります。
そこで、これらの秘密情報は外部にもれないようにローカルの

.env

に書き、Angularアプリがビルドされるときだけ

environment.ts

を吐き出すように仕向けることで、クレデンシャルファイルとそれ以外のリソースを分離しようというのが今回の基本的な考え方です。
まずはAngularビルド時に、先程の

environment.ts

にあわせて、

.env

ファイルから自動創出してくれるスクリプト(.ts)を以下の内容でAngularプロジェクトフォルダのルート(

package.json

と同じ階層)に新規作成しておきましょう。

開く/閉じる

            const { writeFile, existsSync, mkdirSync } = require('fs');
const { argv } = require('yargs');
require('dotenv').config();

const environment = argv.environment;
const isProd = environment === 'prod';
const envDir = './src/environments';

existsSync(envDir) || mkdirSync(envDir);

const writeEnvFile = (targetPath: string, environmentFileContent: string) => {
    writeFile(targetPath, environmentFileContent, (err: any) => {
        if (err) { console.log(err); }
        if (environmentFileContent !== '') {console.log(`${targetPath}へ書き込みました`);}
    });
}

const devEnvContents = `//Generate environment ts file automatically via setenv script.
export const environment = {
    production: ${isProd},
    accessKeyId: '${process.env.AWS_ACCESS_KEY_ID}',
    secretAccessKey: '${process.env.AWS_SECRET_ACCESS_KEY}',
    defaultRegion: '${process.env.AWS_DEFAULT_REGION}'
};`;

const prodEnvContents = `//Generate environment ts file automatically via setenv script.
export const environment = {
    production: ${isProd},
    accessKeyId: '',
    secretAccessKey: '',
    defaultRegion: ''
};`;

if (isProd) {
    writeEnvFile(`${envDir}/environment.prod.ts`, prodEnvContents);
    writeEnvFile(`${envDir}/environment.ts`, prodEnvContents);
} else {
    writeEnvFile(`${envDir}/environment.ts`, devEnvContents);
}

これで補助スクリプト準備は完了です。
ちなみに、プロダクション(公開版)ビルドの際はそもそもプライベートキーに依存するはずがないので、

environment.prod.ts

のフィールドは空かダミーかをセットしている状態になっています。

開く/閉じる

            export const environment = {
    production: true,
    accessKeyId: '',
    secretAccessKey: ''
    defaultRegion: ''
};

では、このスクリプトがビルド直前に動作するように、

package.json

の

scripts

を修正してみます。

開く/閉じる

            {
    //...中略
    "scripts": {
        "ng": "ng",
        //...中略
        //👇追加
        "conf:env": "rm -rf ./src/environments && ts-node ./setenv.ts",
        //👇修正
        "start": "yarn conf:env --environment=dev && ng serve",
        "build": "yarn conf:env --environment=prod && ng build --prod",
    //...以下略
}

では、この追加したnpmコマンドで

environment.ts

が

.env

ファイルから生成されるか一度試しておきましょう。

開く/閉じる

            $ yarn conf:env
./src/environments/environment.tsへ書き込みました

$ cat src/environments/environment.ts
//Generate environment ts file automatically via setenv script.
export const environment = {
    production: false,
    accessKeyId: 'hoge123456789',
    secretAccessKey: 'HOGE_HOGE_PIYO_PIYO'
    defaultRegion: 'ap-northeast-1'
};

ちゃんと生成されてそうなら、

src/environments

の中身を空にして、Gitから除外するために

.gitignore

にリスト追加をします。

開く/閉じる

            #...
#👇追記
environment.prod.ts
environment.ts

そして、この状態で一度

git commit

を行い、Gitから抹消しておきましょう。
これでAngularプロジェクトをGitHubなどで公開してもプライベートなAPIキーなど見られると悪用されてしまいそうな情報は見えなくなります。 (※ただし、Gitのコミット履歴が残ったまま公開してしまうと、特定のコミットまで戻すことも可能なので、

environment.ts

を除外する以前のコミットは削除しないと意味がないことに注意してください。)

serve/buildで動作確認

では最後にちゃんと

environment.ts

が

.env

ファイルから自動生成されて、デバッグモードで起動するかを確かめましょう。

開く/閉じる

            $ yarn serve

念の為、プロダクションビルドも通るか確認しておきましょう。

開く/閉じる

            $ yarn build

問題がなければ、無事にAngularプロジェクトから

environment.ts

を除去できたことになります。めでたしめでたし。

【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

参考サイト

Setup dotenv to Access Environment Variables in Angular 9