Tweet
Tweet

Slide 1

Slide 1 text

Copyright © M&A Cloud All rights reserved. Laravelで運用しているサービスを Nuxt.jsにリプレイスする PHP Conference 2020/Track 4 Kenjiro Kubota

Slide 2

Slide 2 text

Copyright © M&A Cloud All rights reserved. Profile 2 久保田 賢二朗 kubotak-is kubotak_public kenjiro.kubota 株式会社M&Aクラウド JavaScript Go PHP https://kubotak.page

Slide 3

Slide 3 text

Copyright © M&A Cloud All rights reserved. PR

Slide 4

Slide 4 text

Copyright © M&A Cloud All rights reserved. 買い手
 ・案件報酬はM&A成功報酬のみ ・最低手数料なし ・売り手ソーシングのチャネルが増える ・M&Aニーズを発信するだけで売り手を集客 ・仲介業者を介さずにダイレクトにやり取り可能 ・潜在層にもリーチが可能 手数料無料 ※プラットフォーム案件の場合 
 ※
 売り手 1.掲載する ・買い手のM&Aニーズを自ら調べることが可能 ・仲介業者を介さずにダイレクトにやり取り可能 ・買い手のM&A担当者に直接コンタクトをとれる ・仲介業者を使わないので手数料が無料 2.オファーする M&A・出資ニーズを掲載 買い手のメリット 売り手のメリット ・仲介業者を使わないので手数料が無料 
 求人広告サイトのようなM&Aダイレクトマッチング 〇〇領域の会社を 募集します この会社と一緒に やっていきたい！ 4 PR

Slide 5

Slide 5 text

Copyright © M&A Cloud All rights reserved. 注意事項 注意事項 ● すべてをリプレイスした、という話ではないです。 ○ 現在進行系です。 ● また、一部は意図して移行しません。これは後ほど説明します。 ● どちらのフレームワークが優れているかという話ではありませ ん。

Slide 6

Slide 6 text

Copyright © M&A Cloud All rights reserved. 移行経緯

Slide 7

Slide 7 text

Copyright © M&A Cloud All rights reserved. 既存のアプリケーション 既存のアプリケーション ● 2018年から開発が開始したLaravelによるモノリシックアプリ ケーション ● フロントエンドはBlade + Vue.js + PureJS(VanillaJS) / jQuery ○ Laravel標準のバリデーションやセッションフラッシュなど によるバリデーションエラー表示

Slide 8

Slide 8 text

Copyright © M&A Cloud All rights reserved. アプリケーションやビジネスの拡大に伴う要求の変化 アプリケーションやビジネスの拡大に伴う 要求の変化 ● UIをインタラクティブに変化させたい ○ 画面側に状態を持つ必要がある

Slide 9

Slide 9 text

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属性に出力

Slide 10

Slide 10 text

Copyright © M&A Cloud All rights reserved. Child.vue

Slide 11

Slide 11 text

Copyright © M&A Cloud All rights reserved. Parent.vue

Slide 12

Slide 12 text

Copyright © M&A Cloud All rights reserved.

Slide 13

Slide 13 text

Copyright © M&A Cloud All rights reserved. 複雑なUIの状態と戦う 複雑なUIの状態と戦う ● UIの管理が複雑化してきた ● 共通化できてないコンポーネント ○ 都度生み出される類似のボタンなど ● 既存仕様のまま戦うか、やり方を変えるか、

Slide 14

Slide 14 text

Copyright © M&A Cloud All rights reserved. UIを切り離す UIを切り離す ● Laravelで開発する場合、基本的にはBlade + JavaScript ● コンポーネントを共通化したいが、BladeとJavaScriptでの二重 管理になる可能性がある ○ LaravelからUIを完全に分離する

Slide 15

Slide 15 text

Copyright © M&A Cloud All rights reserved. フロントエンドをNuxt.jsに置き換える

Slide 16

Slide 16 text

Copyright © M&A Cloud All rights reserved. Nuxt.jsの選定 Nuxt.jsの選定 ● メンバー全員がVue.jsの経験あり ○ コンポーネントのライフサイクルにある程度の知見があった ● 個人的に何度か利用したことがあったので開発の初速が見込めた ● Next.js(React)でも良かったがVue.jsベースなので他メンバーの 学習コストも下げられて説得しやすかった ○ TypeScriptやCompositionAPIを導入したので学習コストは 若干あった

