BFFを導入しなかった理由

UIT#3 The “Backends for Frontends” sharing

Transcript

1. ©2018 Wantedly, Inc.
   BFFΛಋೖ͠ͳ͔ͬͨཧ༝
   ๻Βʹ͸·ͩૣ͔ͬͨ
   UIT#3 The “Backends for Frontends” sharing
   2018/06/07 - Kento Moriwaki
   

   View Slide

2. ©2018 Wantedly, Inc.
   ࣗݾ঺հ
   Kento Moriwaki
   twitter: @kento_trans_lu
   WantedlyͷϑϩϯτΤϯυΛϦʔυ͍ͯ͠·͢
   ໿2೥൒લʹReactΛಋೖ͠ɺݱࡏࣾһ5ਓͷϑϩϯτΤϯυνʔϜ͕Ͱ͖͍ͯ·͢
   όοΫΤϯυ΋ͦΕͳΓʹॻ͖·͢
   ࠷ۙ͸React Nativeͷಋೖ͠·ͨ͠
   https://www.wantedly.com/users/1468880
   

   View Slide

3. ©2018 Wantedly, Inc.
   ϓϩδΣΫτ֓ཁ
   ձࣾϖʔδϦχϡʔΞϧ
   • ͍ΘΏΔWYSIWYGͰΠϯλϥΫςΟϒੑߴ͍
   • ͍ͭ΋௨ΓReact࢖͍͍ͨ
   • SEOͷཁɻॳظମݧͱͯ͠εϐʔυ΋େࣄ
   • SSR͸ඞਢ͔ͳ
   • 2ਓͰ2ϲ݄
   • TypeScriptಋೖͳͲɺελοΫΛಉ࣌ʹݟ௚͢͜
   ͱ΋ܾ·͍ͬͯΔ
   • ༨༟͸ͳ͍ʂ
   

   View Slide

4. ©2018 Wantedly, Inc.
   ҰຕؠͷRailsͰɺMicroserviceԽΛਐΊ͍ͯΔ
   • ·ͩ·ͩMicroserviceͱ͸ݺ΂ͳ͍
   • όοΫΤϯυͱϑϩϯτΤϯυͷ੹຿͸෼͚͍͖͍ͯͨ
   RESTful API͕͋Δ
   • ΞϓϦͰ࢖ΘΕ͍ͯΔͷͰɺࠓճͷϓϩδΣΫτͰ΋͜ΕΛ࢖͍͍ͨɻ
   • Rails ΞϓϦʹ RESTful API ͷϨʔϧΛෑ͍ͯੜ࢈ੑ͕େ্͖͕ͬͨ͘࿩
   WantedlyͷΞʔΩςΫνϟ(Wantedly Visitͷ৔߹)
   

   View Slide

5. ©2018 Wantedly, Inc.
   #''ͷग़൪ʂ
   

   View Slide

6. ©2018 Wantedly, Inc.
   3BJMT
   #SPXTFS
   %#
   3FWFSTF
   1SPYZ
   #''
   443
   
   3FBDUϖʔδ
   "1*
   3BJMTϖʔδ
   ߏ੒ॳظҊ
   

   View Slide

7. ©2018 Wantedly, Inc.
   άϩʔόϧϔομʔ΍ϑολʔ͸શϖʔδڞ௨
   • ࠓճSSRԽ͍ͨ͠ͷ͸ɺશମͷ͏ͪͷձࣾϖʔδ͚ͩ
   • ϖʔδ਺͸ΊͪΌͪ͘Ό͋Δ
   • ৮Βͳ͍ϖʔδ͸ͦͷ··ʹ͍ͨ͠
   • ϔομʔ͕Ҋ֎ߴػೳ
   ՝୊1: ڞ௨ύʔπ໰୊
   

   View Slide

