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

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

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