【サーバーサイドAngular】AngularでビルドしたWebアプリでExpress.jsからCORSプロキシを設定する
※ 当ページには【広告/PR】を含む場合があります。
2022/03/22
前の回では、Angularのローカル開発環境からdevサーバー(webpack-dev-server)を立ち上げて、プロキシルートで外部のオリジンへアクセスする方法を紹介しました。
Angularアプリ開発の同一オリジンポリシーエラー対策 〜 CORS(オリジン間リソース共有)できるプロキシールートを設定するAngularアプリのローカル環境での開発に便利なCORSを簡単に実現できる独自のプロキシルートの設定方法を解説します。
yarn startコマンドを卒業しないといけないタイミングもあるでしょう。この場合、Angular標準のプロキシルートの設定からもおさらばして、プロダクトで利用するサーバーサイド側のプロキシ設定に従う必要があります。今回はExpressでもプロキシルーティングを実現するための方法を解説していきます。
【効果的学習法レポート・2022年版】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集 Angular側のビルド
では前回のプロキシルーティングの構成をもう一度おさらいしておきます。プロキシルートの構成は前回と共通とします。AngularでプロダクトビルドしたWebアプリケーションであっても、結局はブラウザから使うことには変わりありませんので、同一オリジンポリシーのルールが課させることには違いありません。AngularのプロダクトSPAを準備する
とりあえず通常のビルドでAngularのSPA(シングルページアプリケーション)を生成します。なおAngularのビルドを細かいビルドオプションはangular.jsonに記述していれば、ビルドオプティマイザやAOTコンパイラをコマンド引数でONにする必要はないのですが、ここらへんは個人的な趣向です。ng buindコマンドからプロダクト出力を制御したい場合には、以前の記事で説明していたことを試してみてください。
