Spring Boot × Vue.jsでSPAを作る

1Copyright © Acroquest Technology Co., Ltd. All rights reserved.
Spring Boot × Vue.jsでSPAを作る
2019/04/25
Acroquest Technology Co., Ltd.
宮坂豪

⾃⼰紹介
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
2
n  所属
•  Acroquest Technology 株式会社
•  「働きがいのある会社」(GPTW)
3度⽬の1位受賞
n  業務領域
•  Webアプリケーション開発
•  開発マネジメント
•  ダーツ（Acroquestダーツ部部⻑）
宮坂豪
シニアソリューションアーキテクト

今⽇のゴール
3
SpringBootでSPAを作るときの
⼤雑把なイメージが掴めた！
…と皆さんがなること

⽬次
4
1.  SPAとは？Vue.jsとは？
2.  作ったシステムの全体構成
3.  開発として⾏ったことの紹介
4.  SPAならではのハマりどころ
5.  まとめ

1. SPAとは？Vue.jsとは？
5

SPAとは
6
•  シングルページアプリケーション（英: single-page application、
SPA）とは、単⼀のWebページのみから構成することで、デスク
トップアプリケーションのようなユーザ体験を提供するWebアプ
リケーションまたはWebサイトである。必要なコード（HTML、
JavaScript、CSS）は最初にまとめて読み込むか[1]、ユーザの操
作などに応じて動的にサーバと通信し、必要なものだけ読み込みを
⾏う。
※出典: フリー百科事典『ウィキペディア（Wikipedia）』

従来のWebアプリケーション
7
クライアントサーバ
②HTTPリクエスト
③HTMLを返却
④画面更新
①画面操作/状態更新

SPA
8
クライ
アント
サーバ
②APIへのAjaxリクエスト
③APIレスポンス
JS
④JSで差分更新
※WebSocketを
　用いる場合もある

Vue.jsとは
9
1.  SPAを開発する上での代表的なフレームワークの⼀つ
2.  SPAの３⼤フレームワークと⾔えば
•  Angular (提供: Google及びコミュニティ)
•  React (提供：Facebook及びコミュニティ)
•  Vue.js (提供：元GoogleのAngularJS開発メンバのEvan You⽒及びコミュニティ)
2018 JavaScript Rising Stars

2. 作ったシステムの全体構成
10

全体構成の概略図
11
クライ
アント
サーバ
②APIへのAjaxリクエスト
JS
④JSで差分更新
Spring Security MyBatis

3. 開発として⾏ったことの紹介
12

やったことの流れ
13
1.  Spring Bootプロジェクトの雛形作成
2.  Spring Bootに各APIの機能を実装API実装
3.  Spring Securityで認証周りを整備
4.  Vue.jsで画⾯周りを実装
5.  Vue.jsのビルド物をSpring Boot内に配置
6.  Spring Bootだけでアプリ起動可能に

1. Spring Bootプロジェクトの雛形作成
14
1.  Spring Initializrで雛形を作成
2.  作ったプロジェクトのサマリ
① Gradle Project
② Java11
③ Spring Boot2.1.4
④ Spring Security
⑤ MyBatis
Spring Boot
プロジェクト
Webページから
サクッと作成

2. Spring Bootに各APIの機能を実装
15
1.  Spring BootはRESTサーバという⽴ち位置にした。
2.  Controllerクラスに@RestControllerを付け、
RestでのAPI呼び出しを可能にする。
クライ
アント
サーバ
APIへのAjaxリクエスト
APIレスポンス
JS
ここの部分の実装の話

2. Spring Bootに各APIの機能を実装
16
1.  従来のWebアプリケーションとの違い
① 画⾯遷移や画⾯表⽰のためのコントロールはサーバ側では持たない
② サーバサイドでHTMLを構築するようなこともない
–  Thymeleafを使ってHTMLを構築したりもしない
③ APIサーバという⽴ち位置なので、クライアントとは疎結合な関係
–  サーバサイドを丸っと別のものに置き換えても、クライアントには影響しない作りにした
クライアントサーバ
②HTTPリクエスト
③HTMLを返却
④画面更新

3. Spring Securityで認証周りを整備
17
1.  Spring SecurityでAPI呼び出し時に認証トークンがないものは、
受け付けないようにした。
2.  ログイン⽤APIだけは、認証トークンなしでもアクセス可能にした。
サーバ
/loginには認証を付けない

