BFFを導入しなかった理由

Transcript

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

   sharing 2018/06/07 - Kento Moriwaki

2. ©2018 Wantedly, Inc. ࣗݾ঺հ Kento Moriwaki twitter: @kento_trans_lu WantedlyͷϑϩϯτΤϯυΛϦʔυ͍ͯ͠·͢ ໿2೥൒લʹReactΛಋೖ͠ɺݱࡏࣾһ5ਓͷϑϩϯτΤϯυνʔϜ͕Ͱ͖͍ͯ·͢

   όοΫΤϯυ΋ͦΕͳΓʹॻ͖·͢ ࠷ۙ͸React Nativeͷಋೖ͠·ͨ͠ https://www.wantedly.com/users/1468880

3. ©2018 Wantedly, Inc. ϓϩδΣΫτ֓ཁ ձࣾϖʔδϦχϡʔΞϧ • ͍ΘΏΔWYSIWYGͰΠϯλϥΫςΟϒੑߴ͍ • ͍ͭ΋௨ΓReact࢖͍͍ͨ •

   SEOͷཁɻॳظମݧͱͯ͠εϐʔυ΋େࣄ • SSR͸ඞਢ͔ͳ • 2ਓͰ2ϲ݄ • TypeScriptಋೖͳͲɺελοΫΛಉ࣌ʹݟ௚͢͜ ͱ΋ܾ·͍ͬͯΔ • ༨༟͸ͳ͍ʂ

4. ©2018 Wantedly, Inc. ҰຕؠͷRailsͰɺMicroserviceԽΛਐΊ͍ͯΔ • ·ͩ·ͩMicroserviceͱ͸ݺ΂ͳ͍ • όοΫΤϯυͱϑϩϯτΤϯυͷ੹຿͸෼͚͍͖͍ͯͨ RESTful API͕͋Δ

   • ΞϓϦͰ࢖ΘΕ͍ͯΔͷͰɺࠓճͷϓϩδΣΫτͰ΋͜ΕΛ࢖͍͍ͨɻ • Rails ΞϓϦʹ RESTful API ͷϨʔϧΛෑ͍ͯੜ࢈ੑ͕େ্͖͕ͬͨ͘࿩ WantedlyͷΞʔΩςΫνϟ(Wantedly Visitͷ৔߹)

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

6. ©2018 Wantedly, Inc. 3BJMT #SPXTFS %# 3FWFSTF
   
   1SPYZ #''
   
   443

   3FBDUϖʔδ "1* 3BJMTϖʔδ ߏ੒ॳظҊ

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

   • ϔομʔ͕Ҋ֎ߴػೳ ՝୊1: ڞ௨ύʔπ໰୊

8. ©2018 Wantedly, Inc. શϖʔδڞ௨ͷύʔπ: Rails + jQuery ϖʔδίϯςϯπ: React (SSR)

   as-you-typeͳݕࡧ ௨஌(όοδ΍ະಡ؅ཧ) ϝοηʔδ؅ཧ ͭͳ͕Γ؅ཧ ΞΧ΢ϯτ੾Γସ͑ ݸਓϞʔυͱձࣾϞʔυͰσβΠϯ΍ػೳ͕ҧ͏

9. ©2018 Wantedly, Inc. 1. ReactόʔδϣϯΛ࡞Δʁ • Rails + jQuery൛ͱ2ॏͰ؅ཧ͢Δ͜ͱʹͳΔ 2.

   શ෦React࣮૷ʹ౷Ұ͢Ε͹ʁ • ୯७ͳ΄΅੩తϖʔδʹ΋ReactೖΕͪΌ͏ʁ -> ແବʹେ͖ͳJSಡΈࠐΈ͸Α͘ͳ͍ • ·ͩAngular͕࢒ͬͯΔϖʔδͱ͔͋Δɻ -> Reactͱڞଘͱ͔ຊ౰ʹΑ͘ͳ͍ ՝୊1: ڞ௨ύʔπ໰୊

