Jjug ccc 2019 fall の資料になります。

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. #jjug_ccc #ccc_e5
大切なことなので
(C) CASAREAL, Inc. All rights reserved. 2
100%
宣伝です
80%

3. #jjug_ccc #ccc_e5
このセッションは
(C) CASAREAL, Inc. All rights reserved. 3
株式会社カサレアルは Angular と Spring Boot による
SPA開発の研修を提供します！
このセッションは
 Spring Boot と Angular の概要
 組み合わせた時の開発のイメージ
をお伝えし、SPA開発へ誘う45分間です。

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. #jjug_ccc #ccc_e5
株式会社カサレアル
(C) CASAREAL, Inc. All rights reserved. 5
他社にはない色々なプログラミング言語の
研修を提供しています！

6. #jjug_ccc #ccc_e5
目次
(C) CASAREAL, Inc. All rights reserved. 6
1.新しいコースを作ることになった背景
2.Spring Bootによるサーバサイド開発
3.Angularによるクライアント開発
4.どう組み合わせるの？

7. #jjug_ccc #ccc_e5
目次
(C) CASAREAL, Inc. All rights reserved. 7
1.新しいコースを作ることになった背景
2.Spring Bootによるサーバサイド開発
3.Angularによるクライアント開発
4.どう組み合わせるの？

8. #jjug_ccc #ccc_e5
新しいコースを作ることになった背景
(C) CASAREAL, Inc. All rights reserved. 8
 引き合いが多数！
特に Angular のコースをご受講のお客様から
「Spring Boot との組み合わせ方が知りたい」
という声が！

9. #jjug_ccc #ccc_e5
それぞれ独立したコースを提供しています
(C) CASAREAL, Inc. All rights reserved. 9
 Angular入門（3日間）
 Angular 単体のコース
 基礎からのSpring Boot（2日間）
 Spring Boot 単体のコース
たくさんの方にご受講いただいております！

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. #jjug_ccc #ccc_e5
両コースとも実績がある！
引き合いも多い！
組み合わせて提供することが
私たちの使命！
(C) CASAREAL, Inc. All rights reserved. 11

12. #jjug_ccc #ccc_e5
ワークショップとして提供！
(C) CASAREAL, Inc. All rights reserved. 12
実際にアプリを作る研修
クライアント、サーバの両サイドが一通り実装
できるようになることが目標の研修
認証やページネーションも扱う予定
本格的なアプリケーションの実装方法を学ぶ
チャンス！
選べる二つのコース体系！

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. #jjug_ccc #ccc_e5
定期オープンコース（３日間）
(C) CASAREAL, Inc. All rights reserved. 14
 Angular入門（3日間）
 基礎からのSpring Boot（2日間）
を、ご受講いただいた方を対象に、
AngularとSpring BootによるSPA開発
を体験いただく３日間のオープンコースです。

15. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 15
準備中…

16. #jjug_ccc #ccc_e5
ご興味ありますか？
(C) CASAREAL, Inc. All rights reserved. 16
ふるってご参加ください！

17. #jjug_ccc #ccc_e5
目次
(C) CASAREAL, Inc. All rights reserved. 17
1.新しいコースを作ることになった背景
2.Spring Bootによるサーバサイド開発
3.Angularによるクライアント開発
4.どう組み合わせるの？

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

19. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 19
業務固有の処理を実装するのは相変わらず
開発効率が上がるわけではない
三つの層を地道に実装していく
ただし

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. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 21
作成例 - 1

22. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 22
作成例 - 2

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

25. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 25
デフォルトでは jar ファイルが出来上がる
必要となるライブラリが内包される
実行するだけで 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サーバとしての機能も充実

29. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 29
http://localhost:8080
にアクセスすると返却される
http://localhost:8080/js/index.js
とリクエストすると返却される
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対策の動作概要

36. #jjug_ccc #ccc_e5
目次
(C) CASAREAL, Inc. All rights reserved. 36
1.新しいコースを作ることになった背景
2.Spring Bootによるサーバサイド開発
3.Angularによるクライアント開発
4.どう組み合わせるの？

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

38. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 38
 Google製のフレームワーク
 JavaScript上で動作するWebアプリケーション用
 フルスタック
 TypeScript推奨
Angularとは

39. #jjug_ccc #ccc_e5
って、ネット検索で見つけられる情報なんて、
いらないですよね。。。
(C) CASAREAL, Inc. All rights reserved. 39

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の頑張り

42. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 42
Template
<html>
Component
Injector
Service
データ
入力値
XHR
Angularを構成するもの

43. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 43
サーバサイド三層アーキテクチャー

44. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 44
サーバサイドJavaエンジニアであれば、実はとっつきやすいかも！
（注意：個人的な主観）
Template
<html>
Component
Injector
Service
データ
入力値
XHR
構成要素がSpring MVCに近い

45. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 45
 だからこそのTypeScript！
 クラスベースのオブジェクト指向
 静的な型の指定
JavaScriptって、型なしじゃ？

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

51. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 51
IDEの手厚い補完機能が受けられるので、
Java開発者にとってはありがたい
トランスパイル！
（変換！）
Webブラウザで動かすには

52. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 52
 HttpClient が高度に抽象化！
 Angular に標準で備わっている
 GET、POST など直感的でわかりやすい
 ジェネリクスによって戻り値の型をある程度は
精査できる
XHRって、しんどくない？

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対策もばっちり

55. #jjug_ccc #ccc_e5
(C) CASAREAL, Inc. All rights reserved. 55
 X-XSRF-TOKENヘッダーにトークンを含めて送信
HttpClient はこれをリクエスト時に自動的に 行う
フレームワークに乗っかるだけで
お手軽にセキュアなアプリが作れる！
HttpClientはCSRF対策もばっちり

56. #jjug_ccc #ccc_e5
目次
(C) CASAREAL, Inc. All rights reserved. 56
1.新しいコースを作ることになった背景
2.Spring Bootによるサーバサイド開発
3.Angularによるクライアント開発
4.どう組み合わせるの？

57. #jjug_ccc #ccc_e5
プロジェクトの構成
(C) CASAREAL, Inc. All rights reserved. 57
 クライアントサイド・サーバサイドは別プロジェクト
にする
 分業がしやすい
 マイクロサービスへの足掛かりにしやすい
 （無いとは思うが）クライアントもしくは
サーバサイドの載せ替えがしやすい

58. #jjug_ccc #ccc_e5
全体のイメージ
(C) CASAREAL, Inc. All rights reserved. 58
親プロジェクト
Angular
プロジェクト
Spring Boot
プロジェクト
MavenやGradleの
マルチプロジェクト機能で
サブプロジェクトとして作成

59. #jjug_ccc #ccc_e5
どう組み合わせるの？ - 開発時
(C) CASAREAL, Inc. All rights reserved. 59
 Spring Bootは通常起動でポート8080で動作
 Angularは検証用サーバでポート4200で動作
 任意のURLにリクエストを転送する機能をもつ
 サーバのAPIとの通信はポート8080に転送する

60. #jjug_ccc #ccc_e5
Angular CLIのng serve
(C) CASAREAL, Inc. All rights reserved. 60
Angular CLI
開発をサポートするコマンドライン
ng serve
Angular CLI に含まれる検証サーバ機能
ファイルの編集を検知し即時反映される
サーバ再起動が必要ないため開発効率が向上

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

64. #jjug_ccc #ccc_e5
どう組み合わせるの？ - パッケージング
(C) CASAREAL, Inc. All rights reserved. 64
 今回は１つの成果物で動くようする
Webブラウザ サーバ
APIだけでなく
静的コンテンツも
返却

65. #jjug_ccc #ccc_e5
基本方針
(C) CASAREAL, Inc. All rights reserved. 65
 トップページアクセスで index.html を返却
 関連する JavaScript もダウンロード可能
 Spring Boot の static locations
 Spring Boot の Welcome Page
の機能を使う

66. #jjug_ccc #ccc_e5
なぜSpring BootのWebサーバ機能？
(C) CASAREAL, Inc. All rights reserved. 66
 Cross-Origin Resource Sharing の考慮が不要
 最終成果物を1つにできるのでディプロイが楽
 静的コンテンツのダウンロードは初回アクセスの
時だけなので Webサーバとしての負荷は高くない

67. #jjug_ccc #ccc_e5
別々にホスティングするケースもご紹介
(C) CASAREAL, Inc. All rights reserved. 67

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

70. #jjug_ccc #ccc_e5
Same Origin Policy
(C) CASAREAL, Inc. All rights reserved. 70
異なるドメインへの通信は
許可されない

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

73. #jjug_ccc #ccc_e5
環境設定ファイル
(C) CASAREAL, Inc. All rights reserved. 73
 Angular は環境ごとの設定値を定義できる
 開発用のAPIのURL
 本番用のAPIのURL
等を設定する
 ビルドのコマンドのオプションで環境を指定する

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. #jjug_ccc #ccc_e5
最終的に以下の形を目指す
(C) CASAREAL, Inc. All rights reserved. 75
Spring Boot アプリの jar ：最終成果物
Angular アプリの jar
BOOT-INF
lib
META-INF
resources

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

78. #jjug_ccc #ccc_e5
やること
(C) CASAREAL, Inc. All rights reserved. 78
 Angularアプリの成果物をjarにまとめる
 Spring Bootアプリの依存性に追加する

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. #jjug_ccc #ccc_e5
Angularアプリの成果物をjarにまとめる
(C) CASAREAL, Inc. All rights reserved. 80
Mavenのリソースフォルダ
にAngularアプリの成果物
の出力先フォルダを追加
することで、自動的にjar
の中に取り込まれる

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

83. #jjug_ccc #ccc_e5
ソースコードを公開しています
(C) CASAREAL, Inc. All rights reserved. 83
https://github.com/Masato1986/angular-spring-parent
 紹介しきれなかった細かな設定は参照願います。
 環境構築手順も書いています。

84. #jjug_ccc #ccc_e5
まとめ
(C) CASAREAL, Inc. All rights reserved. 84
 Angular と Spring Boot は相性抜群
 サービスやDIなどの構成要素が似ている
 CSRF対策もばっちり
SPA開発の最初の一歩として、
ぜひ弊社研修をご利用ください！