Webサービスの初期開発とマイクロサービス・BFF

Transcript

1. 1.

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

2. 2.

    ▪ ߴদ ਅฏ (@shimpeiws) ▪ WebΤϯδχΞ @ ΞΧπΩ LXࣄۀ෦

   ɹɾRailsͱJavaScriptΛ൒ʑ͘Β͍ॻ͍͍ͯΔ ▪ LX(ϥΠϒΤΫεϖϦΤϯε)ࣄۀ෦ ɹɾੈքதͷਓʑʹϥΠϒʢੜͷɺϦΞϧͳɺϫΫϫΫ͢Δʣ ɾΤΫεϖϦΤϯ εʢମݧʣΛఏڙ͢ΔࣄۀͰ͢ɻ ࢲ͸୭
3. 3.

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

4. 4.

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

5. 5.

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

6. 6.

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

   ɹɾߴ͍อकੑͱ(কདྷతͳ)εέʔϥϏϦςΟ͕ඞཁ 
   ཁ݅ͱΞʔΩςΫνϟ
7. 7.

    ▪ ΞʔΩςΫνϟ ɹɾWebϑϩϯτΤϯυ ɹɾSingle Page Applicationͱͯ͠ߏங ɹɾReact + Redux

   ɹɾIsomorphic JavaScript ͷߏ੒ͰɺαʔόαΠυϨϯμϦϯά ɹɾαʔόαΠυ ɹɾRails ɹɾMySQL ɹɾΠϯϑϥ ɹɾ Google Cloud Platform (Google Container Engine) ɹɾ KubernetesͰίϯςφӡ༻ 
   ཁ݅ͱΞʔΩςΫνϟ
8. 8.

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

9. 9.

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

10. 10.

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

11. 11.

    ▪ ͜͜·Ͱͷ։ൃͷνʔϜɾ։ൃ಺༰ɾϋΠϥΠτ  
    
    ։ൃॳظͰͷબ୒ͱूதͱ՝୊ 2016/9~2016/11 (্ཱͪ͛ظ) 2016/12~2017/3 (։ൃॳظ) 2017/4~ (։ൃதظ)

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

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

13. 13.

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

14. 14.

     
    
    ։ൃॳظͰͷબ୒ͱूதͱ՝୊ ▪ ্ཱͪ͛ظ ~ ։ൃॳظͷબ୒ͱूத ɹɾશ໘తʹSingle Page Application +

    SSRͷߏ੒ʹ͢Δ ɹɾWhy ɹɾෳࡶͳϢʔβΠϯλϥΫγϣϯΛ࣮ݱ͍ͨ͠ ɹɾΠχγϟϧϏϡʔͷදࣔΛૣ͍ͨ͘͠ ɹɾWhat ɹɾSingle Page Application + SSRͷ࣮ݱ ɹɾHow ɹɾReact + Redux (on Isomorphic Javascript) ͷ࠾༻
15. 15.

     
    
    ։ൃॳظͰͷબ୒ͱूதͱ՝୊ ▪ ্ཱͪ͛ظ ~ ։ൃॳظͷબ୒ͱूத ɹɾશ໘తʹSingle Page Application +

    SSRͷߏ੒ʹ͢Δ ɹɾPros ɹɾμΠφϛοΫͳWebϑϩϯτΤϯυΛ࡞Γ΍͍͢ ɹɾSPAͷߏ੒ͰҰຊԽͰ͖Δ(ϧʔςΟϯάɺState؅ཧ…) ɹɾCons ɹɾ։ൃ޻਺͕͔͔Δ (ྫ͑͹Rails(ERBͳͲ) + jQueryʹൺ΂ͯ) ɹɾNode.jsͷϑϩϯταʔό͕Ұ୆૿͑ɺσϓϩΠɾ؅ཧ͕ෳࡶԽͨ͠
16. 16.

     
    
    ։ൃॳظͰͷબ୒ͱूதͱ՝୊ ▪ ্ཱͪ͛ظ ~ ։ൃॳظͷબ୒ͱूத ɹɾAPIઃܭͷ୯७Խ ɹɾWhy ɹɾνʔϜ։ൃ͕ͩɺυϝΠϯઃܭʹ͔͚Δ࣌ؒΛे෼ʹͱΕͳ͍ ɹɾը໘ʹ΂ͬͨΓͦͬͨAPIͰอकੑΛԼ͛ͨ͘ͳ͍

    ɹɾWhat ɹɾ͔ͳΓࡉ͔ͳཻ౓ͰͷϦιʔεࢦ޲ઃܭͰ౷Ұ͢Δ ɹɾ(جຊతʹ)RESTful API ɹɾHow ɹɾ1Ϟσϧ = 1APIʹͳΔ͜ͱ͕ଟ͍ɺॏཁͳ(େ͖͍)΋ͷ͚ͩϦιʔε୯ҐΛઃܭ ɹɾॳظͷϨϏϡʔͰνʔϜ಺ͷҙࣝ౷ҰΛ͍ͯͬͨ͠
