Submit Search
Upload
Spring Boot × Vue.jsでSPAを作る
•
23 likes
•
15,258 views
Go Miyasaka
Follow
従来のWebアプリケーションとSPAの違いに着目し、Spring Boot × Vue.jsでSPAを作る際のポイントやハマりどころを紹介します。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 31
Download now
Download to read offline
Recommended
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Masatoshi Tada
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
Spring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjug
Masatoshi Tada
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
Taku Miyakawa
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
Recommended
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Masatoshi Tada
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
Spring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjug
Masatoshi Tada
Javaのログ出力: 道具と考え方
Javaのログ出力: 道具と考え方
Taku Miyakawa
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
REST API のコツ
REST API のコツ
pospome
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
基礎からのOAuth 2.0とSpring Security 5.1による実装
基礎からのOAuth 2.0とSpring Security 5.1による実装
Masatoshi Tada
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
NTT DATA Technology & Innovation
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
Amazon Web Services Japan
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
なぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのか
Yusuke Suzuki
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
NTT DATA Technology & Innovation
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
例外設計における大罪
例外設計における大罪
Takuto Wada
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Y Watanabe
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
Spring Bootをはじめる時にやるべき10のこと
Spring Bootをはじめる時にやるべき10のこと
心 谷本
Enterprise agile dev ops-and-xr-techonology-adoption-for-fintech-20180324
Enterprise agile dev ops-and-xr-techonology-adoption-for-fintech-20180324
Shotaro Suzuki
Angularreflex20141210
Angularreflex20141210
Shinichiro Takezaki
More Related Content
What's hot
REST API のコツ
REST API のコツ
pospome
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
基礎からのOAuth 2.0とSpring Security 5.1による実装
基礎からのOAuth 2.0とSpring Security 5.1による実装
Masatoshi Tada
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
NTT DATA Technology & Innovation
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
Amazon Web Services Japan
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
なぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのか
Yusuke Suzuki
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
NTT DATA Technology & Innovation
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
例外設計における大罪
例外設計における大罪
Takuto Wada
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Y Watanabe
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
Spring Bootをはじめる時にやるべき10のこと
Spring Bootをはじめる時にやるべき10のこと
心 谷本
What's hot
(20)
REST API のコツ
REST API のコツ
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
基礎からのOAuth 2.0とSpring Security 5.1による実装
基礎からのOAuth 2.0とSpring Security 5.1による実装
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
なぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのか
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
例外設計における大罪
例外設計における大罪
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
Spring Bootをはじめる時にやるべき10のこと
Spring Bootをはじめる時にやるべき10のこと
Similar to Spring Boot × Vue.jsでSPAを作る
Enterprise agile dev ops-and-xr-techonology-adoption-for-fintech-20180324
Enterprise agile dev ops-and-xr-techonology-adoption-for-fintech-20180324
Shotaro Suzuki
Angularreflex20141210
Angularreflex20141210
Shinichiro Takezaki
BPStudy#101発表資料
BPStudy#101発表資料
Toyohisa Tanaka
インフラチームの歴史とこれから
インフラチームの歴史とこれから
bitbank, Inc. Tokyo, Japan
2018年度新入社員研修実績紹介
2018年度新入社員研修実績紹介
CASAREAL, Inc.
Karateによる UI Test Automation 革命
Karateによる UI Test Automation 革命
Takanori Suzuki
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
Issei Hiraoka
はやい!?うまい!?安い!?すべてのプラットフォームに届く「 PWA 」の魅力
はやい!?うまい!?安い!?すべてのプラットフォームに届く「 PWA 」の魅力
Ryu Shindo
Automation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
softlayerjp
Unityゲームにオンラインランキングとゴースト機能を追加しよう!
Unityゲームにオンラインランキングとゴースト機能を追加しよう!
史識 川原
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Akito Tsukahara
Jazug-8th: Azure AKS & FIWARE & Robot
Jazug-8th: Azure AKS & FIWARE & Robot
Nobuyuki Matsui
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
CData Software Japan
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
NTT Communications Technology Development
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
Rakuten Group, Inc.
Spring I/O 2015 報告
Spring I/O 2015 報告
Takuya Iwatsuka
Web Standards 2018
Web Standards 2018
Shogo Sensui
React vtecx20171025
React vtecx20171025
Shinichiro Takezaki
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
Takahiro Okumura
Dangerでpull requestレビューの指摘事項を減らす
Dangerでpull requestレビューの指摘事項を減らす
Shunsuke Maeda
Similar to Spring Boot × Vue.jsでSPAを作る
(20)
Enterprise agile dev ops-and-xr-techonology-adoption-for-fintech-20180324
Enterprise agile dev ops-and-xr-techonology-adoption-for-fintech-20180324
Angularreflex20141210
Angularreflex20141210
BPStudy#101発表資料
BPStudy#101発表資料
インフラチームの歴史とこれから
インフラチームの歴史とこれから
2018年度新入社員研修実績紹介
2018年度新入社員研修実績紹介
Karateによる UI Test Automation 革命
Karateによる UI Test Automation 革命
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
はやい!?うまい!?安い!?すべてのプラットフォームに届く「 PWA 」の魅力
はやい!?うまい!?安い!?すべてのプラットフォームに届く「 PWA 」の魅力
Automation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
Unityゲームにオンラインランキングとゴースト機能を追加しよう!
Unityゲームにオンラインランキングとゴースト機能を追加しよう!
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Jazug-8th: Azure AKS & FIWARE & Robot
Jazug-8th: Azure AKS & FIWARE & Robot
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
WebRTCで動かす“テレイグジスタンス”ロボット
WebRTCで動かす“テレイグジスタンス”ロボット
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
Spring I/O 2015 報告
Spring I/O 2015 報告
Web Standards 2018
Web Standards 2018
React vtecx20171025
React vtecx20171025
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
2015年GMOペパボ新卒エンジニア研修 Webオペレーション研修イントロダクション
Dangerでpull requestレビューの指摘事項を減らす
Dangerでpull requestレビューの指摘事項を減らす
Recently uploaded
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
furutsuka
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Recently uploaded
(7)
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
Spring Boot × Vue.jsでSPAを作る
1.
1Copyright © Acroquest
Technology Co., Ltd. All rights reserved. Spring Boot × Vue.jsでSPAを作る 2019/04/25 Acroquest Technology Co., Ltd. 宮坂 豪
2.
⾃⼰紹介 Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 2 n 所属 • Acroquest Technology 株式会社 • 「働きがいのある会社」(GPTW) 3度⽬の1位受賞 n 業務領域 • Webアプリケーション開発 • 開発マネジメント • ダーツ(Acroquestダーツ部部⻑) 宮坂 豪 シニアソリューションアーキテクト
3.
今⽇のゴール Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 3 SpringBootでSPAを作るときの ⼤雑把なイメージが掴めた! …と皆さんがなること
4.
⽬次 Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 4 1. SPAとは?Vue.jsとは? 2. 作ったシステムの全体構成 3. 開発として⾏ったことの紹介 4. SPAならではのハマりどころ 5. まとめ
5.
1. SPAとは?Vue.jsとは? Copyright ©
Acroquest Technology Co., Ltd. All rights reserved. 5
6.
SPAとは Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 6 • シングルページアプリケーション(英: single-page application、 SPA)とは、単⼀のWebページのみから構成することで、デスク トップアプリケーションのようなユーザ体験を提供するWebアプ リケーションまたはWebサイトである。必要なコード(HTML、 JavaScript、CSS)は最初にまとめて読み込むか[1]、ユーザの操 作などに応じて動的にサーバと通信し、必要なものだけ読み込みを ⾏う。 ※出典: フリー百科事典『ウィキペディア(Wikipedia)』
7.
従来のWebアプリケーション Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 7 クライアント サーバ ②HTTPリクエスト ③HTMLを返却 ④画面更新 ①画面操作/状態更新
8.
SPA Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 8 クライ アント サーバ ②APIへのAjaxリクエスト ③APIレスポンス ①画面操作/状態更新 JS ④JSで差分更新 ※WebSocketを 用いる場合もある
9.
Vue.jsとは Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 9 1. SPAを開発する上での代表的なフレームワークの⼀つ 2. SPAの3⼤フレームワークと⾔えば • Angular (提供: Google及びコミュニティ) • React (提供:Facebook及びコミュニティ) • Vue.js (提供:元GoogleのAngularJS開発メンバのEvan You⽒及びコミュニティ) 2018 JavaScript Rising Stars
10.
2. 作ったシステムの全体構成 Copyright ©
Acroquest Technology Co., Ltd. All rights reserved. 10
11.
全体構成の概略図 Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 11 クライ アント サーバ ②APIへのAjaxリクエスト ③APIレスポンス ①画面操作/状態更新 JS ④JSで差分更新 Spring Security MyBatis
12.
3. 開発として⾏ったことの紹介 Copyright ©
Acroquest Technology Co., Ltd. All rights reserved. 12
13.
やったことの流れ Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 13 1. Spring Bootプロジェクトの雛形作成 2. Spring Bootに各APIの機能を実装API実装 3. Spring Securityで認証周りを整備 4. Vue.jsで画⾯周りを実装 5. Vue.jsのビルド物をSpring Boot内に配置 6. Spring Bootだけでアプリ起動可能に
14.
1. Spring Bootプロジェクトの雛形作成 Copyright
© Acroquest Technology Co., Ltd. All rights reserved. 14 1. Spring Initializrで雛形を作成 2. 作ったプロジェクトのサマリ ① Gradle Project ② Java11 ③ Spring Boot2.1.4 ④ Spring Security ⑤ MyBatis Spring Boot プロジェクト Webページから サクッと作成
15.
2. Spring Bootに各APIの機能を実装 Copyright
© Acroquest Technology Co., Ltd. All rights reserved. 15 1. Spring BootはRESTサーバという⽴ち位置にした。 2. Controllerクラスに@RestControllerを付け、 RestでのAPI呼び出しを可能にする。 クライ アント サーバ APIへのAjaxリクエスト APIレスポンス JS ここの部分の実装の話
16.
2. Spring Bootに各APIの機能を実装 Copyright
© Acroquest Technology Co., Ltd. All rights reserved. 16 1. 従来のWebアプリケーションとの違い ① 画⾯遷移や画⾯表⽰のためのコントロールはサーバ側では持たない ② サーバサイドでHTMLを構築するようなこともない – Thymeleafを使ってHTMLを構築したりもしない ③ APIサーバという⽴ち位置なので、クライアントとは疎結合な関係 – サーバサイドを丸っと別のものに置き換えても、クライアントには影響しない作りにした クライアント サーバ ②HTTPリクエスト ③HTMLを返却 ④画面更新 ①画面操作/状態更新
17.
3. Spring Securityで認証周りを整備 Copyright
© Acroquest Technology Co., Ltd. All rights reserved. 17 1. Spring SecurityでAPI呼び出し時に認証トークンがないものは、 受け付けないようにした。 2. ログイン⽤APIだけは、認証トークンなしでもアクセス可能にした。 サーバ APIへのAjaxリクエスト /loginには認証を付けない APIへのAjaxリクエスト
18.
4. Vue.jsで画⾯周りを実装 Copyright ©
Acroquest Technology Co., Ltd. All rights reserved. 18 1. Vue.jsに持たせた役割 ① 画⾯表⽰/更新(vue) ② 画⾯遷移(router) ③ 画⾯操作に応じた REST APIの呼び出し(actions) ④ 画⾯表⽰を司る データの管理・更新 (state・mutations) 画⾯表⽰ (vue) state mutations APIへの Ajaxリクエスト APIレスポンス actions stateの変更で 画面表示が変わる router • 表示するコンポーネントを コントロール • URLに応じた表示コンポーネント のコントロールが可能
19.
5. Vue.jsのビルド媒体をSpring Boot内に配置 Copyright
© Acroquest Technology Co., Ltd. All rights reserved. 19 1. SPAの資産の配信⽅法の選択肢はどんな物があったか ※今回はオンプレミス前提 ①NginxやApacheで配信 ②Spring Bootで配信 静的ファイル 静的ファイル 今回は一定数の限られた ユーザのみが使うシステムであったため、 Spring Bootのみのシンプル構成にしてみた。
20.
5. Vue.jsのビルド媒体をSpring Boot内に配置 Copyright
© Acroquest Technology Co., Ltd. All rights reserved. 20 1. クライアントのビルド成果物(html,css,js)の出⼒先を Spring Bootプロジェクトのsrc/main/resources/staticに設定 2. Gradleビルドで1のビルド(npm run build)を実⾏するように設定 静的ファイルも内包したjarファイルが完成! jar
21.
6. Spring Bootだけでアプリ起動可能に Copyright
© Acroquest Technology Co., Ltd. All rights reserved. 21 1. ここまでくれば後は以下のコマンドで起動するだけ 2. ただし、静的ファイルへのアクセスを Spring Securityの認証対象外にしておく必要あり nohup java –jar xxx.jar & サーバ/login /js/**, /css/** その他
22.
4. SPAならではのハマりどころ Copyright ©
Acroquest Technology Co., Ltd. All rights reserved. 22
23.
サーバ 1. ログイン処理の違いに⼾惑うかも Copyright ©
Acroquest Technology Co., Ltd. All rights reserved. 23 • 従来のWebアプリケーション ① ログインフォームをsubmit ② Spring Securityで認証 ③ リダイレクト後のHTMLを表⽰ ログイン画⾯ ①submit DB ②Spring Securityで認証 ログイン後の 画⾯ a. 認証失敗 b. 認証成功! ③リダイレクト
24.
1. ログイン処理の違いに⼾惑うかも Copyright ©
Acroquest Technology Co., Ltd. All rights reserved. 24 • SPA ① ユーザ名、パスワードをログイン⽤APIにAjax通信で送る ② Spring Securityで認証 ③ クライアント側に認証結果を返却 ④ 認証結果がに応じて、JSでログイン後画⾯に切り替える ログイン 画⾯ ①ログイン用APIに Ajax通信 ③APIレスポンス JS サーバ DB ②Spring Securityで認証 ④認証が成功したら、JSで ログイン後の画面に切り替える
25.
2. セッション切れてもログアウトされない? Copyright ©
Acroquest Technology Co., Ltd. All rights reserved. 25 n 問題提起 • SPAだと認証トークンの有効期限が切れても、画⾯遷移できてしまう? ヘッダコンポーネント JS ーー メイン コンポーネント router /register ↓ 登録画⾯コンポーネント /login ↓ ログインコンポーネント <画面遷移のイメージ> ①/register ②コンポーネ ント選定 ③コンポーネント 入れ替え
26.
ヘッダコンポーネント 2. セッション切れてもログアウトされない? Copyright ©
Acroquest Technology Co., Ltd. All rights reserved. 26 n 原因 • サーバ通信なしで画⾯遷移(コンポーネントの差し替え)をしている • なので、認証トークンの有効期限を確認していない JS ーー メイン コンポーネント router /register ↓ 登録画⾯コンポーネント /login ↓ ログインコンポーネント <画面遷移のイメージ> ①/register ②コンポーネ ント選定 ③コンポーネント 入れ替え
27.
ヘッダコンポーネント 2. セッション切れてもログアウトされない? Copyright ©
Acroquest Technology Co., Ltd. All rights reserved. 27 n 改善後 • 遷移前にトークンが有効か、サーバにリクエストを送るようにした。 JS ーー メイン コンポーネント <画面遷移のイメージ> ①/register ③コンポーネント選定 (ログインコンポーネント を選択) ④コンポーネント 入れ替え サーバ ②トークンが 有効かチェック router /register ↓ 登録画⾯コンポーネント /login ↓ ログインコンポーネント
28.
まとめ Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 28
29.
今⽇のゴール Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 29 SpringBootでSPAを作るときの ⼤雑把なイメージが掴めた! …と皆さんがなること
30.
まとめ(ゴール確認) Copyright © Acroquest
Technology Co., Ltd. All rights reserved. 30 ü 従来のWebアプリケーションとSPAの違いが分かった ü SPAのときのSpring Bootの役割が⼤雑把に分かった ü SPAならではのハマりどころを聞いて、なるほど、と思った ü Spring BootでSPAを作ることになったら、 このスライドを読み返そうと思った
31.
Spring Bootで サクサク動くSPAを開発しよう! ご清聴ありがとうございました。 Evolve the Earth with Emotion of Technology Copyright ©
Acroquest Technology Co., Ltd. All rights reserved. 31
Download now