Slide 17

Slide 17 text

Copyright © M&A Cloud All rights reserved. Nuxt.jsとは Nuxt.jsとは Nuxt.jsはVue.jsを利用してユニバーサルアプリケーションを作成でき るオープンソースフレームワークです。 サーバーサイドレンダリング・静的ファイル生成・シングルページア プリケーションをサポートしています。 Vue.jsのプラグインであるVuexやVue Router、Vue Metaなどを内包 し、フルスタックなアプリケーション作成をサポート

Slide 18

Slide 18 text

Copyright © M&A Cloud All rights reserved. ユニバーサルモード ユニバーサルモード Nuxt.jsにはユニバーサルモードと呼ばれるアプリケーション状態があ ります。 これはHTTPリクエスト時の初期状態をSSRで表示し、以降のページ遷 移をSPA(CSR)として振る舞うハイブリッドで動作するアプリケーショ ンです。 SPAの課題であるSEOに対しても有効な手段です。

Slide 19

Slide 19 text

Copyright © M&A Cloud All rights reserved. フロントエンドとバックエンド フロントエンドとバックエンド ● フロントエンドにNuxt.jsを採用 ● バックエンドをそのままLaravlを使う ○ HTTP APIとして動作 ○ すでに存在するドメインオブジェクトは流用活用

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Copyright © M&A Cloud All rights reserved.

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Copyright © M&A Cloud All rights reserved. ADRとOpen API ADRとOpen API ADRの最大の特徴は1つのエンドポイントに1つのAction(Class)にな ることが挙げられる。 この特徴を利用することで、Open APIのアノテーションをActionと そのActionが返却するResponderに集約されることで見通しよく記述 できる。

Slide 24

Slide 24 text

Copyright © M&A Cloud All rights reserved. Action

Slide 25

Slide 25 text

Copyright © M&A Cloud All rights reserved. Responder

Slide 26

Slide 26 text

Copyright © M&A Cloud All rights reserved. Responder

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Copyright © M&A Cloud All rights reserved. Nuxt.jsの実行環境

Slide 29

Slide 29 text

Copyright © M&A Cloud All rights reserved. AWS Lambda AWS Lambda AWS Lambdaはサーバーのプロビジョニングや管理の必要なしに、 コードが実行できる環境です。 Nuxt.jsのアプリケーションはこのAWS Lambda上で動作させます。 デプロイにはServerless Frameworkを利用して、静的ファイルやクラ イアントで実行されるJavaScriptファイルはS3に配置します。

Slide 30

Slide 30 text

Copyright © M&A Cloud All rights reserved. Serverless Framework Serverless Framework サーバーレスアプリケーションの構成管理やデプロイを行うツール プラグインが豊富でいろんなユースケースをカバーできる ● serverless-plugin-warmup ○ コールドスタート対策 ● serverless-prune-plugin ○ 古いバージョンを削除 ● serverless-cloudfront-invalidate ○ デプロイ後にCloudfrontのキャッシュを削除

Slide 31

Slide 31 text

Copyright © M&A Cloud All rights reserved.

Slide 32

Slide 32 text

Copyright © M&A Cloud All rights reserved. ● すべてのページを一括でNuxt.jsに移行するのは工数的に困難 ● 既存のLaraveはElasticBeanstalk上で稼働させている ● CloudfrontのBehaviorsを利用してパス毎にリクエストの流す先 を分岐させる ○ 段階的にNuxt.jsにリプレースされたページに移行していく 段階的なリリース 段階的なリリース

Slide 33

Slide 33 text

Copyright © M&A Cloud All rights reserved.

Slide 34

Slide 34 text

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） ○ どういうこと？

Slide 35

Slide 35 text

Copyright © M&A Cloud All rights reserved. 想定のリクエスト

Slide 36

Slide 36 text

Copyright © M&A Cloud All rights reserved. 実際のリクエスト

Slide 37

Slide 37 text

Copyright © M&A Cloud All rights reserved. だとしても何がイケないのか

Slide 38

Slide 38 text

