結合 gRPC 在 Angular 與 GO 之中（使用 Docker 實作）

Photo by Harley-Davidson on Unsplash

什麼是 gRPC？

gRPC 是由 Google 推出了基於 Protobuf 作為 API 傳遞格式的新型程式呼叫協議 。他可以直接從 Protobuf 檔案產生一個伺服器，即文件即是程式、程式即是文件，而且不需要傳統的 RESTful API 伺服器需額外寫一堆路由。

跟 RESTful API 不同的地方有：

1. gRPC 直接使用 proto 做為合約，RESTful API 必須另外使用 OpenAPI。
2. gRPC 使用 HTTP/2 進行通訊協定。
3. Payload 方面，gRPC 的 Protobuf 較小型且為二進位，JSON 則是可直接人辨識。
4. 瀏覽器支援方面，gRPC 目前仍需要 grpc-web 輔佐。

開始著手進行吧

本篇文章範例將使用 Angular 最為 Client 端網頁程式範例，GO 最為 Server 端範例，透過 Envoy Proxy 最為中間 proxy 轉換，並且全部以 Docker 實現，您可以進行替換 Docker Compose 或是 Kubernetes。

Server

在 Server 端實現了一個簡單的加法函數，輸入兩個 Input 值，輸出相加後的結果。

GO 主程式

Server 的 Dockerfile 沒什麼需要特別注意的地方，將需要用到的 package 依序加入，並且打開 50051 port。

Server 端的 Dockerfile

Client

Client 端呼叫 API，傳送兩個變數，並且設定 proto 的 client 位置在 http://localhost:8080 才能正確地訪問到 Envoy Proxy。

Client 端呼叫 API 之 Service 檔

Client 端主程式之 Component

Client 端主程式之 HTML

Client 端的 Dockerfile，在 container 中打包好網頁程式後，丟到 nginx 的 container 中，其中 nginx 的設定檔，可以參考我在 Github 上的。

Client 端 Dockerfile

Protocol

這邊 protocol 就很簡單，兩個結構分別是加法的輸入和輸出，其中輸入為兩個整數，輸出為一個整數，詳細關於 protocol 檔案撰寫的 guide 可以參考 Google 官方文件。

protocol 檔

接下來我們需要將 protocol 檔案，透過 protocol buffer compiler 產生可以供 GO 以及 Typescript 可以閱讀的檔案，詳細關於的使用方法可以參考官方 Github 文件。

Envoy Proxy

Envoy 的設定檔，其中最重要的就是 address 這邊設定為 0.0.0.0 才有辦法被訪問到。

Docker compose

最後透過 Docker compose 同時啟動三者。

Let’s go

前面都完成後，透過 Docker compose 同時啟動。

docker-compose up

打開瀏覽器進入網站，如果有成功顯示正確的加法結果，表示成功囉。

http://localhost:80/

後記

所有的程式碼都放在我的 Github 上，有興趣的人歡迎互相指教，目前 gRPC 在瀏覽器這端的支援度還稍嫌不足，希望未來會越來越成熟，可以做為微服務或是多平台應用程式的 API 另外的選擇，以提供效能更好，更直覺的開發體驗。