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

BFFを導入しなかった理由

 BFFを導入しなかった理由

UIT#3 The “Backends for Frontends” sharing

20451aa93aace2f5279f5ea2e7a9c89d?s=128

Kento Moriwaki

June 07, 2018
Tweet

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!