Copyright © M&A Cloud All rights reserved. Cloudfrontは多段構成できない Cloudfrontは多段構成できない ● Cloudfrontは多段構成出来ない仕組みになっている ● Cloudfrontを経由したリクエストはヘッダーにviaというパラ メータが付与される ○ Lambda上で動かしているNuxt.jsで利用しているaxiosでは リクエストヘッダーを引き継いぐ ■ viaが引き継がれるので多段構成とみなされる Qiita: https://qiita.com/kubotak/items/fc1a877f99a569fc54bb

Slide 39

Slide 39 text

Copyright © M&A Cloud All rights reserved. ログインセッション

Slide 40

Slide 40 text

Copyright © M&A Cloud All rights reserved. ログインセッション ログインセッション ● LaravelとNuxt.jsが混在した状態でのログインセッションの共有 ○ Laravelで発行されるCookieをそのまま利用 ● クライアントで実行されるJSではaxiosによるリクエストに Cookieが付与される形でLaravel側でユーザーセッションが判断 できる ● サーバーサイドのNuxt.jsでも同様にHTTPリクエストから取得し たCookieをaxiosでリクエストに付与

Slide 41

Slide 41 text

Copyright © M&A Cloud All rights reserved. ユーザーを判別 SSR CSR with axios

Slide 42

Slide 42 text

Copyright © M&A Cloud All rights reserved. Cookieを付与するタイミング Cookieを付与するタイミング すべてのページをNuxt.jsで構築してしまうとサーバーがブラウザに Cookieを付与することができません。 ログインページや会員登録ページのPOST先などはLaravelで作られ たエンドポイントにリクエストさせて、ブラウザにログインセッショ ンのCookieを付与する設計になった

Slide 43

Slide 43 text

Copyright © M&A Cloud All rights reserved. POST Cookie付与

Slide 44

Slide 44 text

Copyright © M&A Cloud All rights reserved. リクエストバリデーション リクエストバリデーション Cookieを付与しなくてはいけないログインページや会員登録ページで はクライアントのみでバリデーションが完結しません。 hello@test.com ************ 送信 placeholder 送信 invalid! ❓

Slide 45

Slide 45 text

Copyright © M&A Cloud All rights reserved. リクエストバリデーション リクエストバリデーション POST先でリクエストバリデーションを行った結果を元のページにエ ラーとして通知するためにエラー用のCookieを付与してクライアン ト側で表示させる hello@test.com ************ 送信 placeholder 送信 invalid! 入力に誤りがあります

Slide 46

Slide 46 text

Copyright © M&A Cloud All rights reserved. 移行してどうだったか

Slide 47

Slide 47 text

Copyright © M&A Cloud All rights reserved. 動的に遷移するページを作れた 動的に遷移するページを作れた

Slide 48

Slide 48 text

Copyright © M&A Cloud All rights reserved. 移行後 移行後 ● TypeScriptによる型の恩恵 ● 旧環境ではVue.jsのコンポーネントとPureJSが混在していてUIが どちらの処理かわかりにくかった点などはすべてNuxt.jsに集約さ れた ● scoped CSSにより安全にCSSを書くことができるようになった ● アトミックデザインのようなコンポーネント設計を取り入れたので パーツの再利用性が上がり、サイトのテイストが統一された ● etc

Slide 49

Slide 49 text

Copyright © M&A Cloud All rights reserved. メンバーの声 メンバーの声 いいかんじ(≧∇≦)b 考えることが増えたので複雑になった 気がしますが、apiを適切に切ってれ ばこれ以上無闇に複雑化しないかもと いう期待はある。

Slide 50

Slide 50 text

Copyright © M&A Cloud All rights reserved. まとめ まとめ ● APIドキュメントが整備されているとフロントエンドとの連携がス ムーズ ● Lambdaを利用することでサーバーメンテナンスのコストをなくす ● CloudfrontのBehaviorsを利用して段階的に移行 ● LaravelのCookieはそのまま利用 ● LaravelとNuxt.jsでステートを共有するためにCookieを使う

Slide 51

Slide 51 text

Copyright © M&A Cloud All rights reserved. WE ARE HIRING! M&Aクラウドでは 一緒に働く仲間を募集しています PR https://www.wantedly.com/companies/macloud

Slide 52

Slide 52 text

Copyright © M&A Cloud All rights reserved. Thank you for watching :)