Java Back-end Angular appを SpringBoot でビルドするメカニズム

Java 백엔드로 Angular App 구동원리

Java 백엔드로 Angular 앱을 개발하고 빌드하는 방법

Angular appをビルドしリリースする方法は下記の二つがあります。

１．NodeJSもしくはJavaでAngularをビルド(Javaを使ったらserver codeも処理しないと。例えばjavaでindex.html pageをloadしないと。)

２．AngularをビルドしNGINX Web Serverで該当静的コンテンツを提供

するということです。

Angular：Web appをビルドするためのJava Script FrameworkでありBrowserにて自体にロードできません。

Browerのすべての依存性(CSS 、JS file)と共にAngularのindex.html(single page)をロードする一種のメカニズムが必要であります。

この場合、Angular resources をロードしAngular appでAPI呼び出しを受け入れるWeb serverでjavaを使用しています。

/apiがないすべてのweb requestはAngular routingに移動します。/apiを含めているすべての経路はJava serverで処理されます。

---

前提条件

• Java
• Angular CLI
• typescript
• VSCode
• ngx-bootstrap
• gradle or meaven?

開発段階では完全に違うportでJava serverとAngular appを実行します。

---

Project Structure

javaとAngularに対して全く異なる二つのフォルダが必要です。

 

---

Java API

原文参照

---

Angular app

原文参照

---

Java API - Angular interaction

この二つの相互作用は、APIに対するすべての呼び出しをプロキシ処理することによって発生します。

開発段階でAngular appはport8080で実行されるwebpack dev server , Java APIによりport4200にて実行されます。

すべてのAPI呼び出しはJava APIでProxyできます。Angularは内蔵Proxy方法を提供します。

ファイルを見ると/apiで始まるすべての経路がJava APIが実行されるlocalhost:8080にredirectionになります。

この後でproxyConfig キーを使ってservice下のangular.jsonにて定義しないといけないです。

これが構成されれば4200にてappを実行し8080でJava APIを続けて共に作動するようにするのができます。