angularCLIのプロキシを使用してphpのビルトインサーバーを呼ぶ
はじめまして！初登場のミヤジです！
本日はangularとphpでプロジェクトを作成していた際にちょっとぶち当たったこと。
フロントエンドからバックエンドに、ポートの異なる同一ホストを呼びたい時ありますよね。
ただ普通に実行してしまうと、CORS問題があります。
CORSの設定はなにせ面倒！という時にプロキシ設定を覚えておくと割とすんなり解決することができます。
実装環境
- Angular v6.0.3
- angular/cli v6.0.8
- php v7.1.18
今回のケース
今回は以下の状況下で行います。
- フロントエンド: Angular localhost:9200
- バックエンド: php(Phalcon) localhost:9300
プロキシの設定
フロントエンドからAPIリクエストを送信するとして、”/api”がつくリクエストはバックエンドに通すという設定をします。
angularのプロジェクト配下にproxy.conf.jsonというファイルを以下のように作成しましょう。
{
"/api/*": {
"target": "http://localhost:9300",
"secure": false,
"logLevel": "debug",
"pathRewrite": {"^/api" : ""}
}
}
今回は状況を確認したかったのでlogLevelにdebugを入れています。
pathRewriteでバックエンドには”/api”の部分を取り除いた形でのリクエストを投げるように設定しています。
package.jsonの編集
プロキシの設定が完了したら、angularを立ち上げる際のscriptを編集しましょう。
{
...
"script": {
"start": "ng serve --port=9200 --proxy-config proxy.conf.json",
...
}
...
}
npm startで起動させる際の内容の変更です。
（今回の場合はangularのデフォルトポートではないのでポートの設定も書いてありますがお気になさらず！）
基本的には–proxy-configのあとに先ほど設定したプロキシ設定ファイルを書くだけです。
いざ起動
さあ早速、フロントエンドとバックエンドを起動してみます。
$ npm start
$ php -S localhost:9300 (省略)
logLevelをdebugに設定したのでプロキシ設定のログがターミナル上に出てくると思います。
いざ、APIをリクエストする。
あれ？エラーが…
[HPM] Rewriting path from "/api/..." to "/..."
[HPM] POST /api/... ~> http://localhost:9300
[HPM] Error occurred while trying to proxy request /auth/login from localhost:9200 to http://localhost:9300 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
phpのビルトインサーバー起動で忘れがちなこと
色々悩みに悩んで行き着いた先は割と単純でした。
phpの公式ドキュメントに以下のことが書いてありました。
例6 CLI ウェブサーバーへのリモートマシンからのアクセス
ウェブサーバーを、任意のインターフェイスからポート 8000 でアクセスできるようにするには、このようにします。
$ php -S 0.0.0.0:8000
という訳でlocalhostの部分を0.0.0.0に変更してphpを立ち上げましょう。
プロキシの設定（proxy.conf.json）も修正します。
{
"/api/*": {
"target": "http://0.0.0.0:9300",
"secure": false,
"logLevel": "debug",
"pathRewrite": {"^/api" : ""}
}
}
そしてangularも再起動。さて、どうでしょう。
[HPM] Rewriting path from "/api/..." to "/..."
[HPM] POST /api/... ~> http://0.0.0.0:9300
アクセスできました！
まとめ
というわけで、まさかのphpのサーバー起動でぶち当たるという…
ですが、プロキシの設定はそこまで面倒でもないかなといった印象でした。
参考
