gRPC-Web，讓你的前端也吃到 gRPC 的惡魔果實 - 實作篇

• Github(包含程式碼)

• Medium

• iT 邦幫忙

文章為自己的經驗與夥伴整理的內容，設計沒有標準答案，如有可以改進的地方，請告訴我，我會盡我所能的修改，謝謝大家～

怎麼 run 起來？

1. docker run -v ${PWD}:/app -w /app node:14.3.0-alpine npm install: 安裝web-cleint的相依

2. docker run -v ${PWD}:/app -w /app node:14.3.0-alpine npm run build: 編譯web-client的client.js

3. docker-compose build: 安裝Golang GRPC Server與Envoy的相依

4. docker-compose up: 啟動web-client, Golang GRPC Server, Envoy

5. 連入localhost:8060，打開console會看到web-cleint發出的Hello得到Hello World的回傳

envoy 設定

# docker-compose.ymlversion: "3"services:  envoy:    build:      context: ./      dockerfile: ./docker/envoy/Dockerfile    image: grpcweb/envoy    ports:      - "8080:8080"      - "9901:9901"    links:      - server  server:    image: golang:1.14.6-alpine    volumes:      - ${PWD}:/server    working_dir: /server    ports:      - "8070:8070"    entrypoint: go run server/main.go  web:    image: httpd:2.4    volumes:      - ${PWD}/web-client:/usr/local/apache2/htdocs/    ports:      - "8060:80"    links:      - envoy

# docker/envoy/DockerfileFROM envoyproxy/envoy:v1.15.0COPY ./envoy.yaml /etc/envoy/envoy.yamlCMD /usr/local/bin/envoy -c /etc/envoy/envoy.yaml -l trace --log-path /tmp/envoy_info.log

# envoy.yamladmin:  access_log_path: /tmp/admin_access.log  address:    socket_address: { address: 0.0.0.0, port_value: 9901 }static_resources:  listeners:    - name: listener_0      address:        # 講解1        socket_address: { address: 0.0.0.0, port_value: 8080 }      filter_chains:        - filters:            - name: envoy.filters.network.http_connection_manager              typed_config:                "@type": type.googleapis.com/envoy.config.filter.network.http_connection_manager.v2.HttpConnectionManager                codec_type: auto                stat_prefix: ingress_http                route_config:                  name: local_route                  virtual_hosts:                    - name: local_service                      domains: ["*"]                      # 講解2                      routes:                        - match: { prefix: "/" }                          route:                            cluster: echo_service                            max_grpc_timeout: 0s                      cors:                        allow_origin_string_match:                          - prefix: "*"                        allow_methods: GET, PUT, DELETE, POST, OPTIONS                        allow_headers: keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout                        max_age: "1728000"                        expose_headers: custom-header-1,grpc-status,grpc-message                http_filters:                  # 講解4                  - name: envoy.filters.http.grpc_web                  - name: envoy.filters.http.cors                  - name: envoy.filters.http.router  clusters:    - name: echo_service      connect_timeout: 0.25s      type: logical_dns      http2_protocol_options: {}      lb_policy: round_robin      load_assignment:        cluster_name: cluster_0        endpoints:          - lb_endpoints:              - endpoint:                  address:                    # 講解3                    socket_address:                      address: server                      port_value: 50052

來產生 JS 與 Golanag 的 gRPC code

# scirpt/build-proto-js.sh#! /bin/bashdocker run \    -v "${PWD}/proto:/protofile" \    -e "protofile=helloworld.proto" \    juanjodiaz/grpc-web-generator
mv ./proto/generated/* ./proto
rm -r proto/generated

# scirpt/build-proto-go.shdocker run \    -v "${PWD}/proto:/protofile" \    -e "protofile=helloworld.proto" \    juanjodiaz/grpc-web-generator
mv ./proto/generated/* ./proto
rm -r proto/generated

// web-client/client.jsconst { HelloRequest } = require("../proto/helloworld_pb.js");const { GreeterPromiseClient } = require("../proto/helloworld_grpc_web_pb.js");(async () => {
  try {
    const greeterService = new GreeterPromiseClient("http://localhost:8080");    const request = new HelloRequest();    request.setMessage("Hello");    const response = await greeterService.sayHello(request, {});    console.log(response.getMessage());  } catch (err) {
    console.log(err.code);    console.log(err.message);  }
})();

# proto/helloworld.proto
syntax = "proto3";
package helloworld;
service Greeter {
  rpc SayHello(HelloRequest) returns (HelloReply);
}
message HelloRequest {
  string message = 1;
}
message HelloReply {
  string message = 1;
}

參考

• Envoy and gRPC-Web: a fresh new alternative to REST

• grpc-web-generator