很久沒寫總結了，在這裡跟大家分享一下自己踩的坑，同時也方便自己多記憶下。 大致流程： 使用create-react-app腳手架生成react相關部分，腳手架內部會通過node自動起一個客戶端，然後和普通的ajax請求一樣，和遠端伺服器進行通信，只不過這裡採用支持rpc通信的grpc-web來發起請 ...
很久沒寫總結了，在這裡跟大家分享一下自己踩的坑，同時也方便自己多記憶下。
大致流程：
使用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: 各種安裝，各種報錯，還有埠衝突問題，凡事都要多試下，第三方庫很多，有時需要多試幾個，不要在一棵樹上吊死，大家共勉。
