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 を積極的に導入していない。(社内でやっているところはある) 理由はいくつかあって、
