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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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