8. ©2018 Wantedly, Inc.
   શϖʔδڞ௨ͷύʔπ: Rails + jQuery
   ϖʔδίϯςϯπ: React (SSR)
   as-you-typeͳݕࡧ
   ௨஌(όοδ΍ະಡ؅ཧ)
   ϝοηʔδ؅ཧ
   ͭͳ͕Γ؅ཧ
   ΞΧ΢ϯτ੾Γସ͑
   ݸਓϞʔυͱձࣾϞʔυͰσβΠϯ΍ػೳ͕ҧ͏
   

   View Slide

9. ©2018 Wantedly, Inc.
   1. ReactόʔδϣϯΛ࡞Δʁ
   • Rails + jQuery൛ͱ2ॏͰ؅ཧ͢Δ͜ͱʹͳΔ
   2. શ෦React࣮૷ʹ౷Ұ͢Ε͹ʁ
   • ୯७ͳ΄΅੩తϖʔδʹ΋ReactೖΕͪΌ͏ʁ -> ແବʹେ͖ͳJSಡΈࠐΈ͸Α͘ͳ͍
   • ·ͩAngular͕࢒ͬͯΔϖʔδͱ͔͋Δɻ -> Reactͱڞଘͱ͔ຊ౰ʹΑ͘ͳ͍
   ՝୊1: ڞ௨ύʔπ໰୊
   

   View Slide

10. ©2018 Wantedly, Inc.
    Ͳ͏΍ͬͯdeploy͢Δʁ
    • ݱঢ়͸ɺwebpackͰbuildͯ͠ɺdeploy͸Railsʹࡌ͍ͤͯΔ
    • طଘͷCSR onlyͷReactͱ׬શʹ෼͚ΔʁBFFͷߋ৽ͱRailsଆͷmanifestߋ৽ΛҰॹʹߦ
    ͏ʁͲͪΒʹͤΑdeployϑϩʔΛݟ௚͢ඞཁ͕͋Γͦ͏
    ஈ֊తʹಋೖ͍ͨ͠
    • Ұ෦اۀ͔Βͱ͔ɺւ֎͸ޙͰͱ͔ɺ༷ʑͳ৚݅Ͱ৽چͷϏϡʔΛ੾Γସ͍͑ͨ
    • BFFͰ΍ΔͳΒɺALB(Reverse Proxy)Ͱ΍ΔʁͦΕͱ΋BFFͰProxyతʹ΍Δʁ
    ՝୊2: Πϯϑϥઃܭ໰୊
    

    View Slide

11. ©2018 Wantedly, Inc.
    ࠳ંɻ
    ࠓ͸·ͩͦͷ࣌Ͱ͸ͳ͔ͬͨ
    

    View Slide

12. ©2018 Wantedly, Inc.
    1. Server side rendering
    • Ϣʔβʔମݧͷ޲্ͱ҆ఆͨ͠SEOͷͨΊʹඞཁͩͬͨ
    • BFF͡Όͳͯ͘΋ɺςϯϓϨʔτͷڞ௨Խ͕Ͱ͖Ε͹͍͍
    2. Aggregate data
    • SSRʹඞཁͳσʔλΛޮ཰తΛूΊ͍ͨ
    • طଘͷRESTful API͕࢖͍͔ͨͬͨͷ͸ɺίʔυͷॏෳΛආ͚͔͔ͨͬͨΒ
    • ࠓ͸APIαʔόʔ͸ҰͭͳͷͰɺSSR͡Όͳ͍৔߹͸௚઀RESTful APIୟ͍ͯ΋໰୊ͳ͍
    ΋ͱ΋ͱBFFͰ΍Γ͔ͨͬͨ͜ͱ͸2ͭ
    

    View Slide