4. Vue.jsで画⾯周りを実装
18
1.  Vue.jsに持たせた役割
① 画⾯表⽰/更新(vue)
② 画⾯遷移(router)
③ 画⾯操作に応じた
REST APIの呼び出し(actions)
④ 画⾯表⽰を司る
データの管理・更新
(state・mutations)
画⾯表⽰
(vue)
state
mutations APIへの
Ajaxリクエスト
APIレスポンス
actions
stateの変更で
画面表示が変わる
router
•  表示するコンポーネントを
コントロール
•  URLに応じた表示コンポーネント
のコントロールが可能

5. Vue.jsのビルド媒体をSpring Boot内に配置
19
1.  SPAの資産の配信⽅法の選択肢はどんな物があったか
※今回はオンプレミス前提
①NginxやApacheで配信 ②Spring Bootで配信
静的ファイル
静的ファイル
今回は一定数の限られた
ユーザのみが使うシステムであったため、
Spring Bootのみのシンプル構成にしてみた。

5. Vue.jsのビルド媒体をSpring Boot内に配置
20
1.  クライアントのビルド成果物(html,css,js)の出⼒先を
Spring Bootプロジェクトのsrc/main/resources/staticに設定
2.  Gradleビルドで1のビルド(npm run build)を実⾏するように設定
静的ファイルも内包したjarファイルが完成！
jar

6. Spring Bootだけでアプリ起動可能に
21
1.  ここまでくれば後は以下のコマンドで起動するだけ
2.  ただし、静的ファイルへのアクセスを
Spring Securityの認証対象外にしておく必要あり
nohup java –jar xxx.jar &
サーバ/login
/js/**, /css/**
その他

4. SPAならではのハマりどころ
22

サーバ
1. ログイン処理の違いに⼾惑うかも
23
•  従来のWebアプリケーション
① ログインフォームをsubmit
② Spring Securityで認証
③ リダイレクト後のHTMLを表⽰
ログイン画⾯
①submit
DB
②Spring Securityで認証
ログイン後の
画⾯
a. 認証失敗
b. 認証成功!
③リダイレクト

1. ログイン処理の違いに⼾惑うかも
24
•  SPA
① ユーザ名、パスワードをログイン⽤APIにAjax通信で送る
② Spring Securityで認証
③ クライアント側に認証結果を返却
④ 認証結果がに応じて、JSでログイン後画⾯に切り替える
ログイン
画⾯
①ログイン用APIに
Ajax通信
JS
サーバ
DB
②Spring Securityで認証
④認証が成功したら、JSで
ログイン後の画面に切り替える

2. セッション切れてもログアウトされない？
25
n  問題提起
•  SPAだと認証トークンの有効期限が切れても、画⾯遷移できてしまう？
ヘッダコンポーネント JS
ーー
メイン
コンポーネント
router
/register
↓
登録画⾯コンポーネント
/login
↓
ログインコンポーネント
＜画面遷移のイメージ＞
①/register
②コンポーネ
ント選定
③コンポーネント
入れ替え

ヘッダコンポーネント
26
n  原因
•  サーバ通信なしで画⾯遷移(コンポーネントの差し替え)をしている
•  なので、認証トークンの有効期限を確認していない
JS
ーー
メイン
router
/register
↓
/login
↓
①/register
②コンポーネ
ント選定
③コンポーネント
入れ替え

ヘッダコンポーネント
27
n  改善後
•  遷移前にトークンが有効か、サーバにリクエストを送るようにした。
JS
ーー
メイン
①/register
③コンポーネント選定
（ログインコンポーネント
を選択）
④コンポーネント
入れ替え
サーバ
②トークンが
有効かチェック
router
/register
↓
/login
↓

まとめ
28

今⽇のゴール
29
SpringBootでSPAを作るときの
⼤雑把なイメージが掴めた！
…と皆さんがなること

まとめ（ゴール確認）
30
ü  従来のWebアプリケーションとSPAの違いが分かった
ü  SPAのときのSpring Bootの役割が⼤雑把に分かった
ü  SPAならではのハマりどころを聞いて、なるほど、と思った
ü  Spring BootでSPAを作ることになったら、
このスライドを読み返そうと思った

Spring Bootで
サクサク動くSPAを開発しよう！
ご清聴ありがとうございました。
Evolve the Earth with Emotion of Technology
31

Spring Boot × Vue.jsでSPAを作る

More Related Content

What's hot

Similar to Spring Boot × Vue.jsでSPAを作る

Recently uploaded

Spring Boot × Vue.jsでSPAを作る