WebαʔϏεͷॳظ։ൃͱϚΠΫϩαʔϏεɾBFF Microservices Meetup vol.5 2017/3/30 Akatsuki Inc.ɹߴদ ਅฏ

■ ߴদ ਅฏ (@shimpeiws) ■ WebΤϯδχΞ @ ΞΧπΩ LXࣄۀ෦ ɹɾRailsͱJavaScriptΛ൒ʑ͘Β͍ॻ͍͍ͯΔ ■ LX(ϥΠϒΤΫεϖϦΤϯε)ࣄۀ෦ ɹɾੈքதͷਓʑʹϥΠϒʢੜͷɺϦΞϧͳɺϫΫϫΫ͢Δʣ ɾΤΫεϖϦΤϯ εʢମݧʣΛఏڙ͢ΔࣄۀͰ͢ɻ ࢲ͸୭

໨࣍ 1. ཁ݅ͱΞʔΩςΫνϟ 3. BFFͷϓϩτλΠϓ࣮૷ 2. ॳظ։ൃͰͷબ୒ͱूதͱෛ࠴

1. ཁ݅ͱΞʔΩςΫνϟ

৽ن։ൃதͷαʔϏεͷ࿩

■ ػೳཁ݅ ɹɾWeb͔Βελʔτ͢Δ ɹɾޙ͔ΒωΠςΟϒΞϓϦ͕ग़ΔՄೳੑ͸ߴ͍ ɹɾtoC෦෼͸εϚʔτϑΥϯϢʔβ͕ଟ਺ͱ༧૝͞ΕΔ ɹɾϢʔβΠϯλϥΫγϣϯ͕ଟ͍UI ɹɾSEOʹڧ͍ૣͯ͘ߏ଄Խ͞ΕͨϚʔΫΞοϓ ɹɾݕࡧ͔Βͷྲྀೖͷൺॏ͕େ͖͍ ɹɾ௕ظతͳӡ༻ʹͳΔݟࠐΈ ɹɾߴ͍อकੑͱ(কདྷతͳ)εέʔϥϏϦςΟ͕ඞཁ ཁ݅ͱΞʔΩςΫνϟ

■ ΞʔΩςΫνϟ ɹɾWebϑϩϯτΤϯυ ɹɾSingle Page Applicationͱͯ͠ߏங ɹɾReact + Redux ɹɾIsomorphic JavaScript ͷߏ੒ͰɺαʔόαΠυϨϯμϦϯά ɹɾαʔόαΠυ ɹɾRails ɹɾMySQL ɹɾΠϯϑϥ ɹɾ Google Cloud Platform (Google Container Engine) ɹɾ KubernetesͰίϯςφӡ༻ ཁ݅ͱΞʔΩςΫνϟ

■ WebɺServerͷ2αʔϏεͰՔಇ͍ͯ͠Δ ཁ݅ͱΞʔΩςΫνϟ ReactͰSSR ಉҰιʔεͰΫϥΠΞϯτͰ΋ಈ࡞ ॳճΞΫηε͸HTTP

■ WebɺServerͷ2αʔϏεͰՔಇ͍ͯ͠Δ ཁ݅ͱΞʔΩςΫνϟ ௨৴͕ඞཁͳλΠϛϯάͰ XHR SPAͱͯ͠ಈ࡞

2. ։ൃॳظͰͷબ୒ͱूதͱ՝୊