13. ©2018 Wantedly, Inc.
    ͜ΕΒͷཁ݅Λຬͨͭͭ͠
    ࠷খݶͷ޻਺Ͱ
    • BFF͸໨త͡Όͳͯ͘खஈ
    • ໨త͸ձࣾϖʔδͷϦχϡʔΞϧͰϢʔβʔʹՁ஋Λಧ͚Δ͜ͱ
    কདྷతʹҰਓલͷBFFʹͳΕΔΑ͏ʹ
    • ຊؾͰ΍Δͱ͖ͷίετΛখ͍ͨ͘͞͠
    • ͦͷ৔͠ͷ͗ͷରԠͰෛ࠴ʹ͠ͳ͍
    ࣮ࡍʹಋೖͨ͠ΞʔΩςΫνϟ
    

    View Slide

14. ©2018 Wantedly, Inc.
    )ZQFSOPWB
    #SPXTFS
    %#
    3BJMT
    3FBDUϖʔδ
    "1*
    3BJMTϖʔδ
    ࣮ࡍʹಋೖͨ͠ΞʔΩςΫνϟ
    ૿͑ͨͷ͸͍͚ͭͩ͜
    

    View Slide

15. ©2018 Wantedly, Inc.
    SSR͢Δ͚ͩͷϚΠΫϩαʔϏε
    • Airbnb͕։ൃ͍ͯ͠Δ
    SSRʹඞཁͳσʔλΛड͚ɺSSRͨ݁͠ՌΛฦ͢
    • த਎͸͘͢͝୯७ͳnodeαʔόʔ
    What is Hypernova?
    

    View Slide

16. ©2018 Wantedly, Inc.
    1. controllerͰSSRʹඞཁͳσʔλΛ༻ҙ͢Δ
    2. Hypernovaʹ౤͛ͯHTMLจࣈྻΛड͚औΔ
    3. Layoutʹ͸ΊࠐΜͰϒϥ΢βʹฦ͢
    Steps to server side rendering
    

    View Slide

17. ©2018 Wantedly, Inc.
    SSRʹඞཁͳσʔλΛޮ཰Α͘ूΊ͍ͨ
    • RESTful APIΛୟ͍ͯɺෳ਺ͷσʔλΛूΊ͍ͨ
    • Railsͷத͔Βɺࣗ਎ͷRESTful APIʹϦΫΤετ౤͛Δʁ
    • γϯάϧεϨου/γϯάϧϓϩηεͰ͸Ͱ͖ͳ͍ɻ։ൃ͕೉͘͠ͳΔ
    • RESTful APIͱୟ͘ͷͱಉ͡Α͏ͳॲཧ͕಺෦ͰͰ͖Ε͹͍͍
    • Ͱ͖Δ͚ͩॏෳͨ͠ίʔυΛॻ͔ͣʹ
    Aggregate data
    

    View Slide

18. ©2018 Wantedly, Inc.
    • ؔ৺ͷ͋ΔϦιʔεͷModelΛಡΈࠐΉ
    • ϦΫΤετύϥϝʔλ͔ΒN+1Λղܾ͢Δ ← ಺෦ϥΠϒϥϦԽ͞Ε͍ͯΔ
    • ModelΛJSONʹม׵͢Δ ← Serializerʹ੾Γग़͞Ε͍ͯΔ
    • ͨ·ʹෳࡶͳॲཧ ← Serviceʹ੾Γग़͞Ε͍ͯΔ
    ControllerΛബ͓͍͓͔ͯͨ͛͘͠Ͱɺ΄ͱΜͲͷ
    ॲཧΛڞ௨ԽͰ͖Δ
    RESTful API͕΍͍ͬͯͨ͜ͱ
    

    View Slide

19. ©2018 Wantedly, Inc.
    • ؔ৺ͷ͋ΔϦιʔεΛಡΈࠐΉ͚ͩ
    • render_reactͰɺHypernovaʹϦΫΤ
    ετ౤͛ͯɺ݁ՌΛLayoutʹ͸ΊࠐΉ͜
    ͱΛ͍ͯ͠Δ
    • ͲͷϑΟʔϧυ͕ඞཁ͔ͳͲ͸ɺ
    show.ymlͱ͍͏ϑΝΠϧʹผͰॻ͘
    • RESTful APIͱಉ͡࢓૊ΈͰࣗಈతʹN+1
    Λղܾͯ͘͠ΕΔ
    ControllerͰ࣮ࡍʹ΍ͬͨ͜ͱ
    

    View Slide

