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

大致流程：

使用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: 各種安裝，各種報錯，還有埠衝突問題，凡事都要多試下，第三方庫很多，有時需要多試幾個，不要在一棵樹上吊死，大家共勉。