■ ͜͜·Ͱͷ։ൃͷνʔϜɾ։ൃ಺༰ɾϋΠϥΠτ ։ൃॳظͰͷબ୒ͱूதͱ՝୊ 2016/9~2016/11 (্ཱͪ͛ظ) 2016/12~2017/3 (։ൃॳظ) 2017/4~ (։ൃதظ) νʔϜ - 1νʔϜ - αʔό + Web 4໊ - 1νʔϜ - αʔό + Web 5໊ - ϛογϣϯຖʹ4νʔϜ ʹ෼ׂ - ϢʔβܥɺαʔϏεج ൫ܥɺΠϯϑϥܥ… ։ൃ಺༰ - ։ൃϑϩʔ੔උ - QAɾProduction؀ڥߏங - جຊػೳΛҰ௨Γ - ΞΠςϜλΠϓͷ௥Ճ - ޱίϛͷ࣮૷ - શจݕࡧ(Elasticsearch) - όάɾෛ࠴Λएׯฦࡁ - άϩʔεϋοΫࢪࡦ - αʔϏεͷج൫ͱͳΔ ػೳͷ։ൃ - Πϯϑϥɾϛυϧ΢Σ ΞɾσϓϩΠͷ੔උ ϋΠϥΠτ - ΞʔΩςΫνϟɾઃܭ ࢦ਑ܾఆ - ։ൃϘϦϡʔϜ཈͖͑ Εͣࠞཚ - ΞʔΩςΫνϟʹେ͖ ͘ख͸ೖΕ͍ͯͳ͍ - εΫϥϜ։ൃͷӡ༻Λ ख୳Γ - νʔϜͷ෼ׂ - ϚΠΫϩαʔϏεԽͷ ਪਐ - த௕ظతͳӡ༻ͷ։࢝

։ൃॳظͰͷબ୒ͱूதͱ՝୊ ■ ͜͜·Ͱͷ։ൃͷ෼ྔ (ςετίʔυ͸আ͘) ݁ߏͳεϐʔυͰ։ൃΛਐΊͯདྷͨ 15,000ߦ(Ϟσϧ਺ 100ऑ) 60,000ߦ 25,000ߦ

։ൃॳظͰͷબ୒ͱूதͱ՝୊ ■ ্ཱͪ͛ظ ~ ։ൃॳظʹΞʔΩςΫνϟɾઃܭ্ߟ͍͑ͨ͜ͱ https://twitter.com/joker1007/status/831371523818614789

։ൃॳظͰͷબ୒ͱूதͱ՝୊ ■ ্ཱͪ͛ظ ~ ։ൃॳظͷબ୒ͱूத ɹɾશ໘తʹSingle Page Application + SSRͷߏ੒ʹ͢Δ ɹɾWhy ɹɾෳࡶͳϢʔβΠϯλϥΫγϣϯΛ࣮ݱ͍ͨ͠ ɹɾΠχγϟϧϏϡʔͷදࣔΛૣ͍ͨ͘͠ ɹɾWhat ɹɾSingle Page Application + SSRͷ࣮ݱ ɹɾHow ɹɾReact + Redux (on Isomorphic Javascript) ͷ࠾༻

։ൃॳظͰͷબ୒ͱूதͱ՝୊ ■ ্ཱͪ͛ظ ~ ։ൃॳظͷબ୒ͱूத ɹɾશ໘తʹSingle Page Application + SSRͷߏ੒ʹ͢Δ ɹɾPros ɹɾμΠφϛοΫͳWebϑϩϯτΤϯυΛ࡞Γ΍͍͢ ɹɾSPAͷߏ੒ͰҰຊԽͰ͖Δ(ϧʔςΟϯάɺState؅ཧ…) ɹɾCons ɹɾ։ൃ޻਺͕͔͔Δ (ྫ͑͹Rails(ERBͳͲ) + jQueryʹൺ΂ͯ) ɹɾNode.jsͷϑϩϯταʔό͕Ұ୆૿͑ɺσϓϩΠɾ؅ཧ͕ෳࡶԽͨ͠

։ൃॳظͰͷબ୒ͱूதͱ՝୊ ■ ্ཱͪ͛ظ ~ ։ൃॳظͷબ୒ͱूத ɹɾAPIઃܭͷ୯७Խ ɹɾWhy ɹɾνʔϜ։ൃ͕ͩɺυϝΠϯઃܭʹ͔͚Δ࣌ؒΛे෼ʹͱΕͳ͍ ɹɾը໘ʹ΂ͬͨΓͦͬͨAPIͰอकੑΛԼ͛ͨ͘ͳ͍ ɹɾWhat ɹɾ͔ͳΓࡉ͔ͳཻ౓ͰͷϦιʔεࢦ޲ઃܭͰ౷Ұ͢Δ ɹɾ(جຊతʹ)RESTful API ɹɾHow ɹɾ1Ϟσϧ = 1APIʹͳΔ͜ͱ͕ଟ͍ɺॏཁͳ(େ͖͍)΋ͷ͚ͩϦιʔε୯ҐΛઃܭ ɹɾॳظͷϨϏϡʔͰνʔϜ಺ͷҙࣝ౷ҰΛ͍ͯͬͨ͠

։ൃॳظͰͷબ୒ͱूதͱ՝୊ ■ ্ཱͪ͛ظ ~ ։ൃॳظͷબ୒ͱूத ɹɾAPIઃܭͷ୯७Խ ɹɾPros ɹɾը໘ʹ΂ͬͨΓͦͬͨAPI͸ආ͚ΒΕͨ ɹɾઃܭɾ࣮૷ָ͕Ͱόά΋গͳ͔ͬͨ ɹɾCons ɹɾΫϥΠΞϯταΠυͷ࣮૷ʹෛՙ͕Αͬͨ ɹ => ͜ͷ͋ͱͷ ”՝୊” ʹͮͮ͘

։ൃॳظͰͷબ୒ͱूதͱ՝୊ ■ ্ཱͪ͛ظ ~ ։ൃॳظͷબ୒ͱूதͷ݁Ռ࢒ͬͨ՝୊ ɹɾΫϥΠΞϯταΠυͷϦΫΤετɾϋϯυϦϯά͕ෳࡶԽ͢Δ 6ฒྻ ௚ྻ ௚ྻ ※͋Δৄࡉը໘ͷ࣮૷Πϝʔδ

ΞʔΩςΫνϟ্ͷղܾ༨஍͸ͷ͍ͬͯ͜Δ ͦ͏ɺBFFͳΒͶ!!!

։ൃॳظͰͷબ୒ͱूதͱ՝୊ ■ BFF(Backend For Frontend) ɹɾݩSound CloudͷPhil Calçado͕ఏএ ɹɾΫϥΠΞϯτͷछผຖʹதؒϨΠϠΛ࡞Δ “Pattern: Backends For Frontends” Sam Newman http://samnewman.io/patterns/architectural/bff/

■ BFFಋೖޙͷΞʔΩςΫνϟ ɹɾ2017೥தʹ͸͜Μͳײ͡ʹͳΔ??? ։ൃॳظͰͷબ୒ͱूதͱ՝୊

։ൃॳظͰͷબ୒ͱूதͱ՝୊ ■ ݁ہ։ൃॳظͰԿΛબ୒ͯ͠ɺࠓޙʹԿΛ࢒ͨ͠ͷ͔? ɹɾ։ൃॳظ ɹɾ্ཱͪ͛ظʹ΋ ”ΦʔέετϨʔγϣϯ૚Λ࡞Δ͔?” ͳͲͷ࿩͸ग़͍ͯͨ ɹɾ͕ɺܾΊ͖Εͳ͔ͬͨ & ࣮૷͢Δ༨ྗ͕ͳ͔ͬͨ ɹɾࠓޙͷΞʔΩςΫνϟɾ։ൃʹͲΜͳҙຯ͕͋ͬͨͷ͔??? ɹɾޙ͔Βߟ͑ΒΕΔ༨஍Λ࢒͔ͨͬͨ͠ ɹɾϨΠϠʔΛ1ຕ଍͢ߟ͑ํ͸͜͏͍͏৔߹ʹ౎߹͕ྑ͍ ɹɾAPI GatewayɾBFF͸APIʹؔͯ͠ͷ “ϨΠϠʔΛ଍͢” ΞʔΩςΫνϟ ɹɾͦͷͨΊʹόοΫΤϯυͱϑϩϯτΤϯυ͕ີ݁߹͍ͯ͠Δͷ͸౎߹͕ѱ͍

ཁ͢Δʹ APIؔ࿈ͷΞʔΩςΫνϟܾఆΛϖϯσΟϯάͨ͠(Ͱ͖ͨ)

3. BFFͷϓϩτλΠϓ࣮૷

