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.5k
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
95
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
490
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
770
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
10k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.2k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
730
Felteで作る簡単フォームバリデーション
kubotak
1
1.5k
SvelteKitを本番投入してみて
kubotak
2
2k
Other Decks in Programming
See All in Programming
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
140
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
350
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
560
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
120
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.3k
SwiftUI Viewの責務分離
elmetal
PRO
1
240
昭和の職場からアジャイルの世界へ
kumagoro95
1
380
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
sappoRo.R #12 初心者セッション
kosugitti
0
250
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
5.8k
4 Signs Your Business is Dying
shpigford
182
22k
The Cult of Friendly URLs
andyhume
78
6.2k
Site-Speed That Sticks
csswizardry
4
380
The Invisible Side of Design
smashingmag
299
50k
How to Ace a Technical Interview
jacobian
276
23k
Writing Fast Ruby
sferik
628
61k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Embracing the Ebb and Flow
colly
84
4.6k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Designing for humans not robots
tammielis
250
25k
What's in a price? How to price your products and services
michaelherold
244
12k
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 :)