Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Laravelで運用しているサービスを Nuxt.jsにリプレイスする
Search
kubotak
December 11, 2020
Programming
6
3.1k
Laravelで運用しているサービスを Nuxt.jsにリプレイスする
PHP Conference 2020 Track4
kubotak
December 11, 2020
Tweet
Share
More Decks by kubotak
See All by kubotak
情報漏洩させないための設計
kubotak
5
1.9k
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
110
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
510
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
840
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.2k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
770
Felteで作る簡単フォームバリデーション
kubotak
1
1.6k
SvelteKitを本番投入してみて
kubotak
2
2k
Other Decks in Programming
See All in Programming
趣味全開のAITuber開発
kokushin
0
200
State of Namespace
tagomoris
4
1.8k
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
hanon52_
2
450
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
4
1k
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
120
AHC045_解説
shun_pi
0
540
The Implementations of Advanced LR Parser Algorithm
junk0612
1
320
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
210
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
400
API for docs
soutaro
2
1.3k
RubyKaigi Dev Meeting 2025
tenderlove
1
180
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Designing Experiences People Love
moore
141
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
550
Thoughts on Productivity
jonyablonski
69
4.6k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Code Review Best Practice
trishagee
67
18k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Embracing the Ebb and Flow
colly
85
4.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Unsuck your backbone
ammeep
670
57k
Transcript
Copyright © M&A Cloud All rights reserved. Laravelで運用しているサービスを Nuxt.jsにリプレイスする PHP
Conference 2020/Track 4 Kenjiro Kubota
Copyright © M&A Cloud All rights reserved. Profile 2 久保田
賢二朗 kubotak-is kubotak_public kenjiro.kubota 株式会社M&Aクラウド JavaScript Go PHP https://kubotak.page
Copyright © M&A Cloud All rights reserved. PR
Copyright © M&A Cloud All rights reserved. 買い手 ・案件報酬はM&A成功報酬のみ ・最低手数料なし
・売り手ソーシングのチャネルが増える ・M&Aニーズを発信するだけで売り手を集客 ・仲介業者を介さずにダイレクトにやり取り可能 ・潜在層にもリーチが可能 手数料無料 ※プラットフォーム案件の場合 ※ 売り手 1.掲載する ・買い手のM&Aニーズを自ら調べることが可能 ・仲介業者を介さずにダイレクトにやり取り可能 ・買い手のM&A担当者に直接コンタクトをとれる ・仲介業者を使わないので手数料が無料 2.オファーする M&A・出資ニーズを掲載 買い手のメリット 売り手のメリット ・仲介業者を使わないので手数料が無料 求人広告サイトのようなM&Aダイレクトマッチング 〇〇領域の会社を 募集します この会社と一緒に やっていきたい! 4 PR
Copyright © M&A Cloud All rights reserved. 注意事項 注意事項 •
すべてをリプレイスした、という話ではないです。 ◦ 現在進行系です。 • また、一部は意図して移行しません。これは後ほど説明します。 • どちらのフレームワークが優れているかという話ではありませ ん。
Copyright © M&A Cloud All rights reserved. 移行経緯
Copyright © M&A Cloud All rights reserved. 既存のアプリケーション 既存のアプリケーション •
2018年から開発が開始したLaravelによるモノリシックアプリ ケーション • フロントエンドはBlade + Vue.js + PureJS(VanillaJS) / jQuery ◦ Laravel標準のバリデーションやセッションフラッシュなど によるバリデーションエラー表示
Copyright © M&A Cloud All rights reserved. アプリケーションやビジネスの拡大に伴う要求の変化 アプリケーションやビジネスの拡大に伴う 要求の変化
• UIをインタラクティブに変化させたい ◦ 画面側に状態を持つ必要がある
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属性に出力
Copyright © M&A Cloud All rights reserved. Child.vue
Copyright © M&A Cloud All rights reserved. Parent.vue
Copyright © M&A Cloud All rights reserved.
Copyright © M&A Cloud All rights reserved. 複雑なUIの状態と戦う 複雑なUIの状態と戦う •
UIの管理が複雑化してきた • 共通化できてないコンポーネント ◦ 都度生み出される類似のボタンなど • 既存仕様のまま戦うか、やり方を変えるか、
Copyright © M&A Cloud All rights reserved. UIを切り離す UIを切り離す •
Laravelで開発する場合、基本的にはBlade + JavaScript • コンポーネントを共通化したいが、BladeとJavaScriptでの二重 管理になる可能性がある ◦ LaravelからUIを完全に分離する
Copyright © M&A Cloud All rights reserved. フロントエンドをNuxt.jsに置き換える
Copyright © M&A Cloud All rights reserved. Nuxt.jsの選定 Nuxt.jsの選定 •
メンバー全員がVue.jsの経験あり ◦ コンポーネントのライフサイクルにある程度の知見があった • 個人的に何度か利用したことがあったので開発の初速が見込めた • Next.js(React)でも良かったがVue.jsベースなので他メンバーの 学習コストも下げられて説得しやすかった ◦ TypeScriptやCompositionAPIを導入したので学習コストは 若干あった
Copyright © M&A Cloud All rights reserved. Nuxt.jsとは Nuxt.jsとは Nuxt.jsはVue.jsを利用してユニバーサルアプリケーションを作成でき
るオープンソースフレームワークです。 サーバーサイドレンダリング・静的ファイル生成・シングルページア プリケーションをサポートしています。 Vue.jsのプラグインであるVuexやVue Router、Vue Metaなどを内包 し、フルスタックなアプリケーション作成をサポート
Copyright © M&A Cloud All rights reserved. ユニバーサルモード ユニバーサルモード Nuxt.jsにはユニバーサルモードと呼ばれるアプリケーション状態があ
ります。 これはHTTPリクエスト時の初期状態をSSRで表示し、以降のページ遷 移をSPA(CSR)として振る舞うハイブリッドで動作するアプリケーショ ンです。 SPAの課題であるSEOに対しても有効な手段です。
Copyright © M&A Cloud All rights reserved. フロントエンドとバックエンド フロントエンドとバックエンド •
フロントエンドにNuxt.jsを採用 • バックエンドをそのままLaravlを使う ◦ HTTP APIとして動作 ◦ すでに存在するドメインオブジェクトは流用活用
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
Copyright © M&A Cloud All rights reserved.
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
Copyright © M&A Cloud All rights reserved. ADRとOpen API ADRとOpen
API ADRの最大の特徴は1つのエンドポイントに1つのAction(Class)にな ることが挙げられる。 この特徴を利用することで、Open APIのアノテーションをActionと そのActionが返却するResponderに集約されることで見通しよく記述 できる。
Copyright © M&A Cloud All rights reserved. Action
Copyright © M&A Cloud All rights reserved. Responder
Copyright © M&A Cloud All rights reserved. Responder
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
Copyright © M&A Cloud All rights reserved. Nuxt.jsの実行環境
Copyright © M&A Cloud All rights reserved. AWS Lambda AWS
Lambda AWS Lambdaはサーバーのプロビジョニングや管理の必要なしに、 コードが実行できる環境です。 Nuxt.jsのアプリケーションはこのAWS Lambda上で動作させます。 デプロイにはServerless Frameworkを利用して、静的ファイルやクラ イアントで実行されるJavaScriptファイルはS3に配置します。
Copyright © M&A Cloud All rights reserved. Serverless Framework Serverless
Framework サーバーレスアプリケーションの構成管理やデプロイを行うツール プラグインが豊富でいろんなユースケースをカバーできる • serverless-plugin-warmup ◦ コールドスタート対策 • serverless-prune-plugin ◦ 古いバージョンを削除 • serverless-cloudfront-invalidate ◦ デプロイ後にCloudfrontのキャッシュを削除
Copyright © M&A Cloud All rights reserved.
Copyright © M&A Cloud All rights reserved. • すべてのページを一括でNuxt.jsに移行するのは工数的に困難 •
既存のLaraveはElasticBeanstalk上で稼働させている • CloudfrontのBehaviorsを利用してパス毎にリクエストの流す先 を分岐させる ◦ 段階的にNuxt.jsにリプレースされたページに移行していく 段階的なリリース 段階的なリリース
Copyright © M&A Cloud All rights reserved.
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) ◦ どういうこと?
Copyright © M&A Cloud All rights reserved. 想定のリクエスト
Copyright © M&A Cloud All rights reserved. 実際のリクエスト
Copyright © M&A Cloud All rights reserved. だとしても何がイケないのか
Copyright © M&A Cloud All rights reserved. Cloudfrontは多段構成できない Cloudfrontは多段構成できない •
Cloudfrontは多段構成出来ない仕組みになっている • Cloudfrontを経由したリクエストはヘッダーにviaというパラ メータが付与される ◦ Lambda上で動かしているNuxt.jsで利用しているaxiosでは リクエストヘッダーを引き継いぐ ▪ viaが引き継がれるので多段構成とみなされる Qiita: https://qiita.com/kubotak/items/fc1a877f99a569fc54bb
Copyright © M&A Cloud All rights reserved. ログインセッション
Copyright © M&A Cloud All rights reserved. ログインセッション ログインセッション •
LaravelとNuxt.jsが混在した状態でのログインセッションの共有 ◦ Laravelで発行されるCookieをそのまま利用 • クライアントで実行されるJSではaxiosによるリクエストに Cookieが付与される形でLaravel側でユーザーセッションが判断 できる • サーバーサイドのNuxt.jsでも同様にHTTPリクエストから取得し たCookieをaxiosでリクエストに付与
Copyright © M&A Cloud All rights reserved. ユーザーを判別 SSR CSR
with axios
Copyright © M&A Cloud All rights reserved. Cookieを付与するタイミング Cookieを付与するタイミング すべてのページをNuxt.jsで構築してしまうとサーバーがブラウザに
Cookieを付与することができません。 ログインページや会員登録ページのPOST先などはLaravelで作られ たエンドポイントにリクエストさせて、ブラウザにログインセッショ ンのCookieを付与する設計になった
Copyright © M&A Cloud All rights reserved. POST Cookie付与
Copyright © M&A Cloud All rights reserved. リクエストバリデーション リクエストバリデーション Cookieを付与しなくてはいけないログインページや会員登録ページで
はクライアントのみでバリデーションが完結しません。
[email protected]
************ 送信 placeholder 送信 invalid! ❓
Copyright © M&A Cloud All rights reserved. リクエストバリデーション リクエストバリデーション POST先でリクエストバリデーションを行った結果を元のページにエ
ラーとして通知するためにエラー用のCookieを付与してクライアン ト側で表示させる
[email protected]
************ 送信 placeholder 送信 invalid! 入力に誤りがあります
Copyright © M&A Cloud All rights reserved. 移行してどうだったか
Copyright © M&A Cloud All rights reserved. 動的に遷移するページを作れた 動的に遷移するページを作れた
Copyright © M&A Cloud All rights reserved. 移行後 移行後 •
TypeScriptによる型の恩恵 • 旧環境ではVue.jsのコンポーネントとPureJSが混在していてUIが どちらの処理かわかりにくかった点などはすべてNuxt.jsに集約さ れた • scoped CSSにより安全にCSSを書くことができるようになった • アトミックデザインのようなコンポーネント設計を取り入れたので パーツの再利用性が上がり、サイトのテイストが統一された • etc
Copyright © M&A Cloud All rights reserved. メンバーの声 メンバーの声 いいかんじ(≧∇≦)b
考えることが増えたので複雑になった 気がしますが、apiを適切に切ってれ ばこれ以上無闇に複雑化しないかもと いう期待はある。
Copyright © M&A Cloud All rights reserved. まとめ まとめ •
APIドキュメントが整備されているとフロントエンドとの連携がス ムーズ • Lambdaを利用することでサーバーメンテナンスのコストをなくす • CloudfrontのBehaviorsを利用して段階的に移行 • LaravelのCookieはそのまま利用 • LaravelとNuxt.jsでステートを共有するためにCookieを使う
Copyright © M&A Cloud All rights reserved. WE ARE HIRING!
M&Aクラウドでは 一緒に働く仲間を募集しています PR https://www.wantedly.com/companies/macloud
Copyright © M&A Cloud All rights reserved. Thank you for
watching :)