More than 5 years have passed since last update.

[Angular] Angular CLIでプロキシを利用する

Last updated at 2018-11-29Posted at 2017-07-31

フロントエンドからバックエンドに対して、同一ホストだがポートが異なる構成で疎通したいケースがある。
たとえば

といったケースである。
~~Angular では~~ 通常、こうしたケースだと CORS によるエラーが発生してしまうのだが、Angular では Angular CLI でプロキシ設定ファイルを用意することで対応できる。

この記事を実施した環境

次の例だとフロントエンドの「/app」にリクエストがきた場合、バックエンドの「localhost:3000」にフォワードされる設定となる。

proxy.conf.json

{
  "/app": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/app": ""}
  }
}

プロキシ設定ファイルを用意したら、それを使用してアプリケーションを起動する設定を package.json に記載する。
具体的には、次の「start」の内容を package.json の「scripts」の要素に記載する。

package.json

{
  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json"
  }
}

前項までの設定を終えたら、次のコマンドを実行することでプロキシ設定を反映させた状態でアプリケーションが起動する。

// プロキシ設定を反映させる場合
$ npm run start

プロキシ設定を反映させたくない場合、直接 ng serve でアプリケーションを起動させれば良い。

// プロキシ設定を反映させたくない場合
$ ng serve