Pros and Cons of SSR and JAMstack

Transcript

1. mercari x merpay Frontend Tech Talk #4 Yutaka Sasaki Pros and Cons of SSR and JAMstack
2. Yutaka Sasaki Github: sskyu Twitter: @_sskyu Joined on 2018/09/01 2 Profile
3. 8月 本番環境の構築 一部のキャンペーンのみ JAMstack環 境に移行する 12月 キャンペーンMS 高速化の調査 本番リリース 9, 10月 全体アーキテクチャの設計 既存のキャンペーンを JAMstack で動かせるようにする 設計, JAMstack化 11月 devでキャンペーンの動作確認 他マイクロサービスに 実装の依頼 3 Performance improvement schedule どういうアプローチで高速化を図 るか方向性を決める
4. What is Merpay Campaign Pages 01 SSR Performance 02 Nuxt Generate 03 Migrate the cashless campaign to JAMstack 04 SSR vs JAMstack 05 4 Agenda
5. What is Merpay Campaign Pages
6. Merpay campaign pages
7. Technical stack of merpay frontend micro services Application CI / CD Infra Monitoring
8. SSRのパフォーマンスがでない 01 1Pod あたり 20rps しか捌けない（※2019/04時点、2019/08 では 90rps） スケールアウトさせて 40 ~ 80 Pod デプロイして捌いている とてもコスパが悪い 8 Issue
9. SSR Performance
10. いろいろなパターンで負荷試験をしてみた 1. Plain Nuxt App with express 2. campaign A (コンテンツ少) 3. campaign B（コンテンツ多） 4. campaign B（全体を client-only tag で囲む） 5. campaign B（ファーストビュー以外を client-only tag で囲む） 10 Load testing
11. Results of load testing Machine: Macbook Pro (15-inch 2018) Tool: https://github.com/tsenart/vegeta duration is 30sec, response time is less than 3 sec, average of 3 times
12. コンポーネント数 01 02 03 SSR するコンポーネント数に比例してパフォーマンスが落ちるのがわかった client-only tag SSR しない範囲を決めることで負荷を減らすことができる FirstView だけ SSR して、スクロールしないと見えない部分は client-only で囲むのが良さそう 限界が見える client-only tag を使うことで数割の改善は見込めるが、飛躍的な改善は難しそう 12 Summary of load testing
13. nuxt generate ならどうだろう?
14. nuxt generate (JAMstack)
15. What is nuxt generate Nuxt.js srcDir/pages/**/*.vue が RouteComponent になる e.g. src/pages/foo.vue → http://localhost:3000/foo src/pages/bar/index.vue → http://localhost:3000/bar nuxt generate SSR時に出力している RouteComponent の html を予め 生成する e.g. dist/foo/index.html dist/bar/index.html 15 https://ja.nuxtjs.org/guide/
16. susumerpay campaign
17. susumerpay campaign PC WebView on Mercari App Android iOS
18. nuxt generate 時に userAgent が取れない ・req.headers & navigator.userAgent が取得できない ・v-if の条件式に UA を入れると DOM が生成されずブラウザ実行時にエラー 18 Try nuxt generate Release hook nuxt generate rsync html js css css js html running in browsers
19. 開発中のキャンペーンを本番に出ないようにする ・元々 middleware で実装されていた 　→ Incomming Request の度にハンドルする方式。nuxt generate では使えない ・nuxt-generate 用の module を独自に作って対応した 　① nuxt.config で 除外したいキャンペーン一覧を定義する 　② 'build:extendRoutes’ を hook して Routing から除外する 　③ ‘generate:done’ を hook して assets の中から除外したいキャンペーンの asset を削除する 19 Try nuxt generate
20. いくつかの nuxt lifecycle がブラウザ上で使えない ・middleware や fetch は nuxt generate 時に実行される 　→ ブラウザ上で実行されない ・fetch 　→ CI 上で API が叩かれる 　→ キャンペーンの場合はユーザーステータスを取得する API を叩く 　　 → ページがブラウザにロードされてから API を叩くように変更した 20 Try nuxt generate
21. JAMstack での開発とデプロイフロー ・ローカル 　→ 普段通り nuxt dev (mode: universal) で開発する ・dev 　→ branch を push すると dev 用の GCS バケットに nuxt generate したものをデプロイする 　→ PullRequest に確認用の URL が貼られ、コードレビュー前に確認できる ・test 　→ master ブランチの内容が常にデプロイされる ・production 　→ release tag が打たれると本番にデプロイされる 21 About development experience
22. Migrate the cashless campaign to JAMstack
23. キャッシュレスキャンペーン ・シンプルなLP 　→ API を叩く箇所はない ・キャンペーン期間が 2019/10/01 ~ 2020/06/30 と長い ・先行して JAMstack 環境に移行する ・問題なく運用できそうであれば、 　以降の新規キャンペーンは JAMstack 環境で開発する 23 What is the cashless campaign
24. JAMstack の本番環境を作る 01 02 03 ドメインを決めて MicroService 版と JAMstack 版のキャッシュレスキャンペーンを 2 箇所で動かす。IP制 限を掛けて社内からのみアクセス可能にする。 本番環境にキャッシュレスキャンペーンをデプロイする 本番デプロイの検証とMicroService版のキャッシュレスキャンペーンと差異がないことを保証する。 本番環境の有効化 IP制限を解除する。 導線を変更して JAMstack 版キャッシュレスキャンペーンにリクエストを流す。 24 How to migrate the cashless campaign
25. imag es css Architectures MicroService iOS Android PC WebView merpay gateway merpay api merpay campaign web merpay gateway merpay api cache static assets e.g. js, css, images handle API Requests handle static assets handle HTML and API Requests nuxt build create docker image nuxt generate deploy to GCS JAMstack html js html js css img
26. path の先頭に s/ がついている方を JAMstack 版にする ・MicroService 版 　https://campaign.merpay.com/jp/2019-10-cashless/ ・JAMstack 版 　https://campaign.merpay.com/s/jp/2019-10-cashless/ ※ s/ はそのうち外す予定 26 A new domain for campaign-web
27. s/ 配下で動くようにした影響で nuxt core file や画像の参照できない ・nuxt.config の router.base に /s/ を設定する 　→ <head> 内に <base href=”/s/”> が埋め込まれる ・絶対パスで参照している箇所を相対パスにする 27 <base> tag
28. Migration complete SSR JAMstack
29. SSR vs JAMstack
30. https://developers.google.com/web/updates/2019/02/rendering-on-the-web 30 Rendering on the Web
31. SSR コードで表現できることの自由度が高い node.js まわりの機能を追加することができる 運用コストが高い 　→ オンコール体制が必要 　→ rps が出ないのでスケールアウトで対応 　　せざるおえない JAMstack 運用コストが低い 　→ MicroService と比べて 1/10 に削減できそう 　→ オンコール体制が不要 LP のようなペライチのサイトには適している 管理画面のようなサイトには不向き 制約が多く、SSR のときと同等の表現をするとき 　 に工夫が必要 　→ ユーザー情報を取得する様な API を叩く場合は 　　　 Client 側の JS 実行タイミングでやる 31 Pros and Cons