Use the gRPC-Web plugin to proxy HTTP requests to a gRPC service

Uses: Kong Gateway decK

Deployment Platform:

Prerequisites

Kong Konnect

This is a Konnect tutorial and requires a Konnect personal access token.

Create a new personal access token by opening the Konnect PAT page and selecting Generate Token.
Export your token to an environment variable:
```
 export KONNECT_TOKEN='YOUR_KONNECT_PAT'
```
Copied to clipboard!
Run the quickstart script to automatically provision a Control Plane and Data Plane, and configure your environment:
```
 curl -Ls https://get.konghq.com/quickstart | bash -s -- -k $KONNECT_TOKEN --deck-output
```
Copied to clipboard!
This sets up a Konnect Control Plane named quickstart, provisions a local Data Plane, and prints out the following environment variable exports:
```
 export DECK_KONNECT_TOKEN=$KONNECT_TOKEN
 export DECK_KONNECT_CONTROL_PLANE_NAME=quickstart
 export KONNECT_CONTROL_PLANE_URL=https://us.api.konghq.com
 export KONNECT_PROXY_URL='http://localhost:8000'
```
Copied to clipboard!
Copy and paste these into your terminal to configure your session.

Kong Gateway running

This tutorial requires Kong Gateway Enterprise. If you don’t have Kong Gateway set up yet, you can use the quickstart script with an enterprise license to get an instance of Kong Gateway running almost instantly.

Export your license to an environment variable:
```
 export KONG_LICENSE_DATA='LICENSE-CONTENTS-GO-HERE'
```
Copied to clipboard!
Run the quickstart script:
```
curl -Ls https://get.konghq.com/quickstart | bash -s -- -e KONG_LICENSE_DATA 
```
Copied to clipboard!
Once Kong Gateway is ready, you will see the following message:
```
 Kong Gateway Ready
```

decK

Create a Protobuf definition

Use the following command to create a sample Protobuf definition:

echo 'syntax = "proto2";

package hello;

service HelloService {
 rpc SayHello(HelloRequest) returns (HelloResponse);
 rpc LotsOfReplies(HelloRequest) returns (stream HelloResponse);
 rpc LotsOfGreetings(stream HelloRequest) returns (HelloResponse);
 rpc BidiHello(stream HelloRequest) returns (stream HelloResponse);
}

message HelloRequest {
 optional string greeting = 1;
}

message HelloResponse {
 required string reply = 1;
}
' > hello.proto

      
        
      
    
Copied to clipboard!

This sample definition uses SayHello method available on grpcb.in.

Add the Protobuf definition to your Docker container

Since Konnect data plane container names can vary, set your container name as an environment variable:

export KONNECT_DP_CONTAINER='your-dp-container-name'

Copied to clipboard!

Use the following command to add hello.proto to the /usr/local/kong directory in your Kong Gateway Docker container:

docker cp hello.proto $KONNECT_DP_CONTAINER:/usr/local/kong

Copied to clipboard!

Create a Gateway Service and a Route

In this example, we want a Route that serves the HTTP protocol but proxies to a Gateway Service with the gRPC protocol. For testing purposes, we’ll use grpcb.in as the upstream service.

echo '
_format_version: "3.0"
services:
  - name: example-grpc-service
    protocol: grpc
    host: grpcb.in
    port: 9000
routes:
  - name: http-route
    protocols:
    - http
    paths:
    - "/"
    service:
      name: example-grpc-service
' | deck gateway apply -

      
        
      
    
Copied to clipboard!

Enable the gRPC-Web plugin

Configure the plugin to use the Protobuf definition we created:

echo '
_format_version: "3.0"
plugins:
  - name: grpc-web
    route: http-route
    config:
      proto: usr/local/kong/hello.proto
' | deck gateway apply -

      
        
      
    
Copied to clipboard!

Validate

To validate that the configuration is working as expected, send a POST request to one of the RPC methods used in the Protobuf definition.

For example:

 curl -X POST "$KONNECT_PROXY_URL/hello.HelloService/SayHello" \
     -H "x-grpc: true"\
     -H "Content-Type: application/json" \
     --json '{
       "greeting": "MyName"
     }'

Copied to clipboard!

 curl -X POST "http://localhost:8000/hello.HelloService/SayHello" \
     -H "x-grpc: true"\
     -H "Content-Type: application/json" \
     --json '{
       "greeting": "MyName"
     }'

Copied to clipboard!

Cleanup

Clean up Konnect environment

If you created a new control plane and want to conserve your free trial credits or avoid unnecessary charges, delete the new control plane used in this tutorial.