如何在React中使用gRPC-web

by Mohak Puri

由Mohak Puri

如何在React中使用gRPC-web (How to use gRPC-web with React)

For the past few months, my team has been working on a gRPC service. A few weeks back a new requirement came in: we needed a web portal to display some information. Since we already had a gRPC backend, the server side was sorted. But for the front-end, we had a few important choices to make.

在过去的几个月中，我的团队一直在致力于gRPC服务。 几周前，出现了一个新要求：我们需要一个Web门户来显示一些信息。 由于我们已经有一个gRPC后端，因此对服务器端进行了排序。 但是对于前端，我们有几个重要的选择。

1. Vue or React (We choose react)2. REST or gRPC from the web portal

If you don’t know what gRPC is you can read about it here. Here are a few reasons that made us choose gRPC over REST.

如果您不知道gRPC是什么，可以在这里阅读有关它的信息 。 以下是一些使我们选择gRPC而不是REST的原因。

1. One major factor for choosing gRPC was the fact that we already had protos that we used in our backend service. We could use the same protos to generate client-side code in javascript.

   选择gRPC的一个主要因素是，我们已经有我们在后端服务中使用过的原型。 我们可以使用相同的原型在javascript中生成客户端代码。

2. Using gRPC would mean that we would not have to write any code for creating the client. Adding new endpoints would mean making changes to the proto and generating client-side code.
   使用gRPC意味着我们不必编写任何代码来创建客户端。 添加新端点将意味着对原型进行更改并生成客户端代码。
3. We needed server-side streaming which is supported by gRPC-web.
   我们需要gRPC-web支持的服务器端流。
4. We already had a setup of envoy for loading balancing our backend service (more on this later).
   我们已经设置了使节来平衡后端服务的特使(稍后会详细介绍)。

注意事项 (Caveats)

1. gRPC web-client won’t send HTTP2 requests. Instead, you need a proxy between your web-client and gRPC backend service for converting that HTTP1 request to HTTP2. gRPC web client has built-in support for Envoy as a proxy. You can find more information about this here.

   gRPC Web客户端不会发送HTTP2请求。 相反，您需要在Web客户端和gRPC后端服务之间使用代理，以将该HTTP1请求转换为HTTP2。 gRPC Web客户端对Envoy作为代理具有内置支持。 您可以在此处找到有关此的更多信息。

2. The teams at Google and Improbable both went on to implement the spec in two different repositories. We will be using gRPC web client provided by Google. You can find the implementation by Google here and by Improbable here.

   Google和Improbable的团队都继续在两个不同的存储库中实施规范。 我们将使用Google提供的gRPC Web客户端。 您可以通过谷歌的执行这里并不大可能在这里 。

3. As of now, client-side streaming is not supported.
   截至目前，不支持客户端流。

Now that we have some idea about gRPC web, below is a diagram depicting how the entire communication will take place. We are going to make a react web application that will send a Ping request and get a Pong response for it.

现在我们对gRPC Web有了一些了解，下面是一个描述整个通信将如何进行的图表。 我们将制作一个ReactWeb应用程序，该应用程序将发送Ping请求并获得Pong响应。

在开始之前，请确保已安装以下组件： (Before starting make sure you have the following installed:)

1. npm (Node package manager) - For generating react project2. Docker - For running envoy locally3. protoc - For generating code using protos

There are 3 pieces to this puzzle. We are going to tackle each of them one by one.

这个难题有3个部分。 我们将一一解决。

1.用户界面-网站使用react (1. User Interface — Website using react)

For creating a react project, we will use the create-react-app command.

为了创建一个React项目，我们将使用create-react-app命令。

create-react-app learn-react-grpc

Now that we have a sample project in place, let’s create a proto. This is what a ping pong proto looks like.

现在我们已经有了一个示例项目，让我们创建一个原型。 这就是乒乓球原型的样子。

For subsequent commands to run, make sure that the proto is inside the src/ folder of the react project. For generating client-side code in javascript, run the following command:

要运行后续命令，请确保原型位于react项目的src /文件夹中。 要在javascript中生成客户端代码，请运行以下命令：

protoc -I=. src/ping_pong.proto --js_out=import_style=commonjs:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

This will generate two new files: ping_pong_pb.js and ping_pong_grpc_web_pb.js, with all the generated code in it. We will use this code to make requests to our gRPC service.

这将生成两个新文件： ping_pong_pb.js和ping_pong_grpc_web_pb.js，其中包含所有生成的代码。 我们将使用此代码向我们的gRPC服务发出请求。

First, let’s update our package.json with a few gRPC and protobuf related dependencies and then run npm install.

首先，让我们使用一些与gRPC和protobuf相关的依赖项来更新package.json，然后运行npm install 。

