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

Fastly Yamagoya Meetup 2018

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