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


2022/12/29
蛸壺の技術ブログ|Angularプロジェクトからenvironment.tsを捨ててうっかりCreadentials(個人情報)の漏洩を防ぐ

本記事執筆途中で2022年も終わりに近づいて来ました。

気持ちはもう店じまいですが、今年最後の締めくくりにAngularネタを紹介します。

今回は主題の通り、AngularプロジェクトをGithubで他のコラボレーターに共有する際に割と困る
「environment.tsの個人情報埋込み問題」を回避するためのテクニックです。

以下、適当な既存のAngularプロジェクトから
environment.tsを、個人情報を含んだ「.envファイル」の中身で生成・書換えを行うように修正していく手順を説明していきます。

おおまかな流れでは、

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

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


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Angularをこれから学びたい人のためのオススメ書籍&教材特集

「.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
        

合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Angularをこれから学びたい人のためのオススメ書籍&教材特集

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
        
これで、今回必要なツールが導入されました。

次の項目では、スクリプトを作成していきましょう。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Angularをこれから学びたい人のためのオススメ書籍&教材特集

静的な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.jsonscriptsを修正してみます。

            
            {
    //...中略
    "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を除去できたことになります。めでたしめでたし。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Angularをこれから学びたい人のためのオススメ書籍&教材特集

参考サイト

Setup dotenv to Access Environment Variables in Angular 9

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。

合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Angularをこれから学びたい人のためのオススメ書籍&教材特集