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૚Λಋೖ͍͖͍ͯͨ͠ ɹɾϑϩϯτΤϯυͷϋϯυϦϯάෳࡶԽͷճආ ɹɾϚΠΫϩαʔϏεԽ͔ΒϑϩϯτΤϯυΛकΔ ɹɾޙ͔Βߟ͑Δ༨஍ͷ͋ΔΞʔΩςΫνϟɾઃܭɺେࣄ 

8F
BSF
IJSJOH