Enviar pesquisa
Carregar
Spring Boot × Vue.jsでSPAを作る
•
23 gostaram
•
15,302 visualizações
Go Miyasaka
Seguir
従来のWebアプリケーションとSPAの違いに着目し、Spring Boot × Vue.jsでSPAを作る際のポイントやハマりどころを紹介します。
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 31
Baixar agora
Baixar para ler offline
Recomendados
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
The Twelve-Factor Appで考えるAWSのサービス開発
The Twelve-Factor Appで考えるAWSのサービス開発
Amazon Web Services Japan
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
Shingo Fukui
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
そんなトランザクションマネージャで大丈夫か?
そんなトランザクションマネージャで大丈夫か?
takezoe
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
例外設計における大罪
例外設計における大罪
Takuto Wada
Recomendados
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
The Twelve-Factor Appで考えるAWSのサービス開発
The Twelve-Factor Appで考えるAWSのサービス開発
Amazon Web Services Japan
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
Shingo Fukui
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
そんなトランザクションマネージャで大丈夫か?
そんなトランザクションマネージャで大丈夫か?
takezoe
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
例外設計における大罪
例外設計における大罪
Takuto Wada
3分でわかるAzureでのService Principal
3分でわかるAzureでのService Principal
Toru Makabe
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Y Watanabe
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
超実践 Cloud Spanner 設計講座
超実践 Cloud Spanner 設計講座
Samir Hammoudi
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
KeycloakでAPI認可に入門する
KeycloakでAPI認可に入門する
Hitachi, Ltd. OSS Solution Center.
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
Atsushi Nakada
Serverless時代のJavaについて
Serverless時代のJavaについて
Amazon Web Services Japan
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
9/14にリリースされたばかりの新LTS版Java 17、ここ3年間のJavaの変化を知ろう!(Open Source Conference 2021 O...
9/14にリリースされたばかりの新LTS版Java 17、ここ3年間のJavaの変化を知ろう!(Open Source Conference 2021 O...
NTT DATA Technology & Innovation
ストリーム処理を支えるキューイングシステムの選び方
ストリーム処理を支えるキューイングシステムの選び方
Yoshiyasu SAEKI
TLS, HTTP/2演習
TLS, HTTP/2演習
shigeki_ohtsu
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
Tetsutaro Watanabe
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
NTT DATA Technology & Innovation
Spring と TDD
Spring と TDD
Takeshi Ogawa
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
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
Mais conteúdo relacionado
Mais procurados
3分でわかるAzureでのService Principal
3分でわかるAzureでのService Principal
Toru Makabe
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Y Watanabe
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
超実践 Cloud Spanner 設計講座
超実践 Cloud Spanner 設計講座
Samir Hammoudi
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
KeycloakでAPI認可に入門する
KeycloakでAPI認可に入門する
Hitachi, Ltd. OSS Solution Center.
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
Atsushi Nakada
Serverless時代のJavaについて
Serverless時代のJavaについて
Amazon Web Services Japan
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
9/14にリリースされたばかりの新LTS版Java 17、ここ3年間のJavaの変化を知ろう!(Open Source Conference 2021 O...
9/14にリリースされたばかりの新LTS版Java 17、ここ3年間のJavaの変化を知ろう!(Open Source Conference 2021 O...
NTT DATA Technology & Innovation
ストリーム処理を支えるキューイングシステムの選び方
ストリーム処理を支えるキューイングシステムの選び方
Yoshiyasu SAEKI
TLS, HTTP/2演習
TLS, HTTP/2演習
shigeki_ohtsu
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
Tetsutaro Watanabe
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
NTT DATA Technology & Innovation
Spring と TDD
Spring と TDD
Takeshi Ogawa
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
Mais procurados
(20)
3分でわかるAzureでのService Principal
3分でわかるAzureでのService Principal
Redisの特徴と活用方法について
Redisの特徴と活用方法について
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
超実践 Cloud Spanner 設計講座
超実践 Cloud Spanner 設計講座
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
KeycloakでAPI認可に入門する
KeycloakでAPI認可に入門する
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
Serverless時代のJavaについて
Serverless時代のJavaについて
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
9/14にリリースされたばかりの新LTS版Java 17、ここ3年間のJavaの変化を知ろう!(Open Source Conference 2021 O...
9/14にリリースされたばかりの新LTS版Java 17、ここ3年間のJavaの変化を知ろう!(Open Source Conference 2021 O...
ストリーム処理を支えるキューイングシステムの選び方
ストリーム処理を支えるキューイングシステムの選び方
TLS, HTTP/2演習
TLS, HTTP/2演習
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
え、まって。その並列分散処理、Kafkaのしくみでもできるの? Apache Kafkaの機能を利用した大規模ストリームデータの並列分散処理
Spring と TDD
Spring と TDD
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Semelhante a 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
Semelhante a 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レビューの指摘事項を減らす
Último
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
Último
(8)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
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
Baixar agora