gRPC-Web ile uçtan uca gRPC

gRPC

gRPC Google tarafından kullanılıp geliştirilen, HTTP/2.0 üzerine inşa edilmiş çift yönlü iletişime imkan sunan açık kaynak RPC framework’üdür.

gRPC-Web

gRPC-Web’in iki farklı implemantasyonu bulunuyor. Her ikiside henüz client-side ve server-side bi-directional stream özelliğini desteklemiyor.

gRPC-Web ve Envoy Proxy ile aracı olarak REST kullanmaya gerek kalmadı.

Adımlar

  1. Proto Dosyası
  2. Client Yapılandırılması
  3. Envoy Proxy
  4. Server Yapılandırması

Gerekli Yazılım ve Araçlar

Protocol Buffers/protobuf derleyicisi 

Server Side

- Go Lang
- gRPC’nin go implementasyonu
- gRPC Go eklentisi

Client Side

- npm
- gRPC-Web eklentisi
- docker (envoy için)

1. Proto Dosyası

Protocol Buffers (diğer adıyla protobuf) Google tarafından geliştirilen dil ve platform bağımsız veri değişim formatıdır.

syntax = “proto3”;package country;message Country {
int64 id = 1;
string name = 2;
string flag = 3;
}
message GetCountriesRequest {}message GetCountriesResponse {
repeated Country countries = 1;
}
message AddCountryRequest {
Country country = 1;
}
message AddCountryResponse {
string success = 1;
}
service CountryService {
rpc GetCountries(GetCountriesRequest) returns (GetCountriesResponse) {};
rpc AddCountry(AddCountryRequest) returns (AddCountryResponse) {};
}

2. Client Side

JavaScript Client side’ın stub dosyaları oluşturmak için gRPC-Web eklentisine ihtiyacımız var. Bu adresten gRPC-Web eklentisinin kurulum işlemini gerçekleştirin.

$ protoc --proto_path=./proto/ --js_out=import_style=commonjs:./client/ --grpc-web_out=import_style=commonjs,mode=grpcwebtext:./client/ ./proto/country.proto
..."scripts": {
"dev": "parcel index.html"
},
...
“dependencies”: {
“grpc-web”: “¹.0.7”,
“google-protobuf”: “³.11.2”
},
“devDependencies”: {
“parcel-bundler”: “¹.12.4”
}
index.js getCountries ve addCountry çağrıları.
$ npm install
$ npm run dev
Server running at http://localhost:1234

3. Envoy Yapılandırılması

Bu adresten docker’ın kurulumunu gerçekleştirin.

FROM envoyproxy/envoy:latest
COPY ./envoy.yaml /etc/envoy/envoy.yaml
CMD /usr/local/bin/envoy -c /etc/envoy/envoy.yaml
45. satırdaki port_value: 50051 değeri server side’ın portunu göstermeli
docker build -t grpc-web-example/envoy -f ./Dockerfile .
docker run -d -p 8080:8080 -p 9901:9901 --network=host grpc-web-example/envoy

4. Server Side

Go’yu bu adresten kurabilirsiniz.
Go’ya gRPC’yi kurmak için komut satırından şu komutu çalıştıralım:

$ go get -u google.golang.org/grpc

$ go get -u github.com/golang/protobuf/protoc-gen-go
$ export PATH=$PATH:$GOPATH/bin
$ protoc — go_out=. *.proto
Go ve gRPC kullanan örnek server. Örneği kısa tutmak adına herhangi bir database bağlantısı yok.
$ ~/grpc-web-example/server go run main.go

Sonuç

localhost:1234 adresini ziyaret edip tarayıcının konsoluna bakabilirsiniz:


{“countriesList”:[{“id”:1,”name”:”Turkey”,”flag”:”https://upload.wikimedia.org/wikipedia/commons/b/b4/Flag_of_Turkey.svg"},{"id":2,"name":"Israel","flag":"https://en.wikipedia.org/wiki/Flag_of_Israel#/media/File:Flag_of_Israel.svg"},{"id":2,"name":"Iran","flag":"https://tr.wikipedia.org/wiki/%C4%B0ran#/media/Dosya:Flag_of_Iran.svg"},{"id":2,"name":"China","flag":"https://tr.wikipedia.org/wiki/%C3%87in#/media/Dosya:Flag_of_the_People's_Republic_of_China.svg"}]}
index.js:48 {“success”:”Country added.”}

Frontend developer and designer, science fiction enthusiast, practicing minimalism, and stoic in search of flow. Writing about design and code.

Frontend developer and designer, science fiction enthusiast, practicing minimalism, and stoic in search of flow. Writing about design and code.