Laravelで運用しているサービスを Nuxt.jsにリプレイスする

PHP Conference 2020 Track4

Transcript

1. Copyright © M&A Cloud All rights reserved. Laravelで運用しているサービスを Nuxt.jsにリプレイスする PHP Conference 2020/Track 4 Kenjiro Kubota
2. Copyright © M&A Cloud All rights reserved. Profile 2 久保田 賢二朗 kubotak-is kubotak_public kenjiro.kubota 株式会社M&Aクラウド JavaScript Go PHP https://kubotak.page
3. Copyright © M&A Cloud All rights reserved. PR
4. Copyright © M&A Cloud All rights reserved. 買い手
 ・案件報酬はM&A成功報酬のみ ・最低手数料なし ・売り手ソーシングのチャネルが増える ・M&Aニーズを発信するだけで売り手を集客 ・仲介業者を介さずにダイレクトにやり取り可能 ・潜在層にもリーチが可能 手数料無料 ※プラットフォーム案件の場合 
 ※
 売り手 1.掲載する ・買い手のM&Aニーズを自ら調べることが可能 ・仲介業者を介さずにダイレクトにやり取り可能 ・買い手のM&A担当者に直接コンタクトをとれる ・仲介業者を使わないので手数料が無料 2.オファーする M&A・出資ニーズを掲載 買い手のメリット 売り手のメリット ・仲介業者を使わないので手数料が無料 
 求人広告サイトのようなM&Aダイレクトマッチング 〇〇領域の会社を 募集します この会社と一緒に やっていきたい！ 4 PR
