Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

1851e42555822b0fc915dbf3ef0c0f76?s=47 kubotak
December 11, 2020

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

PHP Conference 2020 Track4

1851e42555822b0fc915dbf3ef0c0f76?s=128

kubotak

December 11, 2020
Tweet

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 :)