Below is the entire logic for building our website. You can use this code in your App.js file. It is a really simple website which contains a button, clicking on which creates a ping pong request and gets a response.

以下是构建我们的网站的全部逻辑。 您可以在App.js文件中使用此代码。 这是一个非常简单的网站，其中包含一个按钮，单击该按钮将创建一个乒乓请求并得到响应。

Now if you run the node server using npm start, you are likely to face this compilation issue. This is apparently an issue when using gRPC-web with a project created using create-react-app command line interface.

现在，如果您使用npm start运行节点服务器，则可能会遇到此编译问题。 将gRPC-web与通过create-react-app命令行界面创建的项目一起使用时，这显然是一个问题。

However, this issue can be fixed by adding eslint-disable to all of the proto generated files. Make sure that you do this for all the files. Now if you start the server, everything should be working.

但是，可以通过将eslint-disable添加到所有原始生成的文件中来解决此问题。 确保对所有文件都执行此操作。 现在，如果您启动服务器，一切都应该正常工作。

2.后端-Node中的gRPC服务器 (2. Backend — gRPC server in Node)

Let’s create a simple node server. We will be using the same proto that we used in our react app. Let’s create a node js application node-ping-pong-server. Here is our sample server.js file.

让我们创建一个简单的节点服务器。 我们将使用与React应用中相同的原型。 让我们创建一个节点js应用程序node-ping-pong-server。 这是我们的示例server.js文件。

We can run the node server using the following command:

我们可以使用以下命令运行节点服务器：

node server.js

3.代理人-特使 (3. Proxy — Envoy)

As mentioned above, we will be using Docker for setting up envoy. Here is the docker file. As of writing, the latest tag points to Envoy version 1.11. Create a Dockerfile inside src/ folder of your react app.

如上所述，我们将使用Docker设置特使。 这是docker文件。 在撰写本文时，最新标签指向Envoy 版本1.11。 在您的react应用程序的src /文件夹中创建一个Dockerfile。

Before running the Docker container, we need to make sure that we have a config file for envoy. Add this envoy.yml inside the src/ folder of your react app.

在运行Docker容器之前，我们需要确保有一个用于envoy的配置文件。 将此envoy.yml添加到react应用的src /文件夹中。

Let’s understand what this envoy configuration file does:

让我们了解此特使配置文件的作用：

9901 is the port where envoy admin portal is running. You can use this portal to check envoy routes, health checks and a lot more.

9901是使节管理门户运行的端口。 您可以使用此门户网站来检查特使路线，运行状况检查等等。

9090 is the port where envoy is listening for incoming requests. Our website will make a request to envoy on this port.

9090是使节正在侦听传入请求的端口。 我们的网站将要求在此港口进行特使。

Any request that matches the above prefix is routed to the ping_pong_service cluster. Since our node server (aka cluster) is running on the host machine (your laptop) and not the docker container, we need to route those request out of the container to the host. host.docker.internal does exactly this.

与上述前缀匹配的所有请求都将路由到ping_pong_service群集。 由于我们的节点服务器(又名集群)在主机(您的笔记本电脑)而不是Docker容器上运行，因此我们需要将这些请求从容器中路由到主机。 host.docker.internal正是这样做的。

Now let’s build our docker image using the following command:

现在让我们使用以下命令构建我们的docker映像：

docker build -t mohak1712/learn-grpc-web .

Now let’s run the docker image:

现在让我们运行docker镜像：

docker run -d -p 9090:9090 mohak1712/learn-grpc-web

We need to forward host port 9090 to the containers port 9090 so that any request on port 9090 is forwarded to the docker container where envoy is running.

我们需要将主机端口9090转发到容器端口9090，以便将端口9090上的任何请求转发到运行envoy的docker容器。

最终输出 (Final Output)

Now that everything is set up, make sure that the website, node server and envoy container are running. You can run the following set of commands in case you still haven’t.

现在已经完成所有设置，请确保网站，节点服务器和特使容器正在运行。 如果您仍然没有，可以运行以下命令。

npm start -> start web server

node server.js -> start node server

docker run -d -p 9090:9090 mohak1712/learn-grpc-web -> start envoy

Now when you click on the button, it sends a Ping request and gets a Pong response for it!

现在，当您单击按钮时，它会发送一个Ping请求并得到Pong响应！

That’s about it! Thank you for reading, and I hope you enjoyed the article.

就是这样！ 感谢您的阅读，希望您喜欢这篇文章。

You can follow me on Medium and Github :)

您可以在Medium和Github上关注我：)

翻译自: https://www.freecodecamp.org/news/how-to-use-grpc-web-with-react-1c93feb691b5/