很久沒寫總結了，在這里跟大家分享一下自己踩的坑，同時也方便自己多記憶下。
大致流程：
使用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: 各種安裝，各種報錯，還有端口沖突問題，凡事都要多試下，第三方庫很多，有時需要多試幾個，不要在一棵樹上吊死，大家共勉。