#''ͷϓϩτλΠϓ࣮૷ ■ BFFʹٻΊΒΕΔཁ݅ (Why) ɹɾΫϥΠΞϯτ͔Βݟͯ ɹɾը໘දࣔʹඞཁͳσʔλΛ·ͱΊͯऔಘ͍ͨ͠ ɹɾͰ΋ɺϨεϙϯε͕஗͘ͳΔͷ͸NG ɹɾઃܭɾΞʔΩςΫνϟͷ؍఺͔Β ɹɾήʔτ΢ΣΠͱͯ͠όοΫΤϯυͷલʹஔ͔ΕΔ ɹɾ஗͍ͱશମͷϨεϙϯεѱԽΛট͘ ɹɾεέʔϥϏϦςΟ͕ཁٻ͞ΕΔ ɹɾϑϩϯτΤϯυͱີ݁߹͢ΔͷͰߋ৽ස౓͸ߴ͘ͳΔ ɹɾϑϩϯτΤϯυΛ৮ΔΤϯδχΞ͕ؾܰʹมߋͰ͖Δඞཁ͕͋Δ ɹɾϚΠΫϩαʔϏε๊͕͑Δ෼ࢄγεςϜͷ೉͠͞͸౰વ͋Δ ɹɾ෼ࢄτϨʔε΍਍அɾम෮ͷγεςϜԽ΋ߟ͍͑ͯ͘ඞཁੑ

#''ͷϓϩτλΠϓ࣮૷ ■ BFFͷઃܭ (WhatɾHow) ɹɾWhat ɹɾཁ͸APIΫϥΠΞϯτΛ࡞Δ ɹɾHow ɹɾݴޠɾϑϨʔϜϫʔΫͷબఆ ɹɾεέʔϥϏϦςΟɾ଎౓ʹؔͯ͠༏Ґੑ͕͋Δ͜ͱ ɹɾϑϩϯτΤϯυΛ৮ΔΤϯδχΞ΋ֶश͕༻ҙͰ͋Δ͜ͱ ɹɾࣗ෼ͨͪͷνʔϜͩͱબ୒ࢶ͸ Go or Elixir͔…

#''ͷϓϩτλΠϓ࣮૷ ■ BFFͷϓϩτλΠϓ࣮૷ [1: ࢓༷ͱERਤ] ɹɾ͜Μͳ࢓༷Λ૝ఆͯ͠ΈΔ ɹɾҰཡʹ঎඼ͱ঎඼ʹ͍ͭͨίϝϯτΛදࣔ͢Δ ɹɾ঎඼ʹ͸ΧςΰϦ͕ઃఆ͞Ε͍ͯΔ ɹɾձһઐ༻αʔϏεͳͷͰϩάΠϯࡁΈϢʔβͷΈӾཡՄೳ ɹɾAPIͷશͯͷΤϯυϙΠϯτʹϢʔβೝূ͕͋Δɺೝূ͸JWTͰߦ͏

#''ͷϓϩτλΠϓ࣮૷ ■ BFFͷϓϩτλΠϓ࣮૷ [2: ߏ੒ਤ] ɹɾBEFORE ɹɾAFTER WebΫϥΠΞϯτ ೝূ(JWT) API(itemɾcategoryɾcomment) WebΫϥΠΞϯτ ೝূ(JWT) API(itemɾcategoryɾcomment) BFF labstack/echoͰαʔό࡞੒

#''ͷϓϩτλΠϓ࣮૷ ■ BFFͷϓϩτλΠϓ࣮૷ [3: BEFORE] ※Web Client(JS)ͷίʔυ ϝΠϯͷऔಘॲཧ - itemͱcategory - comment itemͱcategoryऔಘॲཧ ฒྻͰऔಘ commentऔಘॲཧ itemͷcount෼ΛฒྻͰऔಘ

#''ͷϓϩτλΠϓ࣮૷ ■ BFFͷϓϩτλΠϓ࣮૷ [3: BEFORE] ※Web Client(JS)ͷίʔυ APIΫϥΠΞϯτͷऔಘ ϔομʹJWTτʔΫϯ͕ೖΔ JWTτʔΫϯͷऔಘ /user_token ΁ͷPOST

