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
3k
Laravelで運用しているサービスを Nuxt.jsにリプレイスする
PHP Conference 2020 Track4
kubotak
December 11, 2020
Tweet
Share
More Decks by kubotak
See All by kubotak
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
53
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
420
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
610
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
10k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.1k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
690
Felteで作る簡単フォームバリデーション
kubotak
1
1.3k
SvelteKitを本番投入してみて
kubotak
2
1.9k
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
3.5k
Other Decks in Programming
See All in Programming
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
970
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
390
色々なIaCツールを実際に触って比較してみる
iriikeita
0
270
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
910
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.2k
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
220
Outline View in SwiftUI
1024jp
1
110
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
150
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
425
64k
Designing the Hi-DPI Web
ddemaree
280
34k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Building Adaptive Systems
keathley
38
2.2k
Scaling GitHub
holman
458
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
How to Ace a Technical Interview
jacobian
275
23k
Bash Introduction
62gerente
608
210k
RailsConf 2023
tenderlove
29
880
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
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 :)