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: 各种安装，各种报错，还有端口冲突问题，凡事都要多试下，第三方库很多，有时需要多试几个，不要在一棵树上吊死，大家共勉。

巴特西

grpc-web与react的集成

最新文章

热门文章