windows10 基于grpc-web 的 envoy 代理配置

[huangshuwei]

前言

grpc-web 封装了常用的API ,允许我们从浏览器访问 grpc 服务。envoy 允许我们将浏览器的请求转发到grpc 服务上。截止目前位置，envoy 配置是必须的。
至于为什么要使用 envoy，可以参考这个issue

示例项目：https://github.com/huangshuwei/vue-grpc-demo

安装docker 容器

下载并安装 docker

在windows 环境你需要使用docker 安装 envoy

安装 envoy

安装好docker 你可以使用 docker 安装 envoy 了

docker pull envoyproxy/envoy:v1.17.0
docker run --rm envoyproxy/envoy:v1.17.0 --version

envoy 配置

此处从官方示例拿过来，稍作修改。

官方示例如果使用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

生成Protobuf消息和客户端服务存根

前提是已经写好了客户端和服务端的代码，就可以根据这里参考上一篇文章

运行示例

启动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 官方示例