grpcwebproxy代理服务2步启动丨技术开发分享录

grpcwebproxy代理服务2步启动

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"在看这篇文章之前,先要做好**前提工作**\n\n1、搭建一个gRPC服务:http://fenxianglu.cn/article/238\n2、解析`.proto`文件为js文件:http://fenxianglu.cn/article/246\n\n上面两步处理完成后,再搭建代理服务,不然前端是不能直连grpc服务的\n\n## 一、安装启动\n\n### 1、下载\n\n下载地址:https://github.com/improbable-eng/grpc-web/releases/tag/v0.13.0\n\n按操作系统选择,这里以 `grpcwebproxy-v0.13.0-win64.exe.zip` 为例\n\n下载完成后把 `grpcwebproxy.exe` 放到项目根目录即可\n\n### 2、启动\n\n到存放 `grpcwebproxy.exe` 目录,打开命令行,执行以下命令\n\n```cmd\n> grpcwebproxy --allow_all_origins --backend_addr=localhost:50051 --run_tls_server=false --server_http_debug_port=5005\ntime=\"2020-09-09T11:16:09+08:00\" level=info msg=\"parsed scheme: \\\"\\\"\" system=system\ntime=\"2020-09-09T11:16:09+08:00\" level=info msg=\"scheme \\\"\\\" not registered, fallback to default scheme\" system=system\ntime=\"2020-09-09T11:16:09+08:00\" level=info msg=\"ccResolverWrapper: sending update to cc: {[{localhost:50051 0  <nil>}] }\" system=system\n```\n\n这样服务就启动了。\n\n[grpcwebproxy](https://github.com/improbable-eng/grpc-web/tree/master/go/grpcwebproxy) 相应参数项:\n\n| 参数 | 值 | 描述 |\n|: --- |: --- |: --- |\n| backend_addr | 127.0.0.1:50051 | 要代理的服务ip和端口 |\n| run_tls_server | true或false | 是否开启tls_server,默认为true |\n| server_http_debug_port | 5005 | http调试端口 |\n| allow_all_origins | true或false | 是否允许跨域,默认false |\n| use_websockets | true或false | 是否启用websockets,默认false |\n| server_http_max_read_timeout | 10s | http服务最大读取超时 |\n| server_http_max_write_timeout | 10s | http服务最大写入超时 |\n| backend_max_call_recv_msg_size | 4 * 1024 * 1024 | 传输消息最大内容限制,默认4MB |\n\n查看代理服务是否启动成功,直接访问:[http://localhost:5005/](http://localhost:5005/)\n\n![image.png](/images/articles/image20200909114504.png)\n\n最后依据第2步解析`.proto`文件的介绍,在`.vue` script中使用\n\n```\nimport {\n  GreeterClient\n} from '@/assets/protos/HelloWorld_grpc_web_pb.js';\n\nimport { HelloRequest } from '@/assets/protos/HelloWorld_pb.js';\n\nlet client = new GreeterClient('http://localhost:5005');\n\nlet helloRequest = new HelloRequest();\nhelloRequest.setName('tom');\nhelloRequest.setCity('合肥');\n\nclient.sayHello(helloRequest, {}, (err, response) => {\n  console.log(err, response);\n});\n```\n\n启动vue项目访问即可看到\n\n![image.png](/images/articles/image20200909114755.png)\n\n"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看