【Angular応用講座】Angularプロジェクトからenvironment.tsを捨ててうっかりCreadentials(個人情報)の漏洩を防ぐタコつぼの中でプログラミングをコツコツ楽しむ人のためのやや偏ったブログです。当ページには【広告/PR】を含む場合があります。参考サイト本記事執筆途中で2022年も終わりに近づいて来ました。気持ちはもう店じまいですが、今年最後の締めくくりにAngularネタを紹介します。今回は主題の通り、AngularプロジェクトをGithubで他のコラボレーターに共有する際に割と困る「environment.tsの個人情報埋込み問題」を回避するためのテクニックです。以下、適当な既存のAngularプロジェクトからenvironment.tsを、個人情報を含んだ「.envファイル」の中身で生成・書換えを行うように修正していく手順を説明していきます。environment.tsファイルのリセットとなります。難しい内容ではないので、ポイントだけを軽く触れながら以降で解説してみます。「.env」ファイルの準備Angularに限らずnode.jsでのアプリケーション開発においては、自分だけが利用できるローカル環境だけで利用するパラメーターは、「.envファイル」で管理するのがお手軽&ベターです。自分だけが使えて、他人に見られると困る代表的なものは、有料クラウドサービスのAPIキーなどが挙げられます。ここでは例として、AWSのAPIアクセスキーのクレデンシャル情報を想定してみます。お手元のAngularプロジェクトに.envが無い場合には、新規作成しておきましょう。一例としてAWSのAPIアクセスキーの仕様で埋め込んだ.envは以下のようになっています。AWS_ACCESS_KEY_ID=hoge123456789AWS_SECRET_ACCESS_KEY=HOGE_HOGE_PIYO_PIYOAWS_DEFAULT_REGION=ap-northeast-1なお、gitには.envファイルは含めませんので、.gitignoreファイルには.envを追加しておきます。#...#👇追記.env【効果的学習法レポート・2022年版】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍&教材特集dotenvとyargsの導入Angularのビルド実行時に、.envファイルを呼び出すための「dotenv」と、簡単にnodejsでの実行コマンドを引数付きにできる「yargs」の2つをプロジェクトに追加します。-D注意が必要なのはdotenvの扱いですが、プロジェクト内から読み込まれる.envはプロジェクトのルートディレクトリではなく、リソースファイル(js/ts)と同じ階層にある.envとなります。.envを読み込んでいるか、その都度チェックしてみてください。Angularのデフォルト・プロジェクトではts-nodeがあらかじめ入っているので、ここでは触れませんが、もしpackage.jsonに存在していないようであれば、以下でインストールしておきましょう。-Dこれで、今回必要なツールが導入されました。次の項目では、スクリプトを作成していきましょう。静的なenvironment.tsをAngularプロジェクトから除外するそれでは、environment.tsをAngularプロジェクトから取り除く作業に入ります。environment.tsをいきなり消去というわけにはいかないので、消去前の中身を良く確認しておきましょう。バックアップとしてどこかに保存しておいても結構です。一例として、以下のようになっていたとします。'ap-northeast-1'};見てのように、AWSのプライベートAPIキーがenvironment.tsにハードコピーされているので、このままだとうっかりGitでプロジェクトを公開した場合、第三者に漏洩してしまうリスクがあります。そこで、これらの秘密情報は外部にもれないようにローカルの.envに書き、Angularアプリがビルドされるときだけenvironment.tsを吐き出すように仕向けることで、クレデンシャルファイルとそれ以外のリソースを分離しようというのが今回の基本的な考え方です。Angularビルド時に、先程のenvironment.tsにあわせて、.envファイルから自動創出してくれるスクリプト(.ts)を以下の内容でAngularプロジェクトフォルダのルート(package.jsonと同じ階層)に新規作成しておきましょう。devEnvContents);}これで補助スクリプト準備は完了です。ちなみに、プロダクション(公開版)ビルドの際はそもそもプライベートキーに依存するはずがないので、environment.prod.tsのフィールドは空かダミーかをセットしている状態になっています。''};では、このスクリプトがビルド直前に動作するように、package.jsonのscriptsを修正してみます。//...以下略}では、この追加したnpmコマンドでenvironment.tsが.envファイルから生成されるか一度試しておきましょう。'ap-northeast-1'};ちゃんと生成されてそうなら、src/environmentsの中身を空にして、Gitから除外するために.gitignoreにリスト追加をします。commitを行い、Gitから抹消しておきましょう。これでAngularプロジェクトをGitHubなどで公開してもプライベートなAPIキーなど見られると悪用されてしまいそうな情報は見えなくなります。(※ただし、Gitのコミット履歴が残ったまま公開してしまうと、特定のコミットまで戻すことも可能なので、environment.tsを除外する以前のコミットは削除しないと意味がないことに注意してください。)serve/buildで動作確認では最後にちゃんとenvironment.tsが.envファイルから自動生成されて、デバッグモードで起動するかを確かめましょう。serve念の為、プロダクションビルドも通るか確認しておきましょう。build問題がなければ、無事にAngularプロジェクトからenvironment.tsを除去できたことになります。記事の担当:taconocatナンデモ系エンジニア主にAngularでフロントエンド開発することが多いです。開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。プログラミングするのが好きな人間です。