20. ©2018 Wantedly, Inc.
    • ͦΕͧΕରԠ͢ΔAPIΛୟ͘Α͏ʹ
    ॻ͖׵͑Δ͚ͩ
    • Renderͷ෦෼͸Hypernovaʹࡌ
    ͤͨ··΋Մೳ
    • ΋ͪΖΜBFF಺Ͱ௚઀render͢Δ
    ͜ͱ΋Մೳ
    BFFʹͨ͘͠ͳͬͨΒ(ࠓޙ)
    

    View Slide

21. ©2018 Wantedly, Inc.
    RailsͷίϯςφͱHypernovaΛಉډͤͨ͞
    • Hypernova಺Ͱ͸Network I/O͸ͳ͍ͷͰɺHTML૊ΈཱͯͷCPUॲཧ͕Ruby͔Βnode
    ʹҠಈ͚ͨͩ͠
    • ΋ͪΖΜผίϯςφʹ෼͚ΕΔͳΒ෼͚ͨ΄͏͕͍͍
    Dockerfileʹ਺ߦ௥Ճ͚ͨͩ͠
    • HypernovaΛlocalhostͰىಈ͢ΔίϚϯυΛ௥Ճͨ͠
    ΠϯϑϥपΓͷมߋ͸΄ͱΜͲͳ͔ͬͨ
    

    View Slide

22. ©2018 Wantedly, Inc.
    • ControllerͷதͰifจͰ؆୯ʹ੾Γ
    ସ͑ΒΕΔ
    ஈ֊తͳ੾Γସ͑
    

    View Slide

23. ©2018 Wantedly, Inc.
    1. ϨΠΞ΢τΛRails͔ΒҾ͖ണ͕͢
    • ϔομʔ΍ϑολʔΛReact࣮૷ʹஔ͖׵͑Δ
    • શϖʔδΛReactड͚ೖΕՄೳʹ͢ΔɻAngular͝ΊΜͳ͍͞ɻ
    • Layout͚ͩ૊ΉBFFΛ͍ΕͯɺRailsଆ͸Layoutͳ͠Ͱฦ͢ɻ͜ͷ࣌఺Ͱ͸·ͩHypernova
    ࢖͓ͬͯ͘
    2. ControllerͷॲཧΛBFFʹҠ͢
    • ୤Hypernova͸೉͘͠ͳ͍
    BFF΁ͷಓͷΓ(૝ఆ)
    

    View Slide

24. ©2018 Wantedly, Inc.
    1. SSR͍͚ͨͩ͠ͳΒBFF͸ඞਢ͡Όͳ͍
    • ౰ͨΓલͷ͜ͱ͚ͩͲɺແཧͯ͠ಋೖΛਐΊͳ͍ͰΑ͔ͬͨ
    2. Ұؾʹಋೖ͢Δͷ͸େม͚ͩͲɺૄ݁߹Λҙࣝ͠
    ͯҰาͮͭਐΜͰ͍͜͏
    • ڧ͍ϑϩϯτΤϯυνʔϜΛ࡞ΔͨΊʹɺ΍ͬͺΓBFFԽ͸ͪΌΜͱਐΊ͍͖͍ͯͨ
    • ΋͏ͪΐͬͱৄ͘͠ϒϩάʹॻ͍ͯ·͢
    ·ͱΊ
    

    View Slide

25. ©2018 Wantedly, Inc.
    • ҰॹʹBFF࣮ݱͯ͘͠ΕΔํWanted!
    We are hiring!
    

    View Slide