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