5. Copyright © M&A Cloud All rights reserved. 注意事項 注意事項 • すべてをリプレイスした、という話ではないです。 ◦ 現在進行系です。 • また、一部は意図して移行しません。これは後ほど説明します。 • どちらのフレームワークが優れているかという話ではありませ ん。
6. Copyright © M&A Cloud All rights reserved. 移行経緯
7. Copyright © M&A Cloud All rights reserved. 既存のアプリケーション 既存のアプリケーション • 2018年から開発が開始したLaravelによるモノリシックアプリ ケーション • フロントエンドはBlade + Vue.js + PureJS(VanillaJS) / jQuery ◦ Laravel標準のバリデーションやセッションフラッシュなど によるバリデーションエラー表示
8. Copyright © M&A Cloud All rights reserved. アプリケーションやビジネスの拡大に伴う要求の変化 アプリケーションやビジネスの拡大に伴う 要求の変化 • UIをインタラクティブに変化させたい ◦ 画面側に状態を持つ必要がある
9. Copyright © M&A Cloud All rights reserved. 既存アプリケーションでのVue.js 既存アプリケーションでのVue.js • Vuex（ステート管理ライブラリ）は使っていない ◦ 親子コンポーネント間でprops/emitでバケツリレー • 一部Vue.js v2.6から追加されたVueObservable APIを利用して共 有ストアを作って状態管理などを行った • 画面の初期データをBladeとVue.jsでの共有が辛い ◦ スクリプトタグにJsonを出力するなどしてハイドレーション したりdata属性に出力
10. Copyright © M&A Cloud All rights reserved. Child.vue
11. Copyright © M&A Cloud All rights reserved. Parent.vue
12. Copyright © M&A Cloud All rights reserved.
13. Copyright © M&A Cloud All rights reserved. 複雑なUIの状態と戦う 複雑なUIの状態と戦う • UIの管理が複雑化してきた • 共通化できてないコンポーネント ◦ 都度生み出される類似のボタンなど • 既存仕様のまま戦うか、やり方を変えるか、
14. Copyright © M&A Cloud All rights reserved. UIを切り離す UIを切り離す • Laravelで開発する場合、基本的にはBlade + JavaScript • コンポーネントを共通化したいが、BladeとJavaScriptでの二重 管理になる可能性がある ◦ LaravelからUIを完全に分離する
15. Copyright © M&A Cloud All rights reserved. フロントエンドをNuxt.jsに置き換える
16. Copyright © M&A Cloud All rights reserved. Nuxt.jsの選定 Nuxt.jsの選定 • メンバー全員がVue.jsの経験あり ◦ コンポーネントのライフサイクルにある程度の知見があった • 個人的に何度か利用したことがあったので開発の初速が見込めた • Next.js(React)でも良かったがVue.jsベースなので他メンバーの 学習コストも下げられて説得しやすかった ◦ TypeScriptやCompositionAPIを導入したので学習コストは 若干あった
17. Copyright © M&A Cloud All rights reserved. Nuxt.jsとは Nuxt.jsとは Nuxt.jsはVue.jsを利用してユニバーサルアプリケーションを作成でき るオープンソースフレームワークです。 サーバーサイドレンダリング・静的ファイル生成・シングルページア プリケーションをサポートしています。 Vue.jsのプラグインであるVuexやVue Router、Vue Metaなどを内包 し、フルスタックなアプリケーション作成をサポート
18. Copyright © M&A Cloud All rights reserved. ユニバーサルモード ユニバーサルモード Nuxt.jsにはユニバーサルモードと呼ばれるアプリケーション状態があ ります。 これはHTTPリクエスト時の初期状態をSSRで表示し、以降のページ遷 移をSPA(CSR)として振る舞うハイブリッドで動作するアプリケーショ ンです。 SPAの課題であるSEOに対しても有効な手段です。
19. Copyright © M&A Cloud All rights reserved. フロントエンドとバックエンド フロントエンドとバックエンド • フロントエンドにNuxt.jsを採用 • バックエンドをそのままLaravlを使う ◦ HTTP APIとして動作 ◦ すでに存在するドメインオブジェクトは流用活用
20. Copyright © M&A Cloud All rights reserved. Open API（Swagger） Open API（Swagger） • HTTP APIの定義はOpen APIを利用 L5-Swagger(swagger-php)を利用してController（弊社ではADRを採 用しているのでActionとResponder）にアノテーションを記述するこ とで定義書を管理 link: https://github.com/DarkaOnLine/L5-Swagger
21. Copyright © M&A Cloud All rights reserved.
22. Copyright © M&A Cloud All rights reserved. ADR（Action-Domain-Responder） ADR（Action-Domain-Responder） Paul M. Jones氏が提唱するMVC(Model-View-Controller)の改良型 アーキテクチャ （ざっくり） Model => Domain View => Responder Controller => Action link: https://en.wikipedia.org/wiki/Action–domain–responder
23. Copyright © M&A Cloud All rights reserved. ADRとOpen API ADRとOpen API ADRの最大の特徴は1つのエンドポイントに1つのAction(Class)にな ることが挙げられる。 この特徴を利用することで、Open APIのアノテーションをActionと そのActionが返却するResponderに集約されることで見通しよく記述 できる。
24. Copyright © M&A Cloud All rights reserved. Action
25. Copyright © M&A Cloud All rights reserved. Responder
26. Copyright © M&A Cloud All rights reserved. Responder
27. Copyright © M&A Cloud All rights reserved. Open APIのアノテーションが辛い Open APIのアノテーションが辛い • 最初の導入こそ大変だが、利用する定義はどのエンドポイントも似 てくるので徐々に記述効率は良くなっている。 • GitHub上でレビューする際にアノテーションで型のレビューなどが しやすい。 • openapi-validatorを利用してAPI実装と定義が一致しているかをテ ストすることもでき、実装と定義書の乖離を防ぐことに役立った。 link: https://tech.macloud.jp/entry/2020/05/22/151820
28. Copyright © M&A Cloud All rights reserved. Nuxt.jsの実行環境
29. Copyright © M&A Cloud All rights reserved. AWS Lambda AWS Lambda AWS Lambdaはサーバーのプロビジョニングや管理の必要なしに、 コードが実行できる環境です。 Nuxt.jsのアプリケーションはこのAWS Lambda上で動作させます。 デプロイにはServerless Frameworkを利用して、静的ファイルやクラ イアントで実行されるJavaScriptファイルはS3に配置します。
30. Copyright © M&A Cloud All rights reserved. Serverless Framework Serverless Framework サーバーレスアプリケーションの構成管理やデプロイを行うツール プラグインが豊富でいろんなユースケースをカバーできる • serverless-plugin-warmup ◦ コールドスタート対策 • serverless-prune-plugin ◦ 古いバージョンを削除 • serverless-cloudfront-invalidate ◦ デプロイ後にCloudfrontのキャッシュを削除
31. Copyright © M&A Cloud All rights reserved.
32. Copyright © M&A Cloud All rights reserved. • すべてのページを一括でNuxt.jsに移行するのは工数的に困難 • 既存のLaraveはElasticBeanstalk上で稼働させている • CloudfrontのBehaviorsを利用してパス毎にリクエストの流す先 を分岐させる ◦ 段階的にNuxt.jsにリプレースされたページに移行していく 段階的なリリース 段階的なリリース
33. Copyright © M&A Cloud All rights reserved.
34. Copyright © M&A Cloud All rights reserved. 小ネタ：Lambda上のNuxt.jsからLaravelへのHTTPリクエストが通らない 小ネタ：Lambda上のNuxt.jsから LaravelへのHTTPリクエストが通らない • Nuxt.jsからLaravelのHTTPのエンドポイントへのリクエストは axiosを利用 ◦ LambdaにデプロイしたNuxt.js上でこのリクエストが失敗 （ステータスコード403） ◦ どういうこと？
35. Copyright © M&A Cloud All rights reserved. 想定のリクエスト
36. Copyright © M&A Cloud All rights reserved. 実際のリクエスト
37. Copyright © M&A Cloud All rights reserved. だとしても何がイケないのか
38. Copyright © M&A Cloud All rights reserved. Cloudfrontは多段構成できない Cloudfrontは多段構成できない • Cloudfrontは多段構成出来ない仕組みになっている • Cloudfrontを経由したリクエストはヘッダーにviaというパラ メータが付与される ◦ Lambda上で動かしているNuxt.jsで利用しているaxiosでは リクエストヘッダーを引き継いぐ ▪ viaが引き継がれるので多段構成とみなされる Qiita: https://qiita.com/kubotak/items/fc1a877f99a569fc54bb
39. Copyright © M&A Cloud All rights reserved. ログインセッション
40. Copyright © M&A Cloud All rights reserved. ログインセッション ログインセッション • LaravelとNuxt.jsが混在した状態でのログインセッションの共有 ◦ Laravelで発行されるCookieをそのまま利用 • クライアントで実行されるJSではaxiosによるリクエストに Cookieが付与される形でLaravel側でユーザーセッションが判断 できる • サーバーサイドのNuxt.jsでも同様にHTTPリクエストから取得し たCookieをaxiosでリクエストに付与
41. Copyright © M&A Cloud All rights reserved. ユーザーを判別 SSR CSR with axios
42. Copyright © M&A Cloud All rights reserved. Cookieを付与するタイミング Cookieを付与するタイミング すべてのページをNuxt.jsで構築してしまうとサーバーがブラウザに Cookieを付与することができません。 ログインページや会員登録ページのPOST先などはLaravelで作られ たエンドポイントにリクエストさせて、ブラウザにログインセッショ ンのCookieを付与する設計になった
43. Copyright © M&A Cloud All rights reserved. POST Cookie付与
44. Copyright © M&A Cloud All rights reserved. リクエストバリデーション リクエストバリデーション Cookieを付与しなくてはいけないログインページや会員登録ページで はクライアントのみでバリデーションが完結しません。 hello@test.com ************ 送信 placeholder 送信 invalid! ❓
45. Copyright © M&A Cloud All rights reserved. リクエストバリデーション リクエストバリデーション POST先でリクエストバリデーションを行った結果を元のページにエ ラーとして通知するためにエラー用のCookieを付与してクライアン ト側で表示させる hello@test.com ************ 送信 placeholder 送信 invalid! 入力に誤りがあります
46. Copyright © M&A Cloud All rights reserved. 移行してどうだったか
47. Copyright © M&A Cloud All rights reserved. 動的に遷移するページを作れた 動的に遷移するページを作れた
48. Copyright © M&A Cloud All rights reserved. 移行後 移行後 • TypeScriptによる型の恩恵 • 旧環境ではVue.jsのコンポーネントとPureJSが混在していてUIが どちらの処理かわかりにくかった点などはすべてNuxt.jsに集約さ れた • scoped CSSにより安全にCSSを書くことができるようになった • アトミックデザインのようなコンポーネント設計を取り入れたので パーツの再利用性が上がり、サイトのテイストが統一された • etc
49. Copyright © M&A Cloud All rights reserved. メンバーの声 メンバーの声 いいかんじ(≧∇≦)b 考えることが増えたので複雑になった 気がしますが、apiを適切に切ってれ ばこれ以上無闇に複雑化しないかもと いう期待はある。
50. Copyright © M&A Cloud All rights reserved. まとめ まとめ • APIドキュメントが整備されているとフロントエンドとの連携がス ムーズ • Lambdaを利用することでサーバーメンテナンスのコストをなくす • CloudfrontのBehaviorsを利用して段階的に移行 • LaravelのCookieはそのまま利用 • LaravelとNuxt.jsでステートを共有するためにCookieを使う
51. Copyright © M&A Cloud All rights reserved. WE ARE HIRING! M&Aクラウドでは 一緒に働く仲間を募集しています PR https://www.wantedly.com/companies/macloud
52. Copyright © M&A Cloud All rights reserved. Thank you for watching :)