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

4. #jjug_ccc #ccc_e5 自己紹介：多田真敏 (C) CASAREAL, Inc. All rights reserved. 4  研修トレーナー＠カサレアル  Spring / Java EE / Microservices / Cloud Foundry / Kubernetes  Pivotal認定講師  日本Springユーザ会スタッフ  CCCは12回連続12回目の登壇

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月でこの増加率！

13. #jjug_ccc #ccc_e5 一ヶ月パック (C) CASAREAL, Inc. All rights reserved. 13  HTML/CSS、JavaScriptといったフロントエンドの基礎  AngularによるSPA開発  Javaの文法からSpring Bootによるサーバサイド開発  AngularとSpring BootによるSPA開発を一気に学べる一ヶ月のコースです。他のプログラミング経験者のスキルチェンジに最適！

18. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 18  Pivotal社が中心に開発  Spring Framework の設定地獄から脱却を目指したもの  Starter ライブラリで Maven の dependency の記述を減らせる  Auto Configuration で必要な設定は済んでいる Spring Bootとは

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で楽々初期構築

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. #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

26. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 26 DispatcherServlet JSONを送信 RestControllerRestControllerRestControllerRestController リクエストでは JSON ⇒ Java オブジェクトに変換されるレスポンスでは Java オブジェクト ⇒ JSON に変換される JSONを返却 RESTとしてのSpring Boot

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. #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サーバとしての機能も充実

30. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 30  Spring Security を導入する  Spring Boot なら Starterライブラリを追加するだけ  ログイン・ログアウトだけじゃない！  クロスサイト・リクエストフォージェリ（CSRF）対策もデフォルトでサポート  しかも、Angular アプリ向けのモードありもちろん新規コースで取り扱います！ Security対策も楽々！

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. #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. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 33  レスポンスヘッダーの Cookie に XSRF-TOKEN という名前で CSRFトークンを発行する  デフォルトの発行先は HttpSession  Spring Security 4.1 からある実は、Angularの動作に合わせたもの CookieCsrfTokenRepositoryとは

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. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 35 正規のWebサイト ①購入ページをリクエスト ②CSRFトークンを発行し、レスポンスヘッダーのCookieに含める ③CookieからCSRFトークンを取得し、リクエストボディ(またはヘッダー)に含めて購入リクエストを送信 ④CookieのCSRFトークンとリクエストボディのCSRFトークンを比較し、同じであれば購入OKとする Cookieを利用したCSRF対策の動作概要

37. #jjug_ccc #ccc_e5 自己紹介：菊池真登 (C) CASAREAL, Inc. All rights reserved. 37  研修トレーナー＠カサレアル  登壇実績：Spring / Java SE  開発歴[Spring]：2012年から  開発歴[Angular]：2015年頃に 1.5年間AngularJSに触れて冬眠  今回新規コースのコンテンツ作成を任命される

40. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 40  画面は基本的に index.html だけで遷移はない  ボタンクリックなどで表示の切り替えができるが、 Angular が頑張ってそれっぽく見せている  必要なデータは XMLHttpRequest（XHR）でサーバから非同期で取得  構成要素が Spring MVCに近い少し砕けた紹介を

41. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 41 http://localhost:4200 http://localhost:4200/product/list 左側のリンクをクリックすると、この部分の表示するための「部品・Component」をAngularが切り替える実際の作業イメージとしては、この「部品・Component」単位で作成していく Angularの頑張り

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. #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. #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. #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. #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 のソースコード

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. #jjug_ccc #ccc_e5 (C) CASAREAL, Inc. All rights reserved. 54 正規のWebサイト ①購入ページをリクエスト ②CSRFトークンを発行し、レスポンスヘッダーのCookieに含める ③CookieからCSRFトークンを取得し、リクエストボディ(またはヘッダー)に含めて購入リクエストを送信 ④CookieのCSRFトークンとリクエストボディのCSRFトークンを比較し、同じであれば購入OKとするこの部分が自動化されます！ HttpClientはCSRF対策もばっちり

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. #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」とだけ記述。ポート番号の違いの考慮は不要

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. #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 ＊サーバサイドのディプロイ先は別途ご用意ください

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. #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 に非同期通信を行うように切り替える

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. #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ディレクトリに格納しても有効

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でのビルド時に前述のトランスパイルなどを組み込むことができる

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. #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 の順でパッケージングされ最終的にこの形になる

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

ssuser070fa9

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