Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

CrowdWorks

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

αʔϏεؒͷ࿈ܞ͸Ͳ͏͢Δʁ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

؆୯ͳprotoϑΝΠϧ syntax = "proto3"; message AddToDo { string body = 1; }

Slide 14

Slide 14 text

ు͖ग़͞Εͨ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

Slide 15

Slide 15 text

gRPCʹ͍ͭͯ • gRPCͬͯԿʁ
 https://qiita.com/oohira/items/ 63b5ccb2bf1a913659d6 • Protocol Buffers ೖ໳
 https://www.slideshare.net/yuichi110/ protocol-buffers-61413028

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ཱͪ͸͔ͩΔ໰୊

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

grpc-gateway

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ͦ͜Ͱ͙ͬͱ࡞ΓࠐΜͰ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

୯ҰϑΝΠϧίϯϙʔωϯτ
{{ data }}
export default { data() { return { data: "hello world" } } } .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); }

Slide 31

Slide 31 text

Element

Slide 32

Slide 32 text

؅ཧը໘Λνϥݟͤ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

grpc-gatewayͰ ϚΠΫϩαʔϏεʹfitͨ͠ ؅ཧը໘Λ࡞Εͦ͏

Slide 38

Slide 38 text

͜͜·Ͱ࿩͍ͯͨ͜͠ͱ

Slide 39

Slide 39 text

ݱࡏ։ൃத

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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