環境ごとの定義ファイルを作成する｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

Angularのようなフロントエンドフレームワークを使用していると、
１．モックを使ってクライアントサイドのみ実装、
２．次にAPIサーバと結合
３．本番へアップ
と、いくつかの環境に分かれて実行することが多くなります。

本番へはビルドしたソースをアップするのであまり問題はないのですが、１と２は結構ちょこちょこ切り替える場合があるような場合、特にAPI側へのリクエストURLが異なってきます。
今回はそういった環境ごとに変更が必要な項目を設定ファイルに記述し、Angularを起動する際にどの設定を有効にするかを切り替えてみます。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

手順

手順1.Environmentファイルの追加

appやassetsディレクトリと同階層に「environments」ディレクトリがありますので、
その中をみてみます。すると、
・environment.ts
・environment.prod.ts
という2ファイルがあります。
「prod」は本番用で、もう一つが開発用です。

今回は結合環境用に
・environment.join.ts
というファイルを追加してみます。

手順2.ファイルに記述

以下のようにファイルに記述してみます。

export const environment = {
  production: false,
  envName: 'join',
  apiUrl: 'http://localhost/api/',
};

「envName」を指定しているところがポイントです。
apiUrlはAPIサーバへのURLで、このようにプログラム内で使用する定数をこのenvironmentの中に定義していくことができます。

手順3.Angular起動時のコマンド

ファイルができたら、このファイルを指定して起動してみましょう。
以下のコマンドで実行できます。

ng serve -e join

「ng serve」コマンドにオプション「-e」で起動環境を指定しています。
（本番用だったら「ng serve -e prod」です。）
apiUrlが切り替わっていたら起動切替成功です。

感想

別ファイルで定数定義しても同じことかもしれませんが、サーバサイドとクライアントサイドを別々に作っていた際に、
いちいちファイル変更せずにすむので、個人的にはとても便利でした。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載