grpcwebproxy代理服务2步启动

在看这篇文章之前，先要做好前提工作

1、搭建一个gRPC服务：http://fenxianglu.cn/article/238
2、解析.proto文件为js文件：http://fenxianglu.cn/article/246

上面两步处理完成后，再搭建代理服务，不然前端是不能直连grpc服务的

一、安装启动

1、下载

下载地址：https://github.com/improbable...

按操作系统选择，这里以 grpcwebproxy-v0.13.0-win64.exe.zip 为例

下载完成后把 grpcwebproxy.exe 放到项目根目录即可

2、启动

到存放 grpcwebproxy.exe 目录，打开命令行，执行以下命令

> grpcwebproxy --allow_all_origins --backend_addr=localhost:50051 --run_tls_server=false --server_http_debug_port=5005
time="2020-09-09T11:16:09+08:00" level=info msg="parsed scheme: \"\"" system=system
time="2020-09-09T11:16:09+08:00" level=info msg="scheme \"\" not registered, fallback to default scheme" system=system
time="2020-09-09T11:16:09+08:00" level=info msg="ccResolverWrapper: sending update to cc: {[{localhost:50051 0  <nil>}] }" system=system

这样服务就启动了。

grpcwebproxy 相应参数项：

参数	值	描述
backend_addr	127.0.0.1:50051	要代理的服务ip和端口
run_tls_server	true或false	是否开启tls_server，默认为true
server_http_debug_port	5005	http调试端口
allow_all_origins	true或false	是否允许跨域，默认false
use_websockets	true或false	是否启用websockets，默认false
server_http_max_read_timeout	10s	http服务最大读取超时
server_http_max_write_timeout	10s	http服务最大写入超时
backend_max_call_recv_msg_size	4 1024 1024	传输消息最大内容限制，默认4MB

查看代理服务是否启动成功，直接访问：http://localhost:5005/

最后依据第2步解析.proto文件的介绍，在.vue script中使用

import {
  GreeterClient
} from '@/assets/protos/HelloWorld_grpc_web_pb.js';

import { HelloRequest } from '@/assets/protos/HelloWorld_pb.js';

let client = new GreeterClient('http://localhost:5005');

let helloRequest = new HelloRequest();
helloRequest.setName('tom');
helloRequest.setCity('合肥');

client.sayHello(helloRequest, {}, (err, response) => {
  console.log(err, response);
});

启动vue项目访问即可看到