通过Envoy Docker将React Web客户端连接到gRPC服务器无法工作

要通过Envoy Docker将React Web客户端连接到gRPC服务器，您可以按照以下步骤解决问题：

步骤1：确保React Web客户端可以直接连接到gRPC服务器，而不通过Envoy。这可以帮助排除React Web客户端或gRPC服务器的任何配置或连接问题。

步骤2：确保您的Envoy配置正确。在Envoy的配置文件中，您需要指定gRPC服务的上游主机和端口。确保主机和端口与gRPC服务器的配置匹配。以下是一个示例配置文件：

static_resources:
  listeners:
    - name: listener_0
      address:
        socket_address: { address: 0.0.0.0, port_value: 8080 }
      filter_chains:
        - filters:
            - name: envoy.http_connection_manager
              typed_config:
                "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
                stat_prefix: ingress_http
                codec_type: auto
                route_config:
                  name: local_route
                  virtual_hosts:
                    - name: backend
                      domains: ["*"]
                      routes:
                        - match: { prefix: "/" }
                          route:
                            cluster: backend_service
                            timeout: 0s
                            max_grpc_timeout: 0s
                http_filters:
                  - name: envoy.router
  clusters:
    - name: backend_service
      connect_timeout: 0.25s
      type: logical_dns
      dns_lookup_family: V4_ONLY
      lb_policy: round_robin
      load_assignment:
        cluster_name: backend_service
        endpoints:
          - lb_endpoints:
              - endpoint:
                  address:
                    socket_address:
                      address: grpc_server
                      port_value: 50051

在上述示例中，grpc_server是gRPC服务器的主机名，50051是gRPC服务器的端口号。确保您的配置文件中的主机和端口与gRPC服务器的设置匹配。

步骤3：确保您的React Web客户端代码正确连接到Envoy代理。在React Web客户端代码中，您需要指定Envoy代理的主机和端口，作为gRPC服务器的终端。以下是一个示例代码片段：

import { grpc } from "@improbable-eng/grpc-web";
import { MyService } from "./my_service_pb_service";

const client = new MyService("http://envoy_proxy:8080", null, null);

在上述示例中，envoy_proxy是Envoy代理的主机名，8080是Envoy代理的端口号。确保您的React Web客户端代码中的主机和端口与Envoy代理的设置匹配。

步骤4：在运行React Web客户端和Envoy代理的Docker容器时，确保它们在同一个网络中，并且可以相互通信。您可以使用Docker Compose或手动创建网络来实现这一点。

version: "3"
services:
  react_client:
    build: .
    ports:
      - "3000:3000"
    networks:
      - my_network
  envoy_proxy:
    image: envoyproxy/envoy:v1.18.3
    volumes:
      - ./envoy.yaml:/etc/envoy/envoy.yaml
    ports:
      - "8080:8080"
    networks:
      - my_network

networks:
  my_network:

在上述示例中，React Web客户端和Envoy代理都在my_network网络中，并且可以通过主机名进行通信。

通过按照以上步骤操作，您应该能够将React Web客户端成功连接到gRPC服务器，通过Envoy代理进行通信。