17. 17.

     
    
    ։ൃॳظͰͷબ୒ͱूதͱ՝୊ ▪ ্ཱͪ͛ظ ~ ։ൃॳظͷબ୒ͱूத ɹɾAPIઃܭͷ୯७Խ ɹɾPros ɹɾը໘ʹ΂ͬͨΓͦͬͨAPI͸ආ͚ΒΕͨ ɹɾઃܭɾ࣮૷ָ͕Ͱόά΋গͳ͔ͬͨ

    ɹɾCons ɹɾΫϥΠΞϯταΠυͷ࣮૷ʹෛՙ͕Αͬͨ ɹ => ͜ͷ͋ͱͷ ”՝୊” ʹͮͮ͘
18. 18.

     
    
    ։ൃॳظͰͷબ୒ͱूதͱ՝୊ ▪ ্ཱͪ͛ظ ~ ։ൃॳظͷબ୒ͱूதͷ݁Ռ࢒ͬͨ՝୊ ɹɾΫϥΠΞϯταΠυͷϦΫΤετɾϋϯυϦϯά͕ෳࡶԽ͢Δ 6ฒྻ ௚ྻ ௚ྻ

    ※͋Δৄࡉը໘ͷ࣮૷Πϝʔδ
19. 19.

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

20. 20.

     
    
    ։ൃॳظͰͷબ୒ͱूதͱ՝୊ ▪ BFF(Backend For Frontend) ɹɾݩSound CloudͷPhil Calçado͕ఏএ ɹɾΫϥΠΞϯτͷछผຖʹதؒϨΠϠΛ࡞Δ

    “Pattern: Backends For Frontends” Sam Newman http://samnewman.io/patterns/architectural/bff/
21. 21.

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

22. 22.

     
    
    ։ൃॳظͰͷબ୒ͱूதͱ՝୊ ▪ ݁ہ։ൃॳظͰԿΛબ୒ͯ͠ɺࠓޙʹԿΛ࢒ͨ͠ͷ͔? ɹɾ։ൃॳظ ɹɾ্ཱͪ͛ظʹ΋ ”ΦʔέετϨʔγϣϯ૚Λ࡞Δ͔?” ͳͲͷ࿩͸ग़͍ͯͨ ɹɾ͕ɺܾΊ͖Εͳ͔ͬͨ &

    ࣮૷͢Δ༨ྗ͕ͳ͔ͬͨ ɹɾࠓޙͷΞʔΩςΫνϟɾ։ൃʹͲΜͳҙຯ͕͋ͬͨͷ͔??? ɹɾޙ͔Βߟ͑ΒΕΔ༨஍Λ࢒͔ͨͬͨ͠ ɹɾϨΠϠʔΛ1ຕ଍͢ߟ͑ํ͸͜͏͍͏৔߹ʹ౎߹͕ྑ͍ ɹɾAPI GatewayɾBFF͸APIʹؔͯ͠ͷ “ϨΠϠʔΛ଍͢” ΞʔΩςΫνϟ ɹɾͦͷͨΊʹόοΫΤϯυͱϑϩϯτΤϯυ͕ີ݁߹͍ͯ͠Δͷ͸౎߹͕ѱ͍
23. 23.

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

24. 24.

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

25. 25.

     
    #''ͷϓϩτλΠϓ࣮૷ ▪ BFFʹٻΊΒΕΔཁ݅ (Why) ɹɾΫϥΠΞϯτ͔Βݟͯ ɹɾը໘දࣔʹඞཁͳσʔλΛ·ͱΊͯऔಘ͍ͨ͠ ɹɾͰ΋ɺϨεϙϯε͕஗͘ͳΔͷ͸NG ɹɾઃܭɾΞʔΩςΫνϟͷ؍఺͔Β ɹɾήʔτ΢ΣΠͱͯ͠όοΫΤϯυͷલʹஔ͔ΕΔ

    ɹɾ஗͍ͱશମͷϨεϙϯεѱԽΛট͘ ɹɾεέʔϥϏϦςΟ͕ཁٻ͞ΕΔ ɹɾϑϩϯτΤϯυͱີ݁߹͢ΔͷͰߋ৽ස౓͸ߴ͘ͳΔ ɹɾϑϩϯτΤϯυΛ৮ΔΤϯδχΞ͕ؾܰʹมߋͰ͖Δඞཁ͕͋Δ ɹɾϚΠΫϩαʔϏε๊͕͑Δ෼ࢄγεςϜͷ೉͠͞͸౰વ͋Δ ɹɾ෼ࢄτϨʔε΍਍அɾम෮ͷγεςϜԽ΋ߟ͍͑ͯ͘ඞཁੑ
