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: 各類安裝，各類報錯，還有端口衝突問題，凡事都要多試下，第三方庫不少，有時須要多試幾個，不要在一棵樹上吊死，你們共勉。