0%

grpc-web demo跑起来

最近调研区块链钱包插件的技术可行性,其中牵扯到grpc技术,官方repo有demo,但正常跑起有些门槛儿的,因此这里总结下。

安装

protobuf

1
2
3
4
5
# 推荐安装方式,这样不需要再编译及进行环境变量配置
$ brew install protobuf

# 验证安装成功
$ protoc --version

protoc-gen-grpc-web

为了生成PB定义服务的Web端代码需要安装该工具

protoc-gen-grpc-web需要手动安装下,访问https://github.com/grpc/grpc-web/releases

比如我的intel-Mac,下载protoc-gen-grpc-web-1.3.0-darwin-x86https://grpc.io/_64

执行以下命令

1
2
3
4
5
$ sudo mv ~/Downloads/protoc-gen-grpc-web-1.3.0-darwin-x86_64 \
/usr/local/bin/protoc-gen-grpc-web

$ sudo chmod +x /usr/local/bin/protoc-gen-grpc-web

同上,终端输入protoc-gen-grpc-web发现可以识别即表示安装成功。

protoc-gen-grpc-web的安装太麻烦了,定个flag,维护个npm包方便下大家下载安装。

测试

按照定义的PB格式文件生成对应的JS版代码。

1
2
$ protoc -I=. helloworld.proto --js_out=import_style=commonjs:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

构建启动

以上步骤完成后,环境层问题即解决。紧接着按照readme的启动步骤一步步执行即可。

![image-20211221105429713](/Users/alanhe/Library/Application Support/typora-user-images/image-20211221105429713.png)

注意

如果开发机是Mac平台,需要如下两点修改

  • envoy.yaml配置修改

    1
    address: host.docker.internal

    注意,只需要修改这一句即可

  • docker 启动命令调整-去掉network设定

    ```shell
    $ docker run -d -v “$(pwd)”/envoy.yaml:/etc/envoy/envoy.yaml:ro \

  • p 8080:8080 -p 9901:9901 envoyproxy/envoy:v1.20.0

错误

Http response at 400 or 500 level

启动后,如果遇到该错误,即网络服务不同,查看服务是否正常启动,比如上述代理配置错造成容器通讯问题。如果是envoy代理的某节点挂掉也会导致报错。

补充使用

  1. brew search package可以搜索包有哪些版本源
  2. brew install package@versionNumber 可以直接安装目标版本

参考文档

写在最后

初步尝试下,有以下几点认识

  • gRPC 默认通过 Protocol Buffers 来定义接口。因此grpc使用牵扯到pb
  • gRPC Web是gRPC协议在浏览器端的javascript实现,但想真的连接grpc-server需要代理服务,比如Envoy/Nginx等
  • gRPC Web使Web能间接与后端gRPC服务通信