Автор оригинала: FreeCodeCamp Community Member.
Мохак Пури.
За последние несколько месяцев моя команда работает над услугой GRPC. Несколько недель назад появилось новое требование: нам нужен был веб-портал для отображения некоторой информации. Поскольку у нас уже была бэкэнда GRPC, сторона сервера была отсортирована. Но для интерфейса у нас было несколько важных вариантов.
1. Vue or React (We choose react)2. REST or gRPC from the web portal
Если вы не знаете, какой GRPC вы можете прочитать об этом здесь . Вот несколько причин, которые заставили нас выбрать GRPC на отдых.
- Одним из основных факторов для выбора GRPC был тот факт, что у нас уже были прототы, которые мы использовали в нашей Backend Service. Мы могли бы использовать те же прототы для генерации кода на стороне клиента в JavaScript Отказ
- Использование GRPC означало бы, что нам не придется писать любой код для создания клиента. Добавление новых конечных точек означало бы внесение изменений в прото и генерируют код на стороне клиента.
- Нам нужна тетовая сторона сервера, которая поддерживается GRPC-Web.
- У нас уже была установка посланника для погрузки балансировки нашего Backend Service (подробнее позже).
Оговорки
- Web-Client GRPC не отправит запросы http2. Вместо этого вам нужен прокси между вашим веб-клиентом и Backend Service GRPC для преобразования запроса HTTP1 HTTP2. Web Client GRPC имеет встроенную поддержку для посланника как прокси. Вы можете найти больше информации об этом здесь Отказ
- Команды в Google и невероятные оба продолжали реализовать спецификацию в двух разных репозиториях. Мы будем использовать GRPC Web Client, предоставляемый Google. Вы можете найти реализацию Google здесь и невероятно здесь Отказ
- На данный момент корточка на стороне клиента не поддерживается.
Теперь, когда у нас есть некоторая идея о Интернете GRPC, ниже – диаграмма, изображающая, как будет проходить все общение. Мы собираемся сделать веб-приложение ract, которое отправит Пинг Запрос и получи Понг ответ на это.
Перед началом убедитесь, что у вас установлено следующее:
1. npm (Node package manager) - For generating react project2. Docker - For running envoy locally3. protoc - For generating code using protos
Есть 3 части к этой головоломке. Мы собираемся решать каждый из них один за другим.
1. Пользовательский интерфейс – веб-сайт с использованием реагирования
Для создания проекта реагирования мы будем использовать Create-React-App команда.
create-react-app learn-react-grpc
Теперь, когда у нас есть образец проекта на месте, давайте создадим прото. Вот как выглядит протон Ping Pong.
Для последующих команд для запуска убедитесь, что прото отображается внутри SRC/папка проекта React. Для создания клиентского кода в JavaScript запустите следующую команду:
protoc -I=. src/ping_pong.proto --js_out=import_style=commonjs:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.
Это создаст два новых файла: ping_pong_pb.js и ping_pong_grpc_web_pb.js, со всем генерируемым кодом в нем. Мы будем использовать этот код, чтобы сделать запросы на нашу услугу GRPC.
Во-первых, давайте обновим наш Package.json с несколькими связанными зависимостями GRPC и Protobuf, а затем запустить Установка NPM .
Ниже вся логика для создания нашего сайта. Вы можете использовать этот код в вашем файле App.js. Это действительно простой веб-сайт, который содержит кнопку, нажав на котором создает запрос Ping Pong и получает ответ.
Теперь, если вы запустите сервер узла, используя Начните NPM, Вы, вероятно, столкнетесь с этой проблемой компиляции. Это, очевидно, проблема при использовании GRPC-Web с проектом, созданным с использованием Create-React-App Интерфейс командной строки Отказ
Однако эта проблема может быть исправлена путем добавления eslint-disable Для всех протографированных файлов. Убедитесь, что вы делаете это для Все файлы. Теперь, если вы начнете сервер, все должно работать.
2. Backend – сервер GRPC в узле
Давайте создадим простой сервер узла. Мы будем использовать один и тот же прото, который мы использовали в нашем приложении React. Давайте создадим узел JS приложение Node-Ping-Pong-Server. Вот наш образец файла server.js.
Мы можем запустить сервер узла, используя следующую команду:
node server.js
3. Прокси – посланник
Как уже упоминалось выше, мы будем использовать Docker для настройки посланника. Вот файл докера. Как написать, последний тег указывает на посланник Версия 1.11. Создайте DockerFile внутри SRC/папку вашего приложения React.
Перед запуском контейнера Docker мы должны убедиться, что у нас есть файл конфигурации для посланника. Добавьте это Encoy.yml внутри SRC/папку вашего приложения React.
Давайте понять, что делает этот файл конфигурации посланника:
9901 – это порт, где работает портал администратора поклонника. Вы можете использовать этот портал, чтобы проверить маршруты посланников, проверки здоровья и намного больше.
9090 – это порт, где посланник прослушивает входящие запросы. Наш сайт сделает запрос на посланницу на этом порту.
Любой запрос, который соответствует вышеуказанному префиксу, направляется в кластер Ping_Pong_Service. Поскольку наш узел Server (AKA Cluster) работает на хост-машина (ваш ноутбук), а не контейнер Docker, нам нужно сделать эти запросы из контейнера к хосту. Host.Docker.internal делает именно это.
Теперь давайте создадим наш документ Docker, используя следующую команду:
docker build -t mohak1712/learn-grpc-web .
Теперь давайте запустим изображение докера:
docker run -d -p 9090:9090 mohak1712/learn-grpc-web
Нам нужно пересылать порт 9090 хоста 9090 к порту 9090 контейнеров, чтобы любой запрос на порту 9090 переадресован в контейнер докена, где работает поклон.
Окончательный выход
Теперь, когда все настроено, убедитесь, что веб-сайт, сервер узла и контейнер поклонника. Вы можете запустить следующий набор команд на случай, если у вас еще нет.
npm start -> start web server
node server.js -> start node server
docker run -d -p 9090:9090 mohak1712/learn-grpc-web -> start envoy
Теперь, когда вы нажимаете на кнопку, он отправляет запрос PING и получает ответ на понг!
Вот об этом! Спасибо за чтение, и я надеюсь, что вам понравилось статью.
Вы можете следовать за мной на Средний и Github 🙂
Оригинал: “https://www.freecodecamp.org/news/how-to-use-grpc-web-with-react-1c93feb691b5/”