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

BFFを導入しなかった理由

 BFFを導入しなかった理由

UIT#3 The “Backends for Frontends” sharing

Kento Moriwaki

June 07, 2018
Tweet

More Decks by Kento Moriwaki

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide