O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Spring Boot × Vue.jsでSPAを作る

9.548 visualizações

Publicada em

従来のWebアプリケーションとSPAの違いに着目し、Spring Boot × Vue.jsでSPAを作る際のポイントやハマりどころを紹介します。

Publicada em: Tecnologia
  • Entre para ver os comentários

Spring Boot × Vue.jsでSPAを作る

  1. 1. 1Copyright © Acroquest Technology Co., Ltd. All rights reserved. Spring Boot × Vue.jsでSPAを作る 2019/04/25 Acroquest Technology Co., Ltd. 宮坂 豪
  2. 2. ⾃⼰紹介 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 2 n  所属 •  Acroquest Technology 株式会社 •  「働きがいのある会社」(GPTW)  3度⽬の1位受賞 n  業務領域 •  Webアプリケーション開発 •  開発マネジメント •  ダーツ(Acroquestダーツ部部⻑) 宮坂 豪 シニアソリューションアーキテクト
  3. 3. 今⽇のゴール Copyright © Acroquest Technology Co., Ltd. All rights reserved. 3 SpringBootでSPAを作るときの ⼤雑把なイメージが掴めた! …と皆さんがなること
  4. 4. ⽬次 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 4 1.  SPAとは?Vue.jsとは? 2.  作ったシステムの全体構成 3.  開発として⾏ったことの紹介 4.  SPAならではのハマりどころ 5.  まとめ
  5. 5. 1. SPAとは?Vue.jsとは? Copyright © Acroquest Technology Co., Ltd. All rights reserved. 5
  6. 6. SPAとは Copyright © Acroquest Technology Co., Ltd. All rights reserved. 6 •  シングルページアプリケーション(英: single-page application、 SPA)とは、単⼀のWebページのみから構成することで、デスク トップアプリケーションのようなユーザ体験を提供するWebアプ リケーションまたはWebサイトである。必要なコード(HTML、 JavaScript、CSS)は最初にまとめて読み込むか[1]、ユーザの操 作などに応じて動的にサーバと通信し、必要なものだけ読み込みを ⾏う。 ※出典: フリー百科事典『ウィキペディア(Wikipedia)』
  7. 7. 従来のWebアプリケーション Copyright © Acroquest Technology Co., Ltd. All rights reserved. 7 クライアント サーバ ②HTTPリクエスト ③HTMLを返却 ④画面更新 ①画面操作/状態更新
  8. 8. SPA Copyright © Acroquest Technology Co., Ltd. All rights reserved. 8 クライ アント サーバ ②APIへのAjaxリクエスト ③APIレスポンス ①画面操作/状態更新 JS ④JSで差分更新 ※WebSocketを  用いる場合もある
  9. 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. 10. 2. 作ったシステムの全体構成 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 10
  11. 11. 全体構成の概略図 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 11 クライ アント サーバ ②APIへのAjaxリクエスト ③APIレスポンス ①画面操作/状態更新 JS ④JSで差分更新 Spring Security MyBatis
  12. 12. 3. 開発として⾏ったことの紹介 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 12
  13. 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. 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. 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. 16. 2. Spring Bootに各APIの機能を実装 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 16 1.  従来のWebアプリケーションとの違い ① 画⾯遷移や画⾯表⽰のためのコントロールはサーバ側では持たない ② サーバサイドでHTMLを構築するようなこともない –  Thymeleafを使ってHTMLを構築したりもしない ③ APIサーバという⽴ち位置なので、クライアントとは疎結合な関係 –  サーバサイドを丸っと別のものに置き換えても、クライアントには影響しない作りにした クライアント サーバ ②HTTPリクエスト ③HTMLを返却 ④画面更新 ①画面操作/状態更新
  17. 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. 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. 19. 5. Vue.jsのビルド媒体をSpring Boot内に配置 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 19 1.  SPAの資産の配信⽅法の選択肢はどんな物があったか ※今回はオンプレミス前提 ①NginxやApacheで配信 ②Spring Bootで配信 静的ファイル 静的ファイル 今回は一定数の限られた ユーザのみが使うシステムであったため、 Spring Bootのみのシンプル構成にしてみた。
  20. 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. 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. 22. 4. SPAならではのハマりどころ Copyright © Acroquest Technology Co., Ltd. All rights reserved. 22
  23. 23. サーバ 1. ログイン処理の違いに⼾惑うかも Copyright © Acroquest Technology Co., Ltd. All rights reserved. 23 •  従来のWebアプリケーション ① ログインフォームをsubmit ② Spring Securityで認証 ③ リダイレクト後のHTMLを表⽰ ログイン画⾯ ①submit DB ②Spring Securityで認証 ログイン後の 画⾯ a. 認証失敗 b. 認証成功! ③リダイレクト
  24. 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. 25. 2. セッション切れてもログアウトされない? Copyright © Acroquest Technology Co., Ltd. All rights reserved. 25 n  問題提起 •  SPAだと認証トークンの有効期限が切れても、画⾯遷移できてしまう? ヘッダコンポーネント JS ーー メイン コンポーネント router /register ↓ 登録画⾯コンポーネント /login ↓ ログインコンポーネント <画面遷移のイメージ> ①/register ②コンポーネ ント選定 ③コンポーネント 入れ替え
  26. 26. ヘッダコンポーネント 2. セッション切れてもログアウトされない? Copyright © Acroquest Technology Co., Ltd. All rights reserved. 26 n  原因 •  サーバ通信なしで画⾯遷移(コンポーネントの差し替え)をしている •  なので、認証トークンの有効期限を確認していない JS ーー メイン コンポーネント router /register ↓ 登録画⾯コンポーネント /login ↓ ログインコンポーネント <画面遷移のイメージ> ①/register ②コンポーネ ント選定 ③コンポーネント 入れ替え
  27. 27. ヘッダコンポーネント 2. セッション切れてもログアウトされない? Copyright © Acroquest Technology Co., Ltd. All rights reserved. 27 n  改善後 •  遷移前にトークンが有効か、サーバにリクエストを送るようにした。 JS ーー メイン コンポーネント <画面遷移のイメージ> ①/register ③コンポーネント選定 (ログインコンポーネント を選択) ④コンポーネント 入れ替え サーバ ②トークンが 有効かチェック router /register ↓ 登録画⾯コンポーネント /login ↓ ログインコンポーネント
  28. 28. まとめ Copyright © Acroquest Technology Co., Ltd. All rights reserved. 28
  29. 29. 今⽇のゴール Copyright © Acroquest Technology Co., Ltd. All rights reserved. 29 SpringBootでSPAを作るときの ⼤雑把なイメージが掴めた! …と皆さんがなること
  30. 30. まとめ(ゴール確認) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 30 ü  従来のWebアプリケーションとSPAの違いが分かった ü  SPAのときのSpring Bootの役割が⼤雑把に分かった ü  SPAならではのハマりどころを聞いて、なるほど、と思った ü  Spring BootでSPAを作ることになったら、 このスライドを読み返そうと思った
  31. 31. Spring Bootで サクサク動くSPAを開発しよう! ご清聴ありがとうございました。 Evolve the Earth with Emotion of Technology Copyright © Acroquest Technology Co., Ltd. All rights reserved. 31

×