Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アメブロ: Isomprhicアプリケーションのパフォーマンス・チューニング

HOU Bin
September 08, 2017

アメブロ: Isomprhicアプリケーションのパフォーマンス・チューニング

Frontrend Vol.10 - 夏の終わりに納涼パフォーマンス話
https://frontrend.connpass.com/event/63971/
https://freshlive.tv/tech-conference/151511

アメブロ: Isomprhicアプリケーションのパフォーマンス・チューニング

株式会社サイバーエージェント
アメーバブログ
侯斌 ( @houbin217jz )

アメブロSP面で去年刷新から今まで行われたパフォーマンス・チューニングについて紹介致します。特にサーバーとクライエントのキャッシュ設計とチューニング、コード分割、Service Workerのことを詳しくお伝えします。

参考資料:

アメブロ2017: Isomorphic Web Appの進化編
https://developers.cyberagent.co.jp/blog/archives/9001/

アメブロ2017 – 大規模サービスhttps化 ~ All Greenを目指して ~
https://developers.cyberagent.co.jp/blog/archives/7743/

開発、リリース、運用のサイクルを回す――アメブロのフロントエンドにおけるモダンなDevOps環境作り
http://www.atmarkit.co.jp/ait/articles/1704/13/news017.html

React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント
http://www.atmarkit.co.jp/ait/articles/1706/08/news011.html

アメブロでReactやIsomorphic Web Applicationを採用した理由――その成果と構成技術
http://www.atmarkit.co.jp/ait/articles/1702/09/news011.html

No more ガタンッ――React/Redux、Atomic Design、CSS Modulesを取り入れたアメブロのフロントエンド開発の裏側
http://www.atmarkit.co.jp/ait/articles/1702/28/news017.html

アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~
https://developers.cyberagent.co.jp/blog/archives/636/

アメブロ2016 ~ Isomorphic JavaScriptの詳しい話
https://developers.cyberagent.co.jp/blog/archives/3513/

HOU Bin

September 08, 2017
Tweet

More Decks by HOU Bin

Other Decks in Programming