10. ©2018 Wantedly, Inc. Ͳ͏΍ͬͯdeploy͢Δʁ • ݱঢ়͸ɺwebpackͰbuildͯ͠ɺdeploy͸Railsʹࡌ͍ͤͯΔ • طଘͷCSR onlyͷReactͱ׬શʹ෼͚ΔʁBFFͷߋ৽ͱRailsଆͷmanifestߋ৽ΛҰॹʹߦ ͏ʁͲͪΒʹͤΑdeployϑϩʔΛݟ௚͢ඞཁ͕͋Γͦ͏

    ஈ֊తʹಋೖ͍ͨ͠ • Ұ෦اۀ͔Βͱ͔ɺւ֎͸ޙͰͱ͔ɺ༷ʑͳ৚݅Ͱ৽چͷϏϡʔΛ੾Γସ͍͑ͨ • BFFͰ΍ΔͳΒɺALB(Reverse Proxy)Ͱ΍ΔʁͦΕͱ΋BFFͰProxyతʹ΍Δʁ ՝୊2: Πϯϑϥઃܭ໰୊

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

12. ©2018 Wantedly, Inc. 1. Server side rendering • Ϣʔβʔମݧͷ޲্ͱ҆ఆͨ͠SEOͷͨΊʹඞཁͩͬͨ •

    BFF͡Όͳͯ͘΋ɺςϯϓϨʔτͷڞ௨Խ͕Ͱ͖Ε͹͍͍ 2. Aggregate data • SSRʹඞཁͳσʔλΛޮ཰తΛूΊ͍ͨ • طଘͷRESTful API͕࢖͍͔ͨͬͨͷ͸ɺίʔυͷॏෳΛආ͚͔͔ͨͬͨΒ • ࠓ͸APIαʔόʔ͸ҰͭͳͷͰɺSSR͡Όͳ͍৔߹͸௚઀RESTful APIୟ͍ͯ΋໰୊ͳ͍ ΋ͱ΋ͱBFFͰ΍Γ͔ͨͬͨ͜ͱ͸2ͭ

13. ©2018 Wantedly, Inc. ͜ΕΒͷཁ݅Λຬͨͭͭ͠ ࠷খݶͷ޻਺Ͱ • BFF͸໨త͡Όͳͯ͘खஈ • ໨త͸ձࣾϖʔδͷϦχϡʔΞϧͰϢʔβʔʹՁ஋Λಧ͚Δ͜ͱ কདྷతʹҰਓલͷBFFʹͳΕΔΑ͏ʹ

    • ຊؾͰ΍Δͱ͖ͷίετΛখ͍ͨ͘͞͠ • ͦͷ৔͠ͷ͗ͷରԠͰෛ࠴ʹ͠ͳ͍ ࣮ࡍʹಋೖͨ͠ΞʔΩςΫνϟ

14. ©2018 Wantedly, Inc. )ZQFSOPWB #SPXTFS %# 3BJMT 3FBDUϖʔδ "1* 3BJMTϖʔδ

    ࣮ࡍʹಋೖͨ͠ΞʔΩςΫνϟ ૿͑ͨͷ͸͍͚ͭͩ͜

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

    is Hypernova?

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

    to server side rendering

17. ©2018 Wantedly, Inc. SSRʹඞཁͳσʔλΛޮ཰Α͘ूΊ͍ͨ • RESTful APIΛୟ͍ͯɺෳ਺ͷσʔλΛूΊ͍ͨ • Railsͷத͔Βɺࣗ਎ͷRESTful APIʹϦΫΤετ౤͛Δʁ

    • γϯάϧεϨου/γϯάϧϓϩηεͰ͸Ͱ͖ͳ͍ɻ։ൃ͕೉͘͠ͳΔ • RESTful APIͱୟ͘ͷͱಉ͡Α͏ͳॲཧ͕಺෦ͰͰ͖Ε͹͍͍ • Ͱ͖Δ͚ͩॏෳͨ͠ίʔυΛॻ͔ͣʹ Aggregate data

