$30 off During Our Annual Pro Sale. View Details »

マネーフォワードにおけるウェブメディア高速化の取り組み / yamagoya2018

マネーフォワードにおけるウェブメディア高速化の取り組み / yamagoya2018

Fastly Yamagoya Meetup 2018

Tsukuru Tanimichi

October 24, 2018
Tweet

More Decks by Tsukuru Tanimichi

Other Decks in Programming

Transcript

  1. ϚωʔϑΥϫʔυʹ͓͚Δ
    ΢ΣϒϝσΟΞߴ଎ԽͷऔΓ૊Έ
    'BTUMZ:BNBHPZB
    !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ

    View Slide

  2. ࣗݾ঺հ


    w !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ

    w ϑϦʔϥϯε
    w ೥݄ʙϚωʔϑΥϫʔυʹৗற
    w ΢ΣϒϝσΟΞͷϦϓϨʔεߴ଎ԽΛ୲౰
    w αʔόʔΤϯδχΞ
    w 3VCZPO3BJMT %FW0QT 'SPOUFOE

    View Slide

  3. αʔϏε঺հ


    w .0/&:1-64
    w IUUQTNFEJBNPOFZGPSXBSEDPN
    w ϚωʔϑΥϫʔυ͕ӡӦ͢Δ΢ΣϒϝσΟΞ
    w Ոܭ΍ܦࡁʹؔ͢Δهࣄ
    w ࣗಈՈܭ฽ɾࢿ࢈؅ཧαʔϏεʮϚωʔϑΥϫʔυʯ
    ಺Ͱ΋ӾཡͰ͖Δ

    View Slide



  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. ࠓճͷ։ൃʹ͍ͭͯ


    w 3VCZPO3BJMTͰϑϧεΫϥονͰ࡞Γ௚ͨ͠
    w طଘ͸8PSE1SFTT
    w ͱʹ͔͘ߴ଎Խ͍ͨ͠
    w ճ༡཰ΛߴΊΔͨΊ
    w ඵͰ΋ߴ଎Խ͍ͨ͠

    View Slide

  9. 'BTUMZલఏͰઃܭͨ͠΄͏͕͍͍ཧ༝2JJUB
    IUUQTRJJUBDPNUUBOJNJDIJJUFNTFFFEGFFDF
    ͳ͍ͥ·)FSPLVͳͷ͔2JJUB
    IUUQTRJJUBDPNUUBOJNJDIJJUFNTBCDFCDFBCF
    ෦෼44341"Ͱ443͢Δ͚ͲαΠυόʔ͚ͩ͸ඇಉظͰऔಘ
    ͍ͨ͠2JJUB
    IUUQTRJJUBDPNUUBOJNJDIJJUFNTBFDBEE


    ؔ࿈͢Δهࣄʢެ։ࡁΈʣ

    View Slide

  10. ߴ଎ԽͱΞʔΩςΫνϟ

    View Slide

  11. ߴ଎ԽͷҊ


    w 41"
    w 'BTUMZಋೖ
    w 4FSWJDF8PSLFS 18"

    w όοΫΤϯυΩϟογϡ
    w ͳͲͳͲ

    View Slide

  12. ߴ଎ԽͷҊ ରԠίετͷݟੵΓ
    41" େ
    'BTUMZಋೖ த
    4FSWJDF8PSLFS 18"

    όοΫΤϯυΩϟογϡ খ

    View Slide



  13. w ରԠίετͷେখ͸͋ΕͲɺجຊతʹ͸͢΂ͯ΍Δ
    w ඵͰ΋ߴ଎Խ͍ͨ͠
    w ͨͩ͠41"͸ݟૹΔ΂͖͔໎ͬͨ
    w ޻਺͕๲ΒΈͦ͏
    w 41"ʹ͢ΔͷͰ͋Ε͹443΋ඞਢ
    w ΢ΣϒϝσΟΞͳͷͰ4&0͸ॏཁ͔ͩΒ

    View Slide



  14. w ݁ہɺ41"ͱͯ͠࡞Δ͜ͱʹͨ͠
    w 3FBDU 3FEVYΛ࠾༻
    w ඵͰ΋ߴ଎Խ͍ͨ͠
    w ޙ͔Β41"ʹ࡞Γม͑Δͷ͸ݱ࣮తʹແཧ
    w ΍ΔͳΒ࠷ॳ͔Β41"ͱͯ͠ઃܭ͢Δ͔͠ͳ͍
    w ճ༡㲈هࣄ͔Βهࣄ΁ͷભҠ
    w 41"Ͱهࣄͷຊจ͚ͩࠩ͠ସ͑Δͱ଎ͦ͏

    View Slide



  15. ߏ੒

    View Slide

  16. όοΫΤϯυ͸)FSPLV


    w 4FSWJDF8PSLFSͷΩϟογϡͱ'BTUMZͷΩϟογϡ
    Ͱ΄ͱΜͲͷϨεϙϯε͸ฦͤΔ͸ͣ
    w PSJHJOʹ͸ɺ΄ͱΜͲϦΫΤετ͕དྷͳ͍૝ఆ
    w 4FSWJDF8PSLFSͷઌಡΈ΋͋Δ
    w ϨΠςϯγ͕໰୊ͳ͍ͳΒӡ༻Λָʹ͍ͨ͠
    ͳ͍ͥ·)FSPLVͳͷ͔2JJUB
    IUUQTRJJUBDPNUUBOJNJDIJJUFNTBCDFCDFBCF

    View Slide

  17. $MPVEJOBSZʹ͍ͭͯ


    w ػೳతʹ͸'BTUMZ*NBHF0QUJNJ[FSΛ࢖ͬͯ΋ྑ
    ͔ͬͨ
    w $%/ͱҰຊԽͰ͖Δͷ͸ྑͦ͞͏
    w PSJHJOͷը૾ϑΝΠϧͷ؅ཧΛߟ͑ͨ͘ͳ͔ͬͨ

    View Slide

  18. SPA, SSR

    View Slide

  19. w ࠓ೔͸ৄ͘͠࿩࣌ؒ͢ͳͦ͞͏
    w SFBDUSBJMT
    w 3BJMTͰ443
    w ৄࡉ͸3BJMT%FWFMPQFS.FFUVQ%BZ
    Ͱ࿩͠·͢
    w
    41" 443

    View Slide

  20. Fastly ಋೖ

    View Slide

  21. 'BTUMZಋೖ


    w GBTUMZGBTUMZSBJMT
    w ΄΅͢΂ͯͷΤϯυϙΠϯτΛ'BTUMZͰΩϟογϡ
    w 8FC"1*ͷ+40/
    w 443݁Ռͷ)5.-
    w Ωϟογϡ͍ͯ͠ΔϦιʔε͕ߋ৽͞ΕͨΒQVSHF
    w ΢ΣϒϝσΟΞͳͷͰࠓͷͱ͜Ζ΄ͱΜͲͷߋ৽͸
    ฤूऀ͕؅ཧը໘ͰهࣄΛߋ৽ͨ͠ͱ͖

    View Slide



  22. w هࣄ͕όζ͍ͬͯΔ࣌΄ͲΞΫηεͷہॴੑ͕ߴ·Δ
    w ߴ͍Ωϟογϡώοτ཰͕ظ଴Ͱ͖ͦ͏

    View Slide

  23. Fastly Λલఏͱͨ͠ઃܭ

    View Slide

  24. ౰ॳ૝ఆ͍ͯͨ͠։ൃͷॱং


    w ࠷ॳ͸Ωϟογϡ͕ͳ͍ঢ়ଶͰಈ͘΋ͷΛ࡞Δ
    w ࣍ʹόοΫΤϯυΩϟογϡΛಋೖ
    w ࣍ʹ'BTUMZͷΩϟογϡΛಋೖ
    w ࠷ޙʹ4FSWJDF8PSLFSͷΩϟογϡΛಋೖ
    w Ԟ͔ΒखલͷॱʹΩϟογϡ͍ͯ͘͠
    w ઌʹखલͰΩϟογϡͯ͠͠·͏ͱԞͷΩϟο
    γϡͷಈ࡞֬ೝ͕೉͘͠ͳΔ

    View Slide

  25. 'BTUMZΛલఏͱͨ͠ઃܭ


    w $%/ͳΜͩ͠ޙ͔Βߟ͑Ε͹͍͍΍ͱࢥ͍ͬͯͨ
    w ࣮ࡍʹ͸'BTUMZલఏͰઃܭ͢΂͖ͩͬͨ
    w ࣮ଶ͸7BSOJTIBTB4FSWJDF
    w ͭ·Γϛυϧ΢ΣΞ
    w ϛυϧ΢ΣΞͳΒ͹ઃܭ౰ॳ͔Βௐࠪͯ͠ݕ౼͢
    Δͷ͸ී௨

    View Slide

  26. 'BTUMZલఏͰઃܭ͢΂͖ཧ༝



    αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ
    ͕ҟͳΔίϯϙʔωϯτ͸ඇಉظʹ͢΂͖͔ͩΒ

    όοΫΤϯυͷΩϟογϡ͸ͦ΋ͦ΋ෆཁʹͳΔՄೳ
    ੑ͕͋Δ͔Β

    ΞΫηεϥϯΩϯά΍ΞΫηεΧ΢ϯλΛ࡞Δ৔߹ɺ
    ൃ૝Λࠜຊతʹม͑Δඞཁ͕͋Δ͔Β

    View Slide

  27. 'BTUMZલఏͰઃܭ͢΂͖ཧ༝



    αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ
    ͕ҟͳΔίϯϙʔωϯτ͸ඇಉظʹ͢΂͖͔ͩΒ

    όοΫΤϯυͷΩϟογϡ͸ͦ΋ͦ΋ෆཁʹͳΔՄೳ
    ੑ͕͋Δ͔Β

    ΞΫηεϥϯΩϯά΍ΞΫηεΧ΢ϯλΛ࡞Δ৔߹ɺ
    ൃ૝Λࠜຊతʹม͑Δඞཁ͕͋Δ͔Β

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. ϥΠϑαΠΫϧ͕ҟͳΔίϯϙʔωϯτ


    w ୯७ʹϖʔδΩϟογϡͯ͠͠·͏ͱQVSHF͕සൃ͠
    ͯΩϟογϡώοτ཰͕௿͘ͳΔ
    w هࣄϖʔδ͸਺ઍ͋Δ
    w ͢΂ͯҰ࣌ؒʹҰճQVSHF͞Εͯ͠·͏
    w αΠυόʔΛඇಉظʹͯ͠هࣄϖʔδ͔Β੾Γ཭͢
    w ͋Δ͍͸&4* &EHF4JEF*ODMVEFT
    Λ࢖͏

    View Slide

  33. ඇಉظWT&4*


    w ࠓճͷ৔߹ɺαΠυόʔͷϦιʔε͸4&0తʹෆཁ
    w ϥϯΩϯάͷදࣔ͸هࣄͷ4&0ରࡦͱ͸ؔ܎ͳ͍
    w ඇಉظͰऔಘ͢Δ͜ͱʹͨ͠
    w 4&0తʹॏཁͳϦιʔεͩͬͨΒ&4*Λ࢖͏͔͠ͳ͍
    w IUUQTEPDTGBTUMZDPNHVJEFTQFSGPSNBODF
    UVOJOHVTJOHFEHFTJEFJODMVEFT

    View Slide

  34. ͜ΕΛ React, Redux ͰͲ͏දݱ͢Δ͔

    View Slide



  35. w αΠυόʔΛඇಉظʹ͢Δ'BTUMZʹΩϟογϡͤ͞
    ͨ͘ͳ͍ίϯϙʔωϯτΛ443͔Βআ֎͢Δ
    w ෦෼443
    ෦෼44341"Ͱ443͢Δ͚ͲαΠυόʔ͚ͩ͸ඇಉظͰ
    औಘ͍ͨ͠2JJUB
    IUUQTRJJUBDPNUUBOJNJDIJJUFNTBFDBEE

    View Slide

  36. (&5BSUJDMFT
    αΠυόʔΛআ֎ͯ͠443ͨ݁͠ՌΛ'BTUMZ͕Ωϟογϡ

    View Slide



  37. // Layout.js
    class Layout extends React.Component {
    + componentDidMount() {
    + this.props.fetchAside();
    + }
    render() {
    return (
    // snip
    );
    }
    }
    Layout.propTypes = {
    fetchAside: PropTypes.func.isRequired,
    };
    DPNQPOFOU%JE.PVOUͰEJTQBUDI

    View Slide



  38. // actions/fetchAside.js
    import fetchResource from '../utils/fetchResource';
    export default function fetchAside() {
    return {
    type: 'FETCH_ASIDE',
    payload: fetchResource('/api/v1/async/aside'),
    };
    }
    3FEVYͷBDUJPODSFBUPS

    View Slide



  39. // utils/fetchResource.js
    export default async function fetchResource(path) {
    const response = await fetch(path);
    return response.json();
    }
    4FSWJDF8PSLFSΛ࢖͏༧ఆͳͷͰGFUDI
    w 'BTUMZͰ443Ͱ͖Δͱ΋ͬͱγϯϓϧʹͰ͖ͦ͏
    w &EHFͰ443
    w TBOECPY

    View Slide

  40. 'BTUMZલఏͰઃܭ͢΂͖ཧ༝



    αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ
    ͕ҟͳΔίϯϙʔωϯτ͸ඇಉظʹ͢΂͖͔ͩΒ

    όοΫΤϯυͷΩϟογϡ͸ͦ΋ͦ΋ෆཁʹͳΔՄೳ
    ੑ͕͋Δ͔Β

    ΞΫηεϥϯΩϯά΍ΞΫηεΧ΢ϯλΛ࡞Δ৔߹ɺ
    ൃ૝Λࠜຊతʹม͑Δඞཁ͕͋Δ͔Β

    View Slide

  41. όοΫΤϯυΩϟογϡ͸ෆཁ͔΋


    w .FNDBDIFE΍3FEJTͳͲͷΩϟογϡ
    w 3BJMTͳΒ.FN$BDIF4UPSFͳͲ
    w ͦ΋ͦ΋PSJHJOʹϦΫΤετ͕΄ͱΜͲདྷͳ͍৔߹
    w 'BTUMZͷΩϟογϡͱQVSHFͷ৚͕݅ॏෳ͢Δ৔߹
    w සൟʹߋ৽͞ΕΔϦιʔεΛ͘͝୹࣌ؒΩϟογϡ͢Δ
    ͳͲͷ༻్͕͋Δ৔߹͸༗༻͔΋

    View Slide

  42. 'BTUMZલఏͰઃܭ͢΂͖ཧ༝



    αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ
    ͕ҟͳΔίϯϙʔωϯτ͸ඇಉظʹ͢΂͖͔ͩΒ

    όοΫΤϯυͷΩϟογϡ͸ͦ΋ͦ΋ෆཁʹͳΔՄೳ
    ੑ͕͋Δ͔Β

    ΞΫηεϥϯΩϯά΍ΞΫηεΧ΢ϯλΛ࡞Δ৔߹ɺ
    ൃ૝Λࠜຊతʹม͑Δඞཁ͕͋Δ͔Β

    View Slide

  43. ΞΫηεΧ΢ϯλΞΫηεϥϯΩϯά


    w αʔόʔϩάܕͷΞΫηεΧ΢ϯλ
    w 'BTUMZ͕Ωϟογϡ͍ͯ͠Δ৔߹
    w 4FSWJDF8PSLFS͕Ωϟογϡ͍ͯ͠Δ৔߹
    w PSJHJO·ͰϦΫΤετ͕ಧ͔ͳ͍৔߹͕͋ΔͷͰਖ਼ৗ
    ʹಈ͔ͳ͍
    w Ϗʔίϯܕʹ͢Δ

    View Slide

  44. αʔόʔϩάܕWTϏʔίϯܕ


    w αʔόʔϩάܕΞΫηεϩά
    w Ϗʔίϯܕදࣔ࣌ʹϒϥ΢β͔Β"1*Λୟ͍ͯΞΫηε
    ਺ΛՃࢉ͢Δ
    w ࠓճͷ৔߹ɺϏʔίϯܕͰɺΞΫηεϥϯΩϯά͸
    3FEJTͷ4PSUFE4FUͰ࣮૷
    w Ωϟογϡ͞ΕΔͱා͍ͷͰ1045ʹͨ͠
    w (PPHMF"OBMZUJDT͔ΒΞΫηε਺Λऔಘ͢Δͱ͍͏Ҋ
    ΋͋Δ͔΋

    View Slide

  45. Service Worker (PWA)

    View Slide

  46. 4FSWJDF8PSLFS 18"



    w ·ͩಋೖͰ͖͍ͯͳ͍ɻޙ೔௥Ճ͢Δ༧ఆ
    w YISͰ͸ͳ͘GFUDIΛ࢖͏ͳͲɺ४උ͸͍ͯ͠Δ
    w 4FSWJDF8PSLFS͕Ωϟογϡ͍ͯ͠Ε͹4FSWJDF
    8PSLFS͕ϨεϙϯεΛฦ͢
    w 'BTUMZ͕Ωϟογϡ͍ͯ͠Ε͹'BTUMZ͕ฦ͢
    w खલͰΩϟογϡ͞Ε͍ͯΔ΄Ͳ଎͍
    w ۃྗखલͰϨεϙϯεΛฦ͍ͨ͠

    View Slide

  47. ·ͱΊ


    w ΩϟογϡΛલఏʹઃܭ͢Δ
    w ߴ͍Ωϟογϡώοτ཰
    w ߴ଎Խ
    w ΞΫηεΧ΢ϯλͳͲ͸ΩϟογϡΛߟྀ࣮ͯ͠૷͠
    ͳ͍ͱద੾ʹಈ͔ͳ͍৔߹͕͋Δ

    View Slide

  48. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠


    3FBDUɺ3FEVYɺ18"ͰϝσΟΞ։ൃ͢Δ
    ϑϩϯτΤϯδχΞΛืूʂ8BOUFEMZ
    IUUQTXXXXBOUFEMZDPNQSPKFDUT
    3BJMTŊ3FBDUͰ41"ͷϝσΟΞΛ
    ։ൃ͢ΔΤϯδχΞΛืू8BOUFEMZ
    IUUQTXXXXBOUFEMZDPNQSPKFDUT

    View Slide