Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Spring Boot × Vue.jsでSPAを作る

8 083 vues

Publié le

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

Publié dans : Technologie
  • I have always found it hard to meet the requirements of being a student. Ever since my years of high school, I really have no idea what professors are looking for to give good grades. After some google searching, I found this service ⇒ www.HelpWriting.net ⇐ who helped me write my research paper.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://redirect.is/fyxsb0u } ......................................................................................................................... Download Full EPUB Ebook here { https://redirect.is/fyxsb0u } ......................................................................................................................... Download Full doc Ebook here { https://redirect.is/fyxsb0u } ......................................................................................................................... Download PDF EBOOK here { https://redirect.is/fyxsb0u } ......................................................................................................................... Download EPUB Ebook here { https://redirect.is/fyxsb0u } ......................................................................................................................... Download doc Ebook here { https://redirect.is/fyxsb0u } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • とても参考になりました。ちなみに、ソースコードは公開していませんか?
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×