Transcript

  1. ࣗݾ঺հ ިɹ඾ʢί΢ɹώϯʣɹ 32࠽ ▸ ത࢜ʢ޻ֶʣ ▸ ग़਎ɿதࠃɾྒྷೡʢ౦๺஍ํʣ ▸ גࣜձࣾαΠόʔΤʔδΣϯτ
 Ξϝʔόϒϩά

    ϑϩϯτϦχϡʔΞϧͷج൫ɾӡ༻Λ୲౰ ▸ 2014೥4݄ɹגࣜձࣾαΠόʔΤʔδΣϯτɹ৽ଔೖࣾ
 2014೥5݄ɹϓϥοτϑΥʔϜɹαʔόʔΤϯδχΞʢJavaʣ
 2015೥4݄ɹ৽نϓϩδΣΫτɹαʔόʔΤϯδχΞʢGoʣ
 2015೥9݄ɹAmeba Ownd ɹɹ ϑϩϯτΤϯδχΞʢAngularJSʣ
 2016೥1݄ɹΞϝʔόϒϩάɹɹϑϩϯτΤϯδχΞʢReact + Node.jsʣɹ ▸ https://twitter.com/houbin217jz ▸ https://github.com/kouhin
  2. ΞϝʔόϒϩάɾSPϦχϡʔΞϧ ▸ 2016೥8݄ϦϦʔε ▸ ಺༰ɿ ▸ Javaϕʔε
 →ɹNode.js ▸ Server

    side renderingʢSSRʣ
 →ɹIsomorphic App (SSR + SPA)
 React + Redux + React Router ▸ σβΠϯϦχϡʔΞϧ ▸ ӡ༻ͳͲʢhttp://www.atmarkit.co.jp/ ait/articles/1704/13/news017.htmlʣ ΞϝʔόϒϩάɾSPϦχϡʔΞϧ https://developers.cyberagent.co.jp/blog/archives/636/
  3. όοΫΤϯυͷΩϟογϡ ͳͥΩϟογϡ͕ॏཁͳͷ͔ - 3 ▸ Ωϟογϡ͕ޮ͖΍͍͢ ▸ ཧ༝: SEOΛॏࢹ͢ΔӾཡܥͷγεςϜ ί΢͘Μɺί΢͘ΜɺISOMORPHICͷ͜ͱΛฉ͖͍ͨͰ͚͢Ͳ

    ͲΜͳγεςϜͰ͔͢ ͏ͪͷ؅ཧγεςϜͰ͢ ͑ͬͬʁʁͲ͏ͯ͠ISOMORPHICͳͷʁ ΧοίΠΠ͔Β ͦΕ͸ISOMORPHICΛ΍Ίͨ΄͏͕͍͍
  4. όοΫΤϯυͷΩϟογϡ ΞϝϒϩͷόοΫΤϯυΩϟογϡͷઃܭ ▸ ΞϝϒϩSSRͷྲྀΕ ▸ PathϚονϯάɺίϯϙωϯ τͱඞཁͳॲཧΛऔΓग़͢ ▸ Redux Store४උ:

    APIίʔϧ ΛؚΊɺඞཁͳσʔλॲཧ Λߦ͏‼ ▸ Redux Store + ReactDOMServer.renderTo String()‼ = HTML ▸ Q1. ԿΛΩϟογϡ͢Δ 
 
 
 ߋ৽ස౓͕௿͍Object
 
 
 ReactDOMServer
 .renderToString() ͷ݁Ռ
  5. όοΫΤϯυͷΩϟογϡ ΞϝϒϩͷόοΫΤϯυΩϟογϡͷઃܭ ▸ Q3. Ωϟογϡ͔Β࡟আλΠϛϯά ▸ هࣄΛߋ৽͞ΕͨΒɺهࣄIDΛ΋ΒͬͯهࣄͷΩϟογϡΛ࡟আ͢Ε͹OK ʢ͜Ε͸μϝʂʣ ▸ هࣄͷߋ৽


    ˠɹهࣄϖʔδͷΩϟογϡΛ࡟আ ▸ هࣄͷ౤ߘ
 ˠɹهࣄҰཡͷΩϟογϡΛ࡟আ
 ˠɹهࣄৄࡉͷϦϯΫΛߋ৽͠ͳ͍ͱ͍͚ͳ͍ͷͰɺهࣄৄࡉͷΩϟογϡΛ࡟আ͢Δඞཁ͕͋Δ ▸ εΩϯɾϓϩϑΟʔϧͷߋ৽
 ˠɹϒϩΨʔͷશϖʔδͷΩϟγϡΛ࡟আ ࣮૷͸ෳࡶʹͳΔ͠ɺ
 ສ͕ҰΩϟογϡͷ࡟আ͕࿙ΕͨΒɺ͜Θ͍ʂʂʂʂʂ
  6. όοΫΤϯυͷΩϟογϡ ΞϝϒϩͷόοΫΤϯυΩϟογϡͷઃܭ ▸ Q3. Ωϟογϡ͔Β࡟আλΠϛϯά ▸ Namespace (Ameba ID)ຖΛ࡟আ
 ▸

    Fallback: ΩϟογϡͷTTLΛઃఆ 
 ສ͕Ұ࡟আࣦഊͯ͠΋ɺTTLʹΑΓΩϟογϡΛࣦޮͤ͞Δ namespace: “staff”
 https://ameblo.jp/staff 
 https://ameblo.jp/staff/message-board.html
 https://ameblo.jp/staff/entry-12308025976.html
 https://ameblo.jp/staff/** DELETE /cache?amebaId=staff
  7. ▸ Q3. Ωϟογϡ͔Β࡟আλΠϛϯά ▸ τϥϯβΫγϣϯ໰୊ όοΫΤϯυͷΩϟογϡ ΞϝϒϩͷόοΫΤϯυΩϟογϡͷઃܭ ߋ৽ user_a DELETE

    
 /cache?
 ameba_id = user_a user_b API Server Node.js Server Cache Ӿཡ Rendering Evict Cache /ameba_id Save Ωϟογϡ࡟আ
 ࣦഊʂ
  8. ▸ Q3. Ωϟογϡ͔Β࡟আλΠϛϯά ▸ τϥϯβΫγϣϯ໰୊ʢόʔδϣϯ෇͖ʣ όοΫΤϯυͷΩϟογϡ ΞϝϒϩͷόοΫΤϯυΩϟογϡͷઃܭ ߋ৽ user_a DELETE

    
 /cache?
 ameba_id = user_a user_b API Server Node.js Server Cache Ӿཡ Rendering Update user_a/version: 4 Save to /user_a/3/ GET user_a/version: 3
  9. όοΫΤϯυͷΩϟογϡ ΞϝϒϩͷόοΫΤϯυΩϟογϡͷઃܭ ▸ Q4. Local Cache VS Cache Server ▸

    Node.jsͷΠϯελϯε਺͕ଟ͍ ▸ αʔϏε಺ʹॏෳϨϯμϦϯάͨ͘͠ͳ͍͔Β
 Ұ൪࠷ॳʹϦΫΤετΛड͚औͬͨαʔόʔ͕Ωϟογϡ͞Εͨ΋ͷΛଞͷαʔ όʔʹڞ༗Ͱ͖Δ → Cache Server͕ඞཁ ▸ On-memory͸ૣ͍Ͱ͔͢ΒɺΑ͘࢖ΘΕΔ΋ͷΛOn-memoryʹ΋อଘ͢Δ (LRU-cache) → Local Cache͕ඞཁ ▸ 2֊૚: On-memory Cache (LRU-cache) + Cache Server
  10. όοΫΤϯυͷΩϟογϡ ΞϝϒϩͷόοΫΤϯυΩϟογϡͷઃܭ ▸ Ωϟογϡͷઃܭͷ·ͱΊ ▸ HTMLςϯϓϨʔτ + APIͷσʔλΩϟογϡ ▸ Namespace

    (AmebaId + Version) ͰΩϟογϡอଘɾΞ ΫςΟϒతͳ࡟আ(Versionߋ৽) ▸ On-memory cache + Cache Server 2֊૚
  11. ஗Ԇϩʔυ ஗Ԇϩʔυ: SSR → SPA ▸ SSRͷྲྀΕ ▸ PathϚονϯάɺίϯϙωϯ τͱඞཁͳॲཧΛऔΓग़͢

    ▸ Redux Store४උ: APIίʔϧ ΛؚΊɺඞཁͳσʔλॲཧ Λߦ͏ ▸ Redux Store + ReactDOMServer.renderTo String() = HTML https://github.com/kouhin/react-router-hook https://github.com/kouhin/rrr-lazy
  12. ίʔυ෼ׂ ίʔυ෼ׂͷํ๏ɿWEBPACK ▸ https://webpack.js.org/guides/code-splitting ▸ require.ensure, bundle loader, Dynamic imports()

    ▸ ΞϝϒϩɿDynamic imports()
 Lazy Loadʹ͍ͨ͠৔߹: 
 const loadExample = () => import(‘./ExampleComponent’)
  13. ίʔυ෼ׂ ίʔυ෼ׂͷҰ൪େ͖͍σϝϦοτ ▸ ݱ࣌఺ͰWebpackͷ࠶Ϗϧυ଎౓͕͔ͳΓ஗͍ʂ ▸ ϩʔΧϧͷ։ൃϞʔυͰίʔυΛमਖ਼ͨ͠Βɺ10s - 20s ͔͔Δ ▸

    ղܾํ๏ɿϩʔΧϧͰίʔυ෼ׂΛແޮʹ͢Δ ▸ babel-plugin-dynamic-import-webpack
 babel-plugin-remove-webpack

  14. SERVICE WORKER & ΞηοτͷϓϦΩϟογϡ) SERVICE WORKER ▸ લఏɿHTTPSʂ ▸ Ξϝϒϩ2017

    – େن໛αʔϏεhttpsԽ ~ All GreenΛ໨ ࢦͯ͠ ~
 https://developers.cyberagent.co.jp/blog/archives/7743
  15. SERVICE WORKER & ΞηοτͷϓϦΩϟογϡ) SERVICE WORKER - ΤϯτϦ ▸ AMPϖʔδɿඞཁͳΞηοτΛϓϦϩʔυɾΩϟογϡ


    <amp-install-serviceworker> Install-service-worker.html service-worker.js
 (installer) service-worker.js
 (CDN) ΫϩευϝΠϯ importScripts Assets
  16. SERVICE WORKER & ΞηοτͷϓϦΩϟογϡ) SERVICE WORKER - ΤϯτϦ ▸ ΞϝϒϩSPϖʔδɿΞηοτΛΩϟογϡ

    service-worker.js
 (installer) service-worker.js
 (CDN) ΫϩευϝΠϯ importScripts Assets
  17. SERVICE WORKER & ΞηοτͷϓϦΩϟογϡ) SERVICE WORKER - ࣮૷ ▸ Webpack

    + Workbox
 
 https://github.com/GoogleChrome/workbox
  18. কདྷͷల๬ PWA & SERVICE WORKER ▸ ݱঢ়: Service Worker =

    ϓϦΩϟογϡ ▸ ࠓޙ ▸ Add to Home Screen ▸ App ShellϞσϧ ▸ ΦϑϥΠϯϞʔυ ▸ ௨஌