Open huangshuwei opened 3 years ago
grpc-web 封装了常用的API ,允许我们从浏览器访问 grpc 服务。envoy 允许我们将浏览器的请求转发到grpc 服务上。截止目前位置,envoy 配置是必须的。 至于为什么要使用 envoy,可以参考这个issue
示例项目:https://github.com/huangshuwei/vue-grpc-demo
下载并安装 docker
在windows 环境你需要使用docker 安装 envoy
安装好docker 你可以使用 docker 安装 envoy 了
docker pull envoyproxy/envoy:v1.17.0 docker run --rm envoyproxy/envoy:v1.17.0 --version
此处从官方示例拿过来,稍作修改。
官方示例如果使用grpc 服务端流模式会 15秒自动断开链接
我们将览器的 gRPC-Web 请求转发到后端。把这个放到 envoy.yaml 文件夹里。在这里,我们配置了envoy 去监听8080端口,并将请求转发到端口 8090上。
admin: access_log_path: /tmp/admin_access.log address: socket_address: { address: 0.0.0.0, port_value: 9902 } static_resources: listeners: - name: listener_0 address: socket_address: { address: 0.0.0.0, port_value: 8080 } filter_chains: - filters: - name: envoy.filters.network.http_connection_manager typed_config: "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager codec_type: auto stat_prefix: ingress_http route_config: name: local_route virtual_hosts: - name: local_service domains: ["*"] routes: - match: { prefix: "/" } route: cluster: greeter_service max_grpc_timeout: 0s # 此处纠正了官方15秒断开链接的bug cors: allow_origin_string_match: - prefix: "*" allow_methods: GET, PUT, DELETE, POST, OPTIONS allow_headers: keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout max_age: "1728000" expose_headers: custom-header-1,grpc-status,grpc-message http_filters: - name: envoy.filters.http.grpc_web - name: envoy.filters.http.cors - name: envoy.filters.http.router clusters: - name: greeter_service connect_timeout: 0.25s type: logical_dns http2_protocol_options: {} lb_policy: round_robin # win/mac hosts: Use address: host.docker.internal instead of address: localhost in the line below load_assignment: cluster_name: cluster_0 endpoints: - lb_endpoints: - endpoint: address: socket_address: address: 0.0.0.0 # 此处换成你需要代理的 grpc 服务地址 port_value: 8090
前提是已经写好了客户端和服务端的代码,就可以根据这里参考上一篇文章
启动nodejs grpc 服务 nodejs 服务端口记得和 envoy 代理配置保持一致,上面 nodejs 服务端口为 8090
$ node server.js
启动 envoy 代理服务 我们使用docker 启动。官方模板命令:
$ docker run -d -v "$(pwd)"/envoy.yaml:/etc/envoy/envoy.yaml:ro \ -p 8080:8080 -p 9901:9901 envoyproxy/envoy:v1.17.0
"$(pwd)" 需要替换成你的真是地址,如我的示例命令:
$ docker run --name node-server-app -d -v G:\practice\grpc-tourist\vue-grpc-demo\envoy-node.yaml:/etc/envoy/envoy.yaml:ro -p 8090:8090 -p 9902:9902 envoyproxy/envoy:v1.17.0
如果启动报错,记得检查是否和本地端口重复
启动你的前端项目 此处具体操作依赖你的前端项目方式,推荐使用 vue-cli 搭建,简单省事。
前言
grpc-web 封装了常用的API ,允许我们从浏览器访问 grpc 服务。envoy 允许我们将浏览器的请求转发到grpc 服务上。截止目前位置,envoy 配置是必须的。 至于为什么要使用 envoy,可以参考这个issue
示例项目:https://github.com/huangshuwei/vue-grpc-demo
安装docker 容器
下载并安装 docker
安装 envoy
安装好docker 你可以使用 docker 安装 envoy 了
envoy 配置
此处从官方示例拿过来,稍作修改。
我们将览器的 gRPC-Web 请求转发到后端。把这个放到 envoy.yaml 文件夹里。在这里,我们配置了envoy 去监听8080端口,并将请求转发到端口 8090上。
生成Protobuf消息和客户端服务存根
前提是已经写好了客户端和服务端的代码,就可以根据这里参考上一篇文章
运行示例
启动nodejs grpc 服务 nodejs 服务端口记得和 envoy 代理配置保持一致,上面 nodejs 服务端口为 8090
启动 envoy 代理服务 我们使用docker 启动。官方模板命令:
"$(pwd)" 需要替换成你的真是地址,如我的示例命令:
如果启动报错,记得检查是否和本地端口重复
启动你的前端项目 此处具体操作依赖你的前端项目方式,推荐使用 vue-cli 搭建,简单省事。
链接