26. 26.

     
    #''ͷϓϩτλΠϓ࣮૷ ▪ BFFͷઃܭ (WhatɾHow) ɹɾWhat ɹɾཁ͸APIΫϥΠΞϯτΛ࡞Δ ɹɾHow ɹɾݴޠɾϑϨʔϜϫʔΫͷબఆ ɹɾεέʔϥϏϦςΟɾ଎౓ʹؔͯ͠༏Ґੑ͕͋Δ͜ͱ

    ɹɾϑϩϯτΤϯυΛ৮ΔΤϯδχΞ΋ֶश͕༻ҙͰ͋Δ͜ͱ ɹɾࣗ෼ͨͪͷνʔϜͩͱબ୒ࢶ͸ Go or Elixir͔…
27. 27.

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

    ɹɾAPIͷશͯͷΤϯυϙΠϯτʹϢʔβೝূ͕͋Δɺೝূ͸JWTͰߦ͏
28. 28.

     
    #''ͷϓϩτλΠϓ࣮૷ ▪ BFFͷϓϩτλΠϓ࣮૷ [2: ߏ੒ਤ] ɹɾBEFORE ɹɾAFTER WebΫϥΠΞϯτ ೝূ(JWT)

    API(itemɾcategoryɾcomment) WebΫϥΠΞϯτ ೝূ(JWT) API(itemɾcategoryɾcomment) BFF labstack/echoͰαʔό࡞੒
29. 29.

     
    #''ͷϓϩτλΠϓ࣮૷ ▪ BFFͷϓϩτλΠϓ࣮૷ [3: BEFORE] ※Web Client(JS)ͷίʔυ ϝΠϯͷऔಘॲཧ -

    itemͱcategory - comment itemͱcategoryऔಘॲཧ ฒྻͰऔಘ commentऔಘॲཧ itemͷcount෼ΛฒྻͰऔಘ
30. 30.

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

    JWTτʔΫϯͷऔಘ /user_token ΁ͷPOST
31. 31.

     
    #''ͷϓϩτλΠϓ࣮૷ ▪ BFFͷϓϩτλΠϓ࣮૷ [4: AFTER] ※ BFF(Go)ͷίʔυ labstack/echo ͰαʔόΛཱ͍ͯͯΔ

    ϝΠϯͷऔಘॲཧ - JWTͷτʔΫϯऔಘ - itemͱcategory - comment
32. 32.

     
    #''ͷϓϩτλΠϓ࣮૷ ▪ BFFͷϓϩτλΠϓ࣮૷ [4: AFTER] ※ BFF(Go)ͷίʔυ JWTτʔΫϯͷऔಘ /user_token

    ΁ͷPOST GETϦΫΤετͷϥο ύʔ JWTτʔΫϯΛϔομʔ ʹηοτ͍ͯ͠Δ
33. 33.

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

34. 34.

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

35. 35.

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

36. 36.

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

    ɹɾϚοϐϯά෦෼͸generatorΛ༻ҙ͢ΔͳΓɺ޻෉ඞཁͦ͏
37. 37.

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

    shimpeiws/simple-rails-api
38. 38.

     ·ͱΊ ▪ ·ͱΊ ɹɾ։ൃͷ͜Ε·Ͱ ɹɾ։ൃεϐʔυΛ্͛ͯॳظ։ൃΛ৐Γ੾͖ͬͯͨ ɹɾΞʔΩςΫνϟ͕ܾΊ͖ΕͣɺAPIؔ࿈ͷઃܭΛ୯७Խ͢͠Δ͜ͱʹͨ͠ ɹɾ݁ՌɺϑϩϯτΤϯυʹॏ͕͞دͬͨ ɹɾ։ൃͷ͜Ε͔Β ɹɾBFF૚Λಋೖ͍͖͍ͯͨ͠

    ɹɾϑϩϯτΤϯυͷϋϯυϦϯάෳࡶԽͷճආ ɹɾϚΠΫϩαʔϏεԽ͔ΒϑϩϯτΤϯυΛकΔ ɹɾޙ͔Βߟ͑Δ༨஍ͷ͋ΔΞʔΩςΫνϟɾઃܭɺେࣄ
39. 39.

    8F
    BSF
    IJSJOH