grpcwebproxy代理服务2步启动

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

1、搭建一个gRPC服务：nodejs grpc服务搭建

2、解析.proto文件为js文件：protoc-gen-grpc-web解析.proto文件

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

一、安装启动

1、下载

下载地址：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项目访问即可看到

fenxianglu.cn/