【Angular】複数のバックエンドサーバーに対するプロキシ設定

初めてAngularを触って、「画面から API をコールしてサーバからのデータをクライアントで表示する」と言われたとき、ハッキリ言って何のことかさっぱりわかりませんでした。
つまり、何をしたら良いんですか？状態。

プロキシ設定の方法と、さらに、バックエンドが複数のポートに分かれていた場合の設定方法を学んだので、まとめておきます。

画面から API をコールしてサーバからのデータをクライアントで表示する、とは

プロキシ設定をしてフロントエンド側とバックエンド側のサーバーを繋ぎ、フロントエンドのアプリケーションからAPIのデータを呼び出せるようにする、ということのようです。

例えば、下記のようなフロントエンドとバックエンドがそれぞれ下記のように起動するとします。

フロントエンド（Angularアプリケーション）が http://localhost:4200/
バックエンド（呼び出したいAPI）が http://localhost:3000/

この時、http://localhost:4200/ の側から http://localhost:3000/ のAPIを呼び出せるようにするために、プロキシの設定を行う必要があります。
Angular-cli では、プロキシの定義ファイル .proxy.conf.json を用意することで、簡単に設定できるようです。

公式のドキュメントはこちら。

プロキシ定義ファイル .proxy.conf.json を用意する

アプリケーションディレクトリに .proxy.conf.json を用意します。
作成する場所はここ。

.proxy.conf.json の中身

ほとんど必要最低限の設定はこんな感じです。

{
  "/api": {
    "target": "http://localhost:3000/",
    "secure": false,
    "logLevel": "debug"
  }
}

フロントエンドの /api にリクエストが来た場合に、バックエンドの http://localhost:3000 へ転送（フォワーディング、って言うらしい）される設定になっています。

細かなオプションもあります。オプションについては前述の公式ドキュメントを参照してください。

定義ファイルを package.json で読み込む

package.json で、作成した .proxy.conf.json を読み込むようにします。

{
  "name": "app-name",
  "version": "x.x.x",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:client": "ng serve --proxy-config .proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...
...

設定を反映したアプリケーションの起動方法

まず、API側のバックエンドサーバーを起動します。（起動方法はAPIによると思いますが、大体 npm run start とかでイケるはずです）

フロントエンドのアプリケーション側は、

npm run start:client

これで、プロキシ設定を反映させた状態でアプリケーションが起動します。

もし、プロキシ設定を反映させない状態で起動する必要があれば、元の通り、

npm start

もしくは

ng serve

を実行すれば大丈夫です。

バックエンドが複数のポートに分かれている場合

場合によっては、バックエンドのAPIが複数に分かれていることもあります。

フロントエンド（Angularアプリケーション）が http://localhost:4200/
バックエンド（参照したいAPIその１）が http://localhost:3000/
バックエンド（参照したいAPIその２）が http://localhost:3001/

この場合も、作成した .proxy.conf.json に追記する形で設定が可能です。

{
  "/api": {
    "target": "http://localhost:3000/",
    "secure": false,
    "logLevel": "debug"
  },
  "/auth": {
    "target": "http://localhost:3001/",
    "secure": false,
    "logLevel": "debug"
  }
}

ハイライトされているところが変更部分です。

上記は、情報データを取り扱うAPIと、ユーザー認証系のAPIが分かれていた例。
フロントエンド側のパスを「/api」「 /auth」のように分けておけば、ひとつのファイル内に併記して転送先を分けられるので便利です。