1. 程式人生 > >grpc-web與react的整合

grpc-web與react的整合

很久沒寫總結了,在這裡跟大家分享一下自己踩的坑,同時也方便自己多記憶下。

大致流程:

使用create-react-app腳手架生成react相關部分,腳手架內部會通過node自動起一個客戶端,然後和普通的ajax請求一樣,和遠端伺服器進行通訊,只不過這裡採用支援rpc通訊的grpc-web來發起請求,遠端採用docker容器的node伺服器,node伺服器端使用envoy作為代理

概念類:

docker是一個包含執行環境和配置的映象容器;   

envoy是一個支援rpc通訊的第三方庫代理通訊;

grpc是一個rpc的框架,面向移動和http/2設計;

grpc-web是grpc的擴充套件,面向web端;

grpc-web地址:https://grpc.io/docs/tutorials/basic/web.html

流程:

先使用腳手架生成react相關程式碼,執行ejcet命令,調出react相關配置,然後按照上面提供的git地址,自己寫一個proto檔案,或者直接從上面下載一個,然後使用proto檔案,生成rpc通訊需要的js檔案,需先全域性安裝protoc包,可使用npm安裝,按官網命令,可順利生成一個pb.js,web_pb.js檔案生成,需額外安裝其它工具包,通過 npm install protoc-gen-grpc -g -unsafe-perm 安裝,如果安裝過程報錯,通過 npm config set unsafe-perm true 先修改npm配置,再通過 npm install protoc-gen-grpc -g 安裝,然後執行官網上的命令,可順利生成這兩個js檔案,pb.js檔案主要用於傳送request,包含request相關函式,web_pb.js檔案主要用於獲取response,包含response相關函式,同時包含請求地址的設定,接下來,按照把官網上的package.json相關依賴包名新增到自己的package.json中,執行 npm install,把生成的兩個js檔案放到自己的專案中,按官網demo正常使用, 然後執行 npm run start 會編譯報錯,這裡涉及到react和grpc整合的兩個問題點,問題1: react的eslint檢測,會檢測出pb.js檔案的部分變數undefined,需要改變react相關配置,在package.json中修改eslintConfig引數,在globals裡面新增 "$": false, "COMPILED": false, "proto": false,  問題2:pb.js檔案是按照common.js規範生成的,需改變package.json中額babel plugin配置,把transform-runtime配置去掉,使其相容common.js的module.export語法,至此,可順利完成編譯,client端完成。然後按照官網上的步驟安裝docker等相關工具,可順利執行server端和envoy,官網docker裡已自己配置了代理環境。

至此,一個簡單的通訊應該可以正常完成。

如果要自己配置envoy代理的話,需要先看下demo裡的envoy.yaml檔案,裡面是一些代理設定,包括監聽的代理地址和server地址,後面認真看下,再回來更新envoy這部分內容。

ps: 各種安裝,各種報錯,還有埠衝突問題,凡事都要多試下,第三方庫很多,有時需要多試幾個,不要在一棵樹上吊死,大家共勉。