grpc-gatewayで作るマイクロサービスの管理画面

 grpc-gatewayで作るマイクロサービスの管理画面

大規模プラットフォームを支えるエンジニアの技術と工夫〜Web現場Meetup #3〜
https://pixta-inc.connpass.com/event/80223/
grpc-gatewayを中心とした管理画面の構築を試そうとしている話

1d42b38276c3d2c7cc931fa444c13488?s=128

Masaya Nasu

March 07, 2018
Tweet

Transcript

  1. grpc-gateway Ͱ࡞Δ ϚΠΫϩαʔϏεͷ؅ཧը໘ גࣜձࣾΫϥ΢υϫʔΫε SREνʔϜɹಹਢཧ໵

  2. Profile גࣜձࣾΫϥ΢υϫʔΫε SREνʔϜॴଐ ಹਢཧ໵ Twitterɿ @tomato360 Githubɿ @nasum Rubyͱ͔JSͱ͔Goͱ͔ॻ͍ͯ·͢ɻ ࠷ۙ͸FlutterͰ࢖ΘΕ͍ͯΔDart͕

    ؾʹͳ͍ͬͯ·͢
  3. ʲݸਓతͳએ఻ʳ ٕज़ॻయ4ʹग़·͢ ৔ॴɿ͔-24 ग़͢΋ͷɿNuxt.jsͷຊΛॻ͘༧ఆʢ༧ఆʣ

  4. CrowdWorks

  5. ࠓ೔ͷ࿩ • CWͷϚΠΫϩαʔϏεԽͷ͸ͳ͠ • ϚΠΫϩαʔϏεʹfitͨ͠؅ཧը໘ͷߏங

  6. CW͸ϚΠΫϩαʔϏεԽΛ ͢͢Ί͍ͯ·͢

  7. ϚΠΫϩαʔϏεͱ͸ʁ • ڠௐͯ͠ಈ࡞͢Δখن໛Ͱࣗ཯తͳαʔϏε Sam Newman (2016) ϚΠΫϩαʔϏεΞʔΩςΫνϟ

  8. CrowdWorks͸ϞϊϦγοΫͳ ΞϓϦέʔγϣϯ ࢓ࣄґཔ ࢓ࣄݕࡧ ใुड͚औΓ ࢧ෷͍ ϝοηʔδ ίϯϖ ҰͭͷΞϓϦέʔγϣϯ͕શͯͷػೳΛఏڙ͍ͯ͠Δ

  9. ϞϊϦγοΫͷ೉఺ • Ұͭͷ໰୊͕શମʹӨڹ͢Δ • σϓϩΠ͕େม • εέʔϧ͠ͳ͍ • etc…

  10. ϚΠΫϩαʔϏεԽʹΑΔ εέʔϧ͢ΔαʔϏεఏڙΛ໨ࢦ͢ ࢓ࣄґཔ ࢓ࣄݕࡧ ใु ड͚औΓ ࢧ෷͍ ϝοηʔδ ίϯϖ ࢓ࣄݕࡧ

    ࢓ࣄґཔ ใुड͚औΓ ࢧ෷͍ ϝοηʔδ ίϯϖ
  11. αʔϏεؒͷ࿈ܞ͸Ͳ͏͢Δʁ

  12. gRPCʹΑΔαʔϏεؒ࿈ܞ • gRPC͸Googleͷެ։͍ͯ͠ΔRPCͷϥΠϒϥϦɾ ϑϨʔϜϫʔΫ • protocͷϓϥάΠϯͰఏڙ͞Ε͍ͯΔ • .protoΛ࡞Ε͹༷ʑͳݴޠͰίʔυΛग़ྗͯ͘͠ΕΔ • RPCͰαʔϏεಉ࢜Λ࿈ܞͰ͖ΔͷͰREST

    API Λ੔ උ͢Δඞཁ͕ແ͍
  13. ؆୯ͳprotoϑΝΠϧ syntax = "proto3"; message AddToDo { string body =

    1; }
  14. ు͖ग़͞ΕͨRubyͷίʔυ # Generated by the protocol buffer compiler. DO NOT

    EDIT! # source: test.proto require 'google/protobuf' Google::Protobuf::DescriptorPool.generated_pool.build do add_message "AddToDo" do optional :body, :string, 1 end end AddToDo = Google::Protobuf::DescriptorPool.generated_pool.lookup("AddToDo").msgclass
  15. gRPCʹ͍ͭͯ • gRPCͬͯԿʁ
 https://qiita.com/oohira/items/ 63b5ccb2bf1a913659d6 • Protocol Buffers ೖ໳
 https://www.slideshare.net/yuichi110/

    protocol-buffers-61413028
  16. αʔϏεؒͷ௨৴ΛgRPCʹ ࢓ࣄݕࡧ ࢓ࣄґཔ ใुड͚औΓ ࢧ෷͍ ϝοηʔδ ίϯϖ

  17. CrowdWorks͸ ϚΠΫϩαʔϏεԽΛਐΊ͍͖ͯ·͢ ࢓ࣄݕࡧαʔϏε ϝοηʔδαʔϏε ࢧ෷͍αʔϏε

  18. ཱͪ͸͔ͩΔ໰୊

  19. ϚΠΫϩαʔϏεԽʹ൐͏ ؅ཧը໘ͷ૿Ճ • αʔϏε͝ͱʹ؅ཧը໘Λ࡞Δʁ ࢓ࣄݕࡧαʔϏε ϝοηʔδαʔϏε ࢧ෷͍αʔϏε ؅ཧը໘ ؅ཧը໘ ؅ཧը໘

    ؅ཧը໘ͷ૿Ճ
  20. REST APIͰ͸ͳ͍ͷͰ ֎෦͔ΒAPIΛ͚ͨͨͳ͍ • curlͱ͔ͰAPIΛ͚ͨͨͳ͍ ࢓ࣄݕࡧαʔϏε ϝοηʔδαʔϏε ࢧ෷͍αʔϏε gRPCͰ͔͓͠࿩͠Ͱ͖ͳ͍܅

  21. grpc-gateway

  22. grpc-gatewayͱ͸ • gRPC ΛREST API ʹม׵͢ΔϦόʔεϓϩΩ γΛ࡞੒ͯ͘͠ΕΔ protocͷϓϥάΠϯ • ు͖ग़͞ΕͨίʔυΛ࢖༻͢Δ͜ͱͰREST

    APIͰ gRPCͰܨ͍ͩαʔϏεΛୟ͚Δ
  23. Ϧόϓϩ͕ଘࡏ͢Δͱ API͕ୟ͚Δ ࢓ࣄݕࡧαʔϏε ϝοηʔδαʔϏε ࢧ෷͍αʔϏε Ϧόϓϩ REST gRPC

  24. ͦ͜Ͱ͙ͬͱ࡞ΓࠐΜͰ

  25. grpc-gatewayΛத৺ͱͨ͠ ؅ཧը໘Λߏங͠·͢

  26. Ϧόϓϩʹ؅ཧػೳΛू໿ • ΋͸΍ϦόϓϩͰ͸ͳ͍ײ • grpc-gatewayͰ࡞ͬͨAPIʹAjaxͰΞΫηε͢ Δ؅ཧը໘Λ͜͜ʹू໿ • ؅ཧը໘ͷࢄҳΛ๷͙

  27. γεςϜߏ੒ਤ ؅ཧը໘ΞϓϦέʔγϣϯ HSQDHBUFXBZ ࢓ࣄݕࡧαʔϏε ϝοηʔδαʔϏε ࢧ෷͍αʔϏε gRPC REST ؅ཧը໘ΞϓϦέʔγϣϯͰ࡞ͬͨը໘͔Β RESTͰAPIΛୟ͖֤छαʔϏεΛૢ࡞͢Δ

  28. grpc-gatewayͱnet/httpͰ ΞϓϦέʔγϣϯΛ࣮૷

  29. Ϗϡʔ͸Vue.jsͰߏங • goͷςϯϓϨʔτػೳ͸࢖͍ͮΒ͍ͷͰJSͰ ϏϡʔΛߏங͢Δ • Vue.js͸ϑϩϯτΤϯυϑϨʔϜϫʔΫͷதͰ ͸Easyͳ෦ྨʢݸਓͷײ૝Ͱ͢ • elementΛར༻ͯ͠៉ྷͳUIΛ࡞ΕΔ

  30. ୯ҰϑΝΠϧίϯϙʔωϯτ <template> <div class="hello"> {{ data }} </div> </template> <script>

    export default { data() { return { data: "hello world" } } } </script> <style scoped> .hello { color: whitesmoke; width: 100px; padding-top: 10px; padding-bottom: 10px; background-color: gray; text-align: center; vertical-align: middle; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); } </style>
  31. Element

  32. ؅ཧը໘Λνϥݟͤ

  33. ͱ͜ΖͰ .protoͷ؅ཧ͸Ͳ͏͢Δʁ

  34. .protoͷ؅ཧ͸ׂͱ՝୊ • gRPCαʔόʔΛ࡞ΔͨΊʹ.proto͸ඞཁ • protocͰग़ྗ͞ΕΔϑΝΠϧΛͲ͜ʹஔ͘ʁ • ผʹ؅ཧͯ͠git submoduleͰಡΈࠐΉʁ

  35. protoϑΝΠϧΛूΊΔprotodep • https://github.com/stormcat24/protodep • Protocol BuffersͷIDLʢ.protoϑΝΠϧʣΛ vendoring͢ΔπʔϧΛॻ͍ͨ
 https://blog.stormcat.io/post/entry/protogen/ • depʹࣅ͍ͯΔπʔϧ

  36. protodep.tomlͰ ґଘઌΛॻ͚Δ proto_outdir = "./proto" [[dependencies]] target = “github.com/hoge/huga/app/protocol" branch

    = "develop" ศརʂʂ
  37. grpc-gatewayͰ ϚΠΫϩαʔϏεʹfitͨ͠ ؅ཧը໘Λ࡞Εͦ͏

  38. ͜͜·Ͱ࿩͍ͯͨ͜͠ͱ

  39. ݱࡏ։ൃத

  40. ·ͩ·ͩٙ໰΍՝୊͸ଟ͍ • ΍Γͨ͘ͳΔख๏ͩͱࢥ͏͚Ͳલྫ͕ͳ͍ • ͻΐͬͱͯ͠ےѱ͍ʁ • ࣮͸grpc-gatewayͰు͖ग़͞ΕΔϩάͷ ϑΥʔϚοτ͕ม͑ΒΕͳ͍ • VueʹΑΔϏϡʔ࡞੒͕ͳ͡Ή͔Ͳ͏͔

  41. օ͞ΜͷҙݟΛฉ͖͍ͨͰ͢

  42. ·ͱΊ • CW͸gRPCͰϚΠΫϩαʔϏεԽΛਐߦத • grpc-gatewayΛத৺ʹ؅ཧը໘Λߏங • Vue.jsΛ༻͍ͨSPAͰϏϡʔΛߏங • ϚΠΫϩαʔϏε࣌୅ʹfitͨ͠ߏ੒ʢࣗশ

  43. We are hiring !! https://www.wantedly.com/projects/117480