Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Microservices Meetup vol.5 (API Gateway & BFF)
2017/3/30 @FiNC

Shimpei Takamatsu

March 30, 2017
Tweet

More Decks by Shimpei Takamatsu

Other Decks in Technology

Transcript

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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide

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

    View full-size slide


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

    View full-size slide


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

    View full-size slide

  8. ■ WebɺServerͷ2αʔϏεͰՔಇ͍ͯ͠Δ

    ཁ݅ͱΞʔΩςΫνϟ
    ReactͰSSR
    ಉҰιʔεͰΫϥΠΞϯτͰ΋ಈ࡞
    ॳճΞΫηε͸HTTP

    View full-size slide

  9. ■ WebɺServerͷ2αʔϏεͰՔಇ͍ͯ͠Δ

    ཁ݅ͱΞʔΩςΫνϟ
    ௨৴͕ඞཁͳλΠϛϯάͰ
    XHR
    SPAͱͯ͠ಈ࡞

    View full-size slide


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

    View full-size slide

  11. ■ ͜͜·Ͱͷ։ൃͷνʔϜɾ։ൃ಺༰ɾϋΠϥΠτ

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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

  21. ■ BFFಋೖޙͷΞʔΩςΫνϟ
    ɹɾ2017೥தʹ͸͜Μͳײ͡ʹͳΔ???

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide


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

    View full-size slide