Angularでのローカル開発時に便利なProxyConfig

前提条件

ローカル環境での開発時にはMockAPIを返すサーバと実際のAPIサーバの2つを作ることが多い。そして小規模〜中規模のモノリシックなアプリの場合はユーザがアクセスするFQDNとAPIのFQDNが同じであることも多い。

課題

ただ、実際に開発するときにはAngularはWebpackのDevServerが4200ポートを使っていて、Rails,NodeなどのAPIサーバは他のポートを使わざるを得ない。これまで自分が作ったWebサービスではMockAPIと実際のAPIサーバのアクセスをどう切り替えていたかというと、environment.mock.ts とかのファイルにURLのフルパスを書いていた。npmから起動するときに ng serve -c=mock とかでmockのconfigurationを読むようにしていた。

export const environment = {
  production: false,
  // api server
  api: {
    url: 'http://127.0.0.1:3000/api'
  }
};

最大の問題はブラウザ上に表示されているFQDNとAPIサーバのFQDNが異なっていた。可能な限り実際のサーバ構成とローカル開発の環境は同じであるほうがいらないトラブルを減らせる。あとはMock用の設定とローカル開発用のAPIサーバの設定とかで個別でファイルを作っていた。

解決策

https://angular.io/guide/build#proxying-to-a-backend-server に書いてあることがすべて。 proxy.conf.jsonを作ってからangular.jsonに読み込ませることで設定終了という非常にお手軽。

{
  "/api": {
    "target": "http://127.0.0.1:3000",
    "secure": false
  }
}

in-memory-web-apiをつかわないのか？

自分はあまりAngularのチュートリアルでも出てくる GitHub - angular/in-memory-web-api を積極的に導入していない。(社内でやっているところはある) 理由はいくつかあって、

Chrome Dev ToolでもわかるようにHTTPリクエストを走らせたい
本番でフロントエンドのコードとAPIのコードが別れているのであれば開発時でも別けたいし、開発のためだけにコードを入れると問題の切り分けが面倒
Mockを1つ追加したいだけなのに毎回コンパイル走るのは遅いし、Angularに慣れてない人にもMockは触ってほしいのでAngularをあまり意識させたくない
swaggerや agreed などドキュメント＋Mockサーバで管理したほうが便利だと思う(この辺はまだ手を付けれていない)