18. ©2018 Wantedly, Inc. • ؔ৺ͷ͋ΔϦιʔεͷModelΛಡΈࠐΉ • ϦΫΤετύϥϝʔλ͔ΒN+1Λղܾ͢Δ ← ಺෦ϥΠϒϥϦԽ͞Ε͍ͯΔ •

    ModelΛJSONʹม׵͢Δ ← Serializerʹ੾Γग़͞Ε͍ͯΔ • ͨ·ʹෳࡶͳॲཧ ← Serviceʹ੾Γग़͞Ε͍ͯΔ ControllerΛബ͓͍͓͔ͯͨ͛͘͠Ͱɺ΄ͱΜͲͷ ॲཧΛڞ௨ԽͰ͖Δ RESTful API͕΍͍ͬͯͨ͜ͱ

19. ©2018 Wantedly, Inc. • ؔ৺ͷ͋ΔϦιʔεΛಡΈࠐΉ͚ͩ • render_reactͰɺHypernovaʹϦΫΤ ετ౤͛ͯɺ݁ՌΛLayoutʹ͸ΊࠐΉ͜ ͱΛ͍ͯ͠Δ •

    ͲͷϑΟʔϧυ͕ඞཁ͔ͳͲ͸ɺ show.ymlͱ͍͏ϑΝΠϧʹผͰॻ͘ • RESTful APIͱಉ͡࢓૊ΈͰࣗಈతʹN+1 Λղܾͯ͘͠ΕΔ ControllerͰ࣮ࡍʹ΍ͬͨ͜ͱ

20. ©2018 Wantedly, Inc. • ͦΕͧΕରԠ͢ΔAPIΛୟ͘Α͏ʹ ॻ͖׵͑Δ͚ͩ • Renderͷ෦෼͸Hypernovaʹࡌ ͤͨ··΋Մೳ •

    ΋ͪΖΜBFF಺Ͱ௚઀render͢Δ ͜ͱ΋Մೳ BFFʹͨ͘͠ͳͬͨΒ(ࠓޙ)

21. ©2018 Wantedly, Inc. RailsͷίϯςφͱHypernovaΛಉډͤͨ͞ • Hypernova಺Ͱ͸Network I/O͸ͳ͍ͷͰɺHTML૊ΈཱͯͷCPUॲཧ͕Ruby͔Βnode ʹҠಈ͚ͨͩ͠ • ΋ͪΖΜผίϯςφʹ෼͚ΕΔͳΒ෼͚ͨ΄͏͕͍͍

    Dockerfileʹ਺ߦ௥Ճ͚ͨͩ͠ • HypernovaΛlocalhostͰىಈ͢ΔίϚϯυΛ௥Ճͨ͠ ΠϯϑϥपΓͷมߋ͸΄ͱΜͲͳ͔ͬͨ

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

23. ©2018 Wantedly, Inc. 1. ϨΠΞ΢τΛRails͔ΒҾ͖ണ͕͢ • ϔομʔ΍ϑολʔΛReact࣮૷ʹஔ͖׵͑Δ • શϖʔδΛReactड͚ೖΕՄೳʹ͢ΔɻAngular͝ΊΜͳ͍͞ɻ •

    Layout͚ͩ૊ΉBFFΛ͍ΕͯɺRailsଆ͸Layoutͳ͠Ͱฦ͢ɻ͜ͷ࣌఺Ͱ͸·ͩHypernova ࢖͓ͬͯ͘ 2. ControllerͷॲཧΛBFFʹҠ͢ • ୤Hypernova͸೉͘͠ͳ͍ BFF΁ͷಓͷΓ(૝ఆ)

24. ©2018 Wantedly, Inc. 1. SSR͍͚ͨͩ͠ͳΒBFF͸ඞਢ͡Όͳ͍ • ౰ͨΓલͷ͜ͱ͚ͩͲɺແཧͯ͠ಋೖΛਐΊͳ͍ͰΑ͔ͬͨ 2. Ұؾʹಋೖ͢Δͷ͸େม͚ͩͲɺૄ݁߹Λҙࣝ͠ ͯҰาͮͭਐΜͰ͍͜͏

    • ڧ͍ϑϩϯτΤϯυνʔϜΛ࡞ΔͨΊʹɺ΍ͬͺΓBFFԽ͸ͪΌΜͱਐΊ͍͖͍ͯͨ • ΋͏ͪΐͬͱৄ͘͠ϒϩάʹॻ͍ͯ·͢ ·ͱΊ

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