#''ͷϓϩτλΠϓ࣮૷ ■ BFFͷϓϩτλΠϓ࣮૷ [4: AFTER] ※ BFF(Go)ͷίʔυ labstack/echo ͰαʔόΛཱ͍ͯͯΔ ϝΠϯͷऔಘॲཧ - JWTͷτʔΫϯऔಘ - itemͱcategory - comment

#''ͷϓϩτλΠϓ࣮૷ ■ BFFͷϓϩτλΠϓ࣮૷ [4: AFTER] ※ BFF(Go)ͷίʔυ JWTτʔΫϯͷऔಘ /user_token ΁ͷPOST GETϦΫΤετͷϥο ύʔ JWTτʔΫϯΛϔομʔ ʹηοτ͍ͯ͠Δ

#''ͷϓϩτλΠϓ࣮૷ ■ BFFͷϓϩτλΠϓ࣮૷ [4: AFTER] ※ BFF(Go)ͷίʔυ ItemͷAPIϦΫΤετ෦෼ Ϩεϙϯεͱಉ͡StructΛ࡞͍ͬͯΔ

#''ͷϓϩτλΠϓ࣮૷ ■ BFFͷϓϩτλΠϓ࣮૷ [4: AFTER] ※ BFF(Go)ͷίʔυ ࠷ऴతʹϨεϙϯεΛฦ͢෦෼ ϨεϙϯεͷܗͷStructΛtoJSON͢Δ

#''ͷϓϩτλΠϓ࣮૷ ■ BFFͷϓϩτλΠϓ࣮૷ [4: AFTER] ※Web Client(JS)ͷίʔυ BFFͷΤϯυϙΠϯτΛίʔϧ API͸1ຊ͚ͩ!!!

#''ͷϓϩτλΠϓ࣮૷ ■ BFFͷϓϩτλΠϓ࣮૷ [5: Ͳ͏͔?] ɹɾϑϩϯτΤϯυ͔ΒBFFʹAPIϦΫΤετͷϋϯυϦϯά͕Ҡͬͨ ɹɾϑϩϯτΤϯυ͔ΒݟΔͱը໘ʹରԠ͢ΔAPIΛ1ຊ౤͛Δ͚ͩͰྑ͍ ɹɾBFFͷ࣮૷͸୯७͚ͩͲͪΐͬͱ൥ࡶ ɹɾνʔϜͷϝϯόʔʹ”ΊΜͲ͍͘͞”ͱݴΘΕͦ͏… ɹɾϚοϐϯά෦෼͸generatorΛ༻ҙ͢ΔͳΓɺ޻෉ඞཁͦ͏

#''ͷϓϩτλΠϓ࣮૷ ■ ࠓճͷαϯϓϧίʔυ ɹɾWebΫϥΠΞϯτ: shimpeiws/simple-web-client ɹɾBFF(Go): shimpeiws/simple-go-api ɹɾRails API: shimpeiws/simple-rails-api

·ͱΊ ■ ·ͱΊ ɹɾ։ൃͷ͜Ε·Ͱ ɹɾ։ൃεϐʔυΛ্͛ͯॳظ։ൃΛ৐Γ੾͖ͬͯͨ ɹɾΞʔΩςΫνϟ͕ܾΊ͖ΕͣɺAPIؔ࿈ͷઃܭΛ୯७Խ͢͠Δ͜ͱʹͨ͠ ɹɾ݁ՌɺϑϩϯτΤϯυʹॏ͕͞دͬͨ ɹɾ։ൃͷ͜Ε͔Β ɹɾBFF૚Λಋೖ͍͖͍ͯͨ͠ ɹɾϑϩϯτΤϯυͷϋϯυϦϯάෳࡶԽͷճආ ɹɾϚΠΫϩαʔϏεԽ͔ΒϑϩϯτΤϯυΛकΔ ɹɾޙ͔Βߟ͑Δ༨஍ͷ͋ΔΞʔΩςΫνϟɾઃܭɺେࣄ

8FBSFIJSJOH