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的集成的更多相关文章
- 将React Native集成至Android原生应用
将React Native集成至Android原生应用 Android Studio 2.1 Preview 4生成的空项目 react-native 环境 0.22.2 初次编译后apk有1.1M, ...
- Angular团队公布路线图,并演示怎样与React Native集成
本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧 ...
- Selenium Web 自动化 - 项目持续集成(进阶)
Selenium Web 自动化 - 项目持续集成(进阶) 2017-03-09 目录 1 背景及目标2 环境配置 2.1 SVN的安装及使用 2.2 新建Jenkins任务3 过程分析 1 背景 ...
- Selenium Web 自动化 - 项目持续集成
Selenium Web 自动化 - 项目持续集成 2017-02-13 目录 1环境准备 1.1 安装git 1.2 安装jenkins 1.3 安装jenkins插件 1.4 jekins ...
- 【重磅】iNeuOS工业互联平台,系统集成业务模型和WEB组态视图建模集成3D模型
目 录 1. 概述... 1 2. 平台演示... 2 3. 系统集成业务模型... 2 4. WEB组态视图建模集成3D模型... 3 5. ...
- Blazor WebAssembly + Grpc Web = 未来?
Blazor WebAssembly是什么 首先来说说WebAssembly是什么,WebAssembly是一个可以使C#,Java,Golang等静态强类型编程语言,运行在浏览器中的标准,浏览器厂商 ...
- 使用tailor 轻松方便的集成web 框架react&&vue
tailor 是一款很方便的layout 服务,类似facebook 的bigpipe,我们可以使用此工具 方便的集成各类web 框架,实现micro-fronteds 开发 参考demo https ...
- 用WijmoJS搭建您的前端Web应用 —— React
前文回顾 在本系列文章中,我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法. 而今天,我们将展示如何使用 WijmoJS 来搭建一款具备独特创新性.出色性能和简单代码逻辑的 Reac ...
- 使用Gradle构建构建一个Java Web工程及持续集成环境Jenkins配置
安装Eclipse插件——Buildship 什么是Buildship? Buildship能方便我们通过Eclipse IDE创建和导入Gradle工程,同时还能执行Gradle任务. Eclips ...
随机推荐
- hdu1542 线段树+扫描线+离散化
仅仅想说题目给的欲实际不服 还是这类型的水题吧 建议看之前我写的那个 #include<stdio.h> #include<string.h> #include&l ...
- 使用jQuery.makeArray() 将多种类型转换成JS原生Array
jQuery.makeArray(obj)这个函数从名字上来看非常easy猜出它的用途:应该是用来将传入的对象转换成一个原生array 再看看官网上对它的解释:Convert an array-lik ...
- WPF学习笔记——为BUTTON添加背景图片
首先要肯定,代码: <Style x:Key="UserItemButton" TargetType="Button"> <Setter Pr ...
- HDU5195 线段树+拓扑
DZY Loves Topological Sorting Problem Description A topological sort or topological ordering of a di ...
- java的list类
java的list类 目录: list中添加,获取,删除元素: list中是否包含某个元素: list中根据索引将元素数值改变(替换): list中查看(判断)元素的索引: 根据元素索引位置进行的判断 ...
- 动态规划---状压dp2
今天模拟,状压dp又没写出来...还是不会啊,所以今天搞一下这个状压dp.这里有一道状压dp的板子题: Corn FieldsCorn Fields 就是一道很简单的状压裸题,但是要每次用一个二进制数 ...
- 解析HTML文件
#!/usr/bin/env python3 # -*- coding: UTF-8 -*- from bs4 import BeautifulSoup import operator import ...
- Spark底层原理简化版
目录 Spark SQL/DF的执行过程 集群运行部分 Aggregation Join Shuffle Tungsten 内存管理机制 缓存敏感计算(Cacheaware computation) ...
- [转]rdlc报表中表达式的使用--switch和IIF范例
本文转自:http://hi.baidu.com/oypx1234/item/5b35dec4e03a3ad697445266 =Switch( Fields!MLWHLO.Value = " ...
- A - Petya and Strings
Problem description Little Petya loves presents. His mum bought him two strings of the same size for ...