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

被選召的 Gopher 們，從零開始探索 Golang, Istio, K8s 數碼微服務世界 — 第12屆iT邦幫忙鐵人賽

本文章同時發佈於：

• Github(包含程式碼)
• Medium
• iT 邦幫忙

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

大家好，這次要介紹 gRPC-Web 的實作，大家可以直接 Clone 此份Github 程式碼，直接先 run 起來會比較有感覺～

怎麼 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 設定

整體架構如 DAY11 所說的，後端與前端之間多了一個 envoy proxy，來把瀏覽器的 HTTP1.1 request 轉換成 HTTP2，

圖片來源: Envoy and gRPC-Web: a fresh new alternative to REST

所以，我們要在 docker-compose 設定前端、後端、envoy proxy 三者，

注意dockerfile: ./docker/envoy/Dockerfile處，我們必須 build 一個 envoy docker image，目標是把envoy.yaml放入 image 中，如下:

而 envoy 會依照此 config 來設定 proxy，

在講解1處，為 envoy 對外的 port 號，request 依照此 port 號進入後，可以依照講解2的 routes 來設定路由，如"/"導到了clusters裡的echo_service，而echo_service裡就可以實際將 requests 導到 docker-compose 中的 server，而 port 號是 50052。

而講解4處，因為有設定envoy.filters.http.grpc_web，所以對 HTTP1.1 流量會轉換成 HTTP2 的流量。

來產生 JS 與 Golanag 的 gRPC code

在 script 資料夾中，我已經寫好了 JS 與 Golang 產 gRPC code 的 script，分別如下：

主要是透過 juanjodiaz 大大寫的juanjodiaz/grpc-web-generator來產生 gRPC code，省去了很多 gRPC 安裝的時間 XD。

run 完之後就會產生以下的 code，我們要 import 他們到我們實際的 code 中。

前端中，我們利用GreeterPromiseClient來產生 gRPC client，並產生HelloRequest這個 message，使用setMessage將裡頭的 value 設定好，並透過sayHello傳送。

可以看到，sayHello使用HelloRequest是完全符合 gRPC 的 schema 的，前後端的定義都來自於 schema，溝通更 match 惹～

謝謝你的閱讀～

參考

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

Write Medium in Markdown? Try Markdium!