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
57
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
440
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
650
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
10k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.1k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
700
Felteで作る簡単フォームバリデーション
kubotak
1
1.4k
SvelteKitを本番投入してみて
kubotak
2
1.9k
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
3.6k
Other Decks in Programming
See All in Programming
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
CSC509 Lecture 12
javiergs
PRO
0
160
Jakarta EE meets AI
ivargrimstad
0
160
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
200
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.3k
Ethereum_.pdf
nekomatu
0
470
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
5
1.5k
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
Remix on Hono on Cloudflare Workers
yusukebe
1
300
Jakarta EE meets AI
ivargrimstad
0
250
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Optimizing for Happiness
mojombo
376
70k
The Language of Interfaces
destraynor
154
24k
Building Adaptive Systems
keathley
38
2.3k
GraphQLとの向き合い方2022年版
quramy
43
13k
4 Signs Your Business is Dying
shpigford
180
21k
The Cult of Friendly URLs
andyhume
78
6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
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 :)