Successfully reported this slideshow.

AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション

11

Share

1 of 84
1 of 84

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション

  1. 1. #jjug_ccc #ccc_e5 AngularとSpring Bootで作る SPA + RESTful Web Service アプリケーション 株式会社カサレアル 多田 真敏・菊池 真登 2019/11/23 JJUG CCC 2019 Fall (C) CASAREAL, Inc. All rights reserved. 1
  2. 2. #jjug_ccc #ccc_e5 大切なことなので (C) CASAREAL, Inc. All rights reserved. 2 100% 宣伝です 80%
  3. 3. #jjug_ccc #ccc_e5 このセッションは (C) CASAREAL, Inc. All rights reserved. 3 株式会社カサレアルは Angular と Spring Boot による SPA開発の研修を提供します! このセッションは  Spring Boot と Angular の概要  組み合わせた時の開発のイメージ をお伝えし、SPA開発へ誘う45分間です。
  4. 4. #jjug_ccc #ccc_e5 自己紹介:多田真敏 (C) CASAREAL, Inc. All rights reserved. 4  研修トレーナー@カサレアル  Spring / Java EE / Microservices / Cloud Foundry / Kubernetes  Pivotal認定講師  日本Springユーザ会スタッフ  CCCは12回連続12回目の登壇
  5. 5. #jjug_ccc #ccc_e5 株式会社カサレアル (C) CASAREAL, Inc. All rights reserved. 5 他社にはない色々なプログラミング言語の 研修を提供しています!
  6. 6. #jjug_ccc #ccc_e5 目次 (C) CASAREAL, Inc. All rights reserved. 6 1.新しいコースを作ることになった背景 2.Spring Bootによるサーバサイド開発 3.Angularによるクライアント開発 4.どう組み合わせるの?
  7. 7. #jjug_ccc #ccc_e5 目次 (C) CASAREAL, Inc. All rights reserved. 7 1.新しいコースを作ることになった背景 2.Spring Bootによるサーバサイド開発 3.Angularによるクライアント開発 4.どう組み合わせるの?
  8. 8. #jjug_ccc #ccc_e5 新しいコースを作ることになった背景 (C) CASAREAL, Inc. All rights reserved. 8  引き合いが多数! 特に Angular のコースをご受講のお客様から 「Spring Boot との組み合わせ方が知りたい」 という声が!
  9. 9. #jjug_ccc #ccc_e5 それぞれ独立したコースを提供しています (C) CASAREAL, Inc. All rights reserved. 9  Angular入門(3日間)  Angular 単体のコース  基礎からのSpring Boot(2日間)  Spring Boot 単体のコース たくさんの方にご受講いただいております!
  10. 10. #jjug_ccc #ccc_e5 両コースの受講者数も年々増加! (C) CASAREAL, Inc. All rights reserved. 10 0 20 40 60 80 100 120 140 160 2017年度 2018年度 2019年度 Spring Boot受講者数増加率 Spring Boot受講者数増加率 0 20 40 60 80 100 120 140 160 180 200 2017年度 2018年度 2019年度 Angular入門受講者数増加率 Angular入門受講者数増加率  通年で提供を開始した2017年度を基準とした増加率  2019年度は11月までの実績値 2019年度も増加見込み! 11月でこの増加率!
  11. 11. #jjug_ccc #ccc_e5 両コースとも実績がある! 引き合いも多い! 組み合わせて提供することが 私たちの使命! (C) CASAREAL, Inc. All rights reserved. 11
  12. 12. #jjug_ccc #ccc_e5 ワークショップとして提供! (C) CASAREAL, Inc. All rights reserved. 12 実際にアプリを作る研修 クライアント、サーバの両サイドが一通り実装 できるようになることが目標の研修 認証やページネーションも扱う予定 本格的なアプリケーションの実装方法を学ぶ チャンス! 選べる二つのコース体系!
  13. 13. #jjug_ccc #ccc_e5 一ヶ月パック (C) CASAREAL, Inc. All rights reserved. 13  HTML/CSS、JavaScriptといったフロントエンドの基礎  AngularによるSPA開発  Javaの文法からSpring Bootによるサーバサイド開発  AngularとSpring BootによるSPA開発 を一気に学べる一ヶ月のコースです。 他のプログラミング経験者のスキルチェンジに最適!
  14. 14. #jjug_ccc #ccc_e5 定期オープンコース(3日間) (C) CASAREAL, Inc. All rights reserved. 14  Angular入門(3日間)  基礎からのSpring Boot(2日間) を、ご受講いただいた方を対象に、 AngularとSpring BootによるSPA開発 を体験いただく3日間のオープンコースです。
  15. 15. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 15 準備中…
  16. 16. #jjug_ccc #ccc_e5 ご興味ありますか? (C) CASAREAL, Inc. All rights reserved. 16 ふるってご参加ください!
  17. 17. #jjug_ccc #ccc_e5 目次 (C) CASAREAL, Inc. All rights reserved. 17 1.新しいコースを作ることになった背景 2.Spring Bootによるサーバサイド開発 3.Angularによるクライアント開発 4.どう組み合わせるの?
  18. 18. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 18  Pivotal社が中心に開発  Spring Framework の設定地獄から脱却を目指したもの  Starter ライブラリで Maven の dependency の記述を 減らせる  Auto Configuration で必要な設定は済んでいる Spring Bootとは
  19. 19. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 19 業務固有の処理を実装するのは相変わらず 開発効率が上がるわけではない 三つの層を地道に実装していく ただし
  20. 20. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 20 https://start.spring.io/ Web 上でひな型を作成できる IntelliJ IDEA や STS などの主要 IDE も連携している 今回は • Maven • Java 11 • Dependencies Spring Web で作成 Spring Initializrで楽々初期構築
  21. 21. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 21 作成例 - 1
  22. 22. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 22 作成例 - 2
  23. 23. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 23  Spring MVC による Webアプリの開発用 Starter  内部に組み込み Tomcat を持つ  Javaアプリとして起動するだけで Webアプリとして 立ち上がる  JSON ⇔ Java オブジェクトの変換機能をあらかじ め持っている spring-boot-starter-web
  24. 24. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 24 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> pom.xmlにこれを追加するだけで、 Webアプリに必要な設定が完了する spring-boot-starter-web
  25. 25. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 25 デフォルトでは jar ファイルが出来上がる 必要となるライブラリが内包される 実行するだけで Webアプリとして立ち上がる パッケージングで出来上がるもの
  26. 26. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 26 DispatcherServlet JSONを送信 RestControllerRestControllerRestControllerRestController リクエストでは JSON ⇒ Java オブジェクト に変換される レスポンスでは Java オブジェクト ⇒ JSON に変換される JSONを返却 RESTとしてのSpring Boot
  27. 27. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 27 @RestController @RequestMapping("/api/tasks") public class TaskRestController { @PostMapping public ResponseEntity order(@RequestBody TaskRequest taskRequest) { // 要件に応じた処理 return ResponseEntity.created(uri).build(); } } RESTful Web Service が構築できる Javaオブジェクトを受け取り返すだけで
  28. 28. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 28  static locations  src/main/resources/static 配下に静的コンテンツ を配置することでクライアントに返却できる  Welcome Page  src/main/resources/static 配下に置いた index.html が自動的に Welcome Page に設定され トップページアクセスすると返却される Webサーバとしての機能も充実
  29. 29. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 29 http://localhost:8080 にアクセスすると返却される http://localhost:8080/js/index.js とリクエストすると返却される Webサーバとしての機能も充実
  30. 30. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 30  Spring Security を導入する  Spring Boot なら Starterライブラリを追加するだけ  ログイン・ログアウトだけじゃない!  クロスサイト・リクエストフォージェリ(CSRF)対策も デフォルトでサポート  しかも、Angular アプリ向けのモードあり もちろん新規コースで取り扱います! Security対策も楽々!
  31. 31. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 31 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> pom.xmlにこれを追加するだけで、 Spring Securityが使えるようになる spring-boot-starter-security
  32. 32. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 32 @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.csrf() .csrfTokenRepository(CookieCsrfTokenRepository .withHttpOnlyFalse()); } } Security用のJavaConfigでこの太字の 部分を追加するだけ! Angularアプリ用のCSRF対策の設定
  33. 33. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 33  レスポンスヘッダーの Cookie に XSRF-TOKEN という 名前で CSRFトークンを発行する  デフォルトの発行先は HttpSession  Spring Security 4.1 からある 実は、Angularの動作に合わせたもの CookieCsrfTokenRepositoryとは
  34. 34. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 34 A CsrfTokenRepository that persists the CSRF token in a cookie named "XSRF-TOKEN" and reads from the header "X-XSRF-TOKEN" following the conventions of AngularJS. AngularJSの規則に従ってヘッダー「X-XSRF-TOKEN」か らCSRFトークンから読み取る Spring Securityのドキュメントにも
  35. 35. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 35 正規のWebサイト ①購入ページをリクエスト ②CSRFトークンを発行し、 レスポンスヘッダーのCookieに含める ③CookieからCSRFトークンを取得し、 リクエストボディ(またはヘッダー)に含めて 購入リクエストを送信 ④CookieのCSRFトークンと リクエストボディのCSRFトークンを比較し、 同じであれば購入OKとする Cookieを利用したCSRF対策の動作概要
  36. 36. #jjug_ccc #ccc_e5 目次 (C) CASAREAL, Inc. All rights reserved. 36 1.新しいコースを作ることになった背景 2.Spring Bootによるサーバサイド開発 3.Angularによるクライアント開発 4.どう組み合わせるの?
  37. 37. #jjug_ccc #ccc_e5 自己紹介:菊池真登 (C) CASAREAL, Inc. All rights reserved. 37  研修トレーナー@カサレアル  登壇実績:Spring / Java SE  開発歴[Spring]:2012年から  開発歴[Angular]:2015年頃に 1.5年間AngularJSに触れて冬眠  今回新規コースのコンテンツ 作成を任命される
  38. 38. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 38  Google製のフレームワーク  JavaScript上で動作するWebアプリケーション用  フルスタック  TypeScript推奨 Angularとは
  39. 39. #jjug_ccc #ccc_e5 って、ネット検索で見つけられる情報なんて、 いらないですよね。。。 (C) CASAREAL, Inc. All rights reserved. 39
  40. 40. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 40  画面は基本的に index.html だけで遷移は ない  ボタンクリックなどで表示の切り替えができるが、 Angular が頑張ってそれっぽく見せている  必要なデータは XMLHttpRequest(XHR) でサーバ から非同期で取得  構成要素が Spring MVCに近い 少し砕けた紹介を
  41. 41. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 41 http://localhost:4200 http://localhost:4200/product/list 左側のリンクをクリックすると、この部分の表示するための 「部品・Component」をAngularが切り替える 実際の作業イメージとしては、この「部品・Component」単位で 作成していく Angularの頑張り
  42. 42. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 42 Template <html> Component Injector Service データ 入力値 XHR Angularを構成するもの
  43. 43. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 43 サーバサイド三層アーキテクチャー
  44. 44. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 44 サーバサイドJavaエンジニアであれば、実はとっつきやすいかも! (注意:個人的な主観) Template <html> Component Injector Service データ 入力値 XHR 構成要素がSpring MVCに近い
  45. 45. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 45  だからこそのTypeScript!  クラスベースのオブジェクト指向  静的な型の指定 JavaScriptって、型なしじゃ?
  46. 46. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 46 @Injectable({ providedIn: 'root' }) export class TaskDataService { constructor(private http: HttpClient) {} findAll(): Observable<Task[]> { return this.http.get<Task[]>('/api/tasks'); } } DI で HttpClient を代入 HTTP GET リクエスト でデータを取得 実際のソースコード - Service
  47. 47. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 47 @Component({ selector: 'app-task-table', templateUrl: './task-table.component.html', styleUrls: ['./task-table.component.css'] }) export class TaskTableComponent implements OnInit { taskList: Task[]; constructor(private taskDataService: TaskDataService) {} ngOnInit() { this.taskDataService.findAll().subscribe(tasks => { this.taskList = tasks; }); } データを取得して フィールドに代入 実際のソースコード - Component
  48. 48. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 48 <table> <tr *ngFor="let todoTask of taskList" (click)="clickRow(todoTask)" [ngClass]="onColor(todoTask)"> <td>{{todoTask.id}}</td> <td>{{todoTask.todo}}</td> <td>{{todoTask.priority}}</td> </tr> </table> Component と Template間は 双方向データバインディングで やり取り可能 実際のソースコード - Template
  49. 49. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 49 export class Task { id: number; todo: string; priority: string; constructor(id: number, todo: string, priority: string) { this.id = id; this.todo = todo; this.priority = priority; } } オリジナルのクラスを定義 クラスの宣言
  50. 50. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 50 export class TaskDataService { constructor(private http: HttpClient) {} findAll(): Observable<Task[]> { return this.http.get<Task[]>('/api/tasks'); } } ジェネリクスの 型パラメータとして利用 Service のソースコード
  51. 51. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 51 IDEの手厚い補完機能が受けられるので、 Java開発者にとってはありがたい トランスパイル! (変換!) Webブラウザで動かすには
  52. 52. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 52  HttpClient が高度に抽象化!  Angular に標準で備わっている  GET、POST など直感的でわかりやすい  ジェネリクスによって戻り値の型をある程度は 精査できる XHRって、しんどくない?
  53. 53. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 53 export class TaskDataService { constructor(private http: HttpClient) {} findAll(): Observable<Task[]> { return this.http.get<Task[]>('/api/tasks'); } } HttpClientの呼び出し 方のサンプル jQueryのコードと比較 するとだいぶ簡略化 Serviceのソースコード
  54. 54. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 54 正規のWebサイト ①購入ページをリクエスト ②CSRFトークンを発行し、 レスポンスヘッダーのCookieに含める ③CookieからCSRFトークンを取得し、 リクエストボディ(またはヘッダー)に含めて 購入リクエストを送信 ④CookieのCSRFトークンと リクエストボディのCSRFトークンを比較し、 同じであれば購入OKとする この部分が自動 化されます! HttpClientはCSRF対策もばっちり
  55. 55. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 55  X-XSRF-TOKENヘッダーにトークンを含めて送信 HttpClient はこれをリクエスト時に自動的に 行う フレームワークに乗っかるだけで お手軽にセキュアなアプリが作れる! HttpClientはCSRF対策もばっちり
  56. 56. #jjug_ccc #ccc_e5 目次 (C) CASAREAL, Inc. All rights reserved. 56 1.新しいコースを作ることになった背景 2.Spring Bootによるサーバサイド開発 3.Angularによるクライアント開発 4.どう組み合わせるの?
  57. 57. #jjug_ccc #ccc_e5 プロジェクトの構成 (C) CASAREAL, Inc. All rights reserved. 57  クライアントサイド・サーバサイドは別プロジェクト にする  分業がしやすい  マイクロサービスへの足掛かりにしやすい  (無いとは思うが)クライアントもしくは サーバサイドの載せ替えがしやすい
  58. 58. #jjug_ccc #ccc_e5 全体のイメージ (C) CASAREAL, Inc. All rights reserved. 58 親プロジェクト Angular プロジェクト Spring Boot プロジェクト MavenやGradleの マルチプロジェクト機能で サブプロジェクトとして作成
  59. 59. #jjug_ccc #ccc_e5 どう組み合わせるの? - 開発時 (C) CASAREAL, Inc. All rights reserved. 59  Spring Bootは通常起動でポート8080で動作  Angularは検証用サーバでポート4200で動作  任意のURLにリクエストを転送する機能をもつ  サーバのAPIとの通信はポート8080に転送する
  60. 60. #jjug_ccc #ccc_e5 Angular CLIのng serve (C) CASAREAL, Inc. All rights reserved. 60 Angular CLI 開発をサポートするコマンドライン ng serve Angular CLI に含まれる検証サーバ機能 ファイルの編集を検知し即時反映される サーバ再起動が必要ないため開発効率が向上
  61. 61. #jjug_ccc #ccc_e5 転送のイメージ (C) CASAREAL, Inc. All rights reserved. 61 index.htmlなどは 直接返却 Webブラウザ ng serve ポート4200 Spring Boot ポート8080 /api/tasks /api/tasks JSONJSON 検証用サーバが ポート8080に転送 する
  62. 62. #jjug_ccc #ccc_e5 転送の設定 (C) CASAREAL, Inc. All rights reserved. 62 { "/api": { "target": "http://localhost:8080", "secure": false } } http://localhost:4200/api/** に合致するリクエストは、 http://localhost:8080/api/** に転送する設定 proxy.conf.json "serve": { "options": { "browserTarget": "client:build", "proxyConfig": "src/proxy.conf.json" }, angular.json ng serveのオプションに転送 の設定を読み込ませる
  63. 63. #jjug_ccc #ccc_e5 開発時、特に気にするものはない (C) CASAREAL, Inc. All rights reserved. 63 export class TaskDataService { findAll(): Observable<Task[]> { return this.http.get<Task[]>('/api/tasks'); } } @RestController @RequestMapping("/api/tasks") public class TaskRestController { @GetMapping public List<TaskResponse> findAll() { return this.todoService.findAll().stream() .map( todo -> new TaskResponse(todo)) .collect(Collectors.toList()); } } HttpClientのメソッドには 「/api/tasks」とだけ記述。 ポート番号の違いの考慮は不要
  64. 64. #jjug_ccc #ccc_e5 どう組み合わせるの? - パッケージング (C) CASAREAL, Inc. All rights reserved. 64  今回は1つの成果物で動くようする Webブラウザ サーバ APIだけでなく 静的コンテンツも 返却
  65. 65. #jjug_ccc #ccc_e5 基本方針 (C) CASAREAL, Inc. All rights reserved. 65  トップページアクセスで index.html を返却  関連する JavaScript もダウンロード可能  Spring Boot の static locations  Spring Boot の Welcome Page の機能を使う
  66. 66. #jjug_ccc #ccc_e5 なぜSpring BootのWebサーバ機能? (C) CASAREAL, Inc. All rights reserved. 66  Cross-Origin Resource Sharing の考慮が不要  最終成果物を1つにできるのでディプロイが楽  静的コンテンツのダウンロードは初回アクセスの 時だけなので Webサーバとしての負荷は高くない
  67. 67. #jjug_ccc #ccc_e5 別々にホスティングするケースもご紹介 (C) CASAREAL, Inc. All rights reserved. 67
  68. 68. #jjug_ccc #ccc_e5 ホスティングサービスへのディプロイ (C) CASAREAL, Inc. All rights reserved. 68  Firebase hosting  Azure  Now  Netlify  GitHub pages 等の主要ホスティングサービスにはAngular CLI で 自動ディプロイが可能 https://angular.jp/guide/deployment#automatic- deployment-with-the-cli
  69. 69. #jjug_ccc #ccc_e5 任意のWebサーバへのディプロイ (C) CASAREAL, Inc. All rights reserved. 69  Angular CLIのビルド機能を使ってビルドする  ng build --prod というコマンドを使う  成果物のすべてをWebサーバにコピーする という手順になる 詳しい手順はこちら https://angular.jp/guide/deployment#basic- deployment-to-a-remote-server *サーバサイドのディプロイ先は別途ご用意ください
  70. 70. #jjug_ccc #ccc_e5 Same Origin Policy (C) CASAREAL, Inc. All rights reserved. 70 異なるドメインへの通信は 許可されない
  71. 71. #jjug_ccc #ccc_e5 Spring MVC で CORS 対応 (C) CASAREAL, Inc. All rights reserved. 71 @RestController @RequestMapping("/api/tasks") public class TaskRestController { @GetMapping @CrossOrigin public List<TaskResponse> findAll() { return this.todoService.findAll().stream() .map(todo -> new TaskResponse(todo)) .collect(Collectors.toList()); } } @CrossOriginを付けるだけ
  72. 72. #jjug_ccc #ccc_e5 サーバホスト名解決 (C) CASAREAL, Inc. All rights reserved. 72 Angular Spring Boot http://localhost:4200 http://localhost:8080 Angular Spring Boot https://angular.com https://spring.com 開発環境 本番環境 開発環境の Angular アプリは http://localhost:8080 本番環境のAngular アプリは https://boot.example.com に非同期通信を行うように切り替える
  73. 73. #jjug_ccc #ccc_e5 環境設定ファイル (C) CASAREAL, Inc. All rights reserved. 73  Angular は環境ごとの設定値を定義できる  開発用のAPIのURL  本番用のAPIのURL 等を設定する  ビルドのコマンドのオプションで環境を指定する
  74. 74. #jjug_ccc #ccc_e5 別々にホスティングするケースの紹介でした (C) CASAREAL, Inc. All rights reserved. 74 こちら、別途qiita記事を用意しています! Spring MVC で CORS https://qiita.com/m_kikuchi/items/df8c070b228d f44a5462
  75. 75. #jjug_ccc #ccc_e5 最終的に以下の形を目指す (C) CASAREAL, Inc. All rights reserved. 75 Spring Boot アプリの jar :最終成果物 Angular アプリの jar BOOT-INF lib META-INF resources
  76. 76. #jjug_ccc #ccc_e5 static locations と Welcome Page (C) CASAREAL, Inc. All rights reserved. 76  classpath:/META-INF/resources/  classpath:/resources/  classpath:/static/  classpath:/public/ static locations と Welcome Page は デフォルトでは上記4か所が有効 新規コースでは、classpath:/META-INF/resources/を使う
  77. 77. #jjug_ccc #ccc_e5 なぜ /META-INF/resources/ か? (C) CASAREAL, Inc. All rights reserved. 77  最終的にAngularアプリの成果物を jar にまとめる  /META-INF/resources/ が格納場所としてしっくりくる  Servlet3.0 の 「10.5 ディレクトリ構造」 とも合致する  サーバサイドをSpring以外にしても応用が利く  ただし、Spring Bootではjarの中のstaticディレクトリに格 納しても有効
  78. 78. #jjug_ccc #ccc_e5 やること (C) CASAREAL, Inc. All rights reserved. 78  Angularアプリの成果物をjarにまとめる  Spring Bootアプリの依存性に追加する
  79. 79. #jjug_ccc #ccc_e5 Angularアプリの成果物をjarにまとめる (C) CASAREAL, Inc. All rights reserved. 79  frontend-maven-pluginを導入  https://github.com/eirslett/frontend-maven- plugin  Mavenでのビルド時に前述のトランスパイル などを組み込むことができる
  80. 80. #jjug_ccc #ccc_e5 Angularアプリの成果物をjarにまとめる (C) CASAREAL, Inc. All rights reserved. 80 Mavenのリソースフォルダ にAngularアプリの成果物 の出力先フォルダを追加 することで、自動的にjar の中に取り込まれる
  81. 81. #jjug_ccc #ccc_e5 Spring Bootアプリの依存性に追加する (C) CASAREAL, Inc. All rights reserved. 81  MavenのdependencyにAngularアプリを追加  jar の中にAngularアプリが組み込まれる <dependency> <groupId>com.example</groupId> <artifactId>client</artifactId> <version>1.0-SNAPSHOT</version> </dependency>
  82. 82. #jjug_ccc #ccc_e5 親プロジェクトをパッケージング (C) CASAREAL, Inc. All rights reserved. 82 Spring Boot アプリの jar :最終成果物 Angular アプリの jar BOOT- INF lib META- INF resource s Angular ⇒ Spring Boot の順でパッケージング され最終的にこの形に なる
  83. 83. #jjug_ccc #ccc_e5 ソースコードを公開しています (C) CASAREAL, Inc. All rights reserved. 83 https://github.com/Masato1986/angular-spring-parent  紹介しきれなかった細かな設定は参照願います。  環境構築手順も書いています。
  84. 84. #jjug_ccc #ccc_e5 まとめ (C) CASAREAL, Inc. All rights reserved. 84  Angular と Spring Boot は相性抜群  サービスやDIなどの構成要素が似ている  CSRF対策もばっちり SPA開発の最初の一歩として、 ぜひ弊社研修をご利用ください!

×