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

Transcript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    shimpeiws/simple-rails-api

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

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

39. 8FBSFIJSJOH