Отлаживайте свои локальные приложения через Интернет с помощью Ngrok Tunnels

Что такое Нгрок?

Допустим, вы разрабатываете веб-приложение и хотите поделиться им со своими коллегами, чтобы они его протестировали. Без ngrok вы могли бы либо загрузить его куда-нибудь на небольшой сервер, что требует времени и не копирует такие вещи, как локальные базы данных, либо перенаправить ваш маршрутизатор так, чтобы он указывал на ваш компьютер, что неуклюже и работает не везде.

Ngrok решает эту проблему, предоставляя вам один URL-адрес, который туннелирует на ваше устройство. Он действует как своего рода VPN и может туннелировать через брандмауэры прямо на ваше устройство. У вас может быть несколько туннелей, работающих одновременно, и вы можете выбрать порты и протокол для каждого из них. Например, вы можете перенаправить свой веб-сервер, работающий через HTTP, на порт 3000, а базу данных — через необработанное TCP-соединение через порт 8080.

Клиент ngrok автоматически назначит вам URL-адрес, например yourapp.ngrok.io:1234. По сути, это туннель SSH, но конечная точка управляется для вас службой ngrok. У Ngrok есть платные планы, которые позволяют запускать больше туннелей с зарезервированными URL-адресами, но бесплатного уровня достаточно для большинства базовых туннелей и отладки.

Поскольку URL-адреса генерируются автоматически на уровне бесплатного пользования, ngrok не подходит для выполнения чего-либо, где важно время безотказной работы. Но вы все равно не должны держать туннель к своему персональному компьютеру все время открытым, просто из соображений безопасности. То же самое верно и для переадресации портов, но ngrok можно включать и выключать, так что в этом отношении он лучше.

Установка Нгрока

Для начала перейдите на онлайн-панель ngrok и создайте учетную запись. После того, как вы прошли аутентификацию, настройка относительно проста; ngrok не нужно устанавливать через диспетчер пакетов, просто скачайте двоичный файл для своей системы и разархивируйте файл либо через проводник, либо с помощью команды unzip .

Оттуда вы можете начать запускать ngrok, но вы, вероятно, захотите переместить его из папки «Загрузки» в место, где вы можете получить к нему доступ из любого места. В Linux и macOS это место хранится в переменной PATH, которую можно найти, выполнив:

echo $PATH

Обычно это /usr/local/bin/, поэтому мы можем переместить туда ngrok, выполнив эту команду из папки Загрузки:

sudo mv ngrok /usr/local/bin/

Тогда ngrok будет работать как обычная утилита. В Windows вам нужно добавить новую папку в PATH вашей системы.

Однако перед запуском вам необходимо пройти аутентификацию с помощью своей учетной записи. Вы можете сделать это, скопировав токен авторизации, показанный на шаге 3 панели управления, и вставив его с помощью команды:

ngrok authtoken xxxxxxxxxx

Это связывает вашу учетную запись и позволяет создавать туннели.

Как настроить туннели Ngrok

Чтобы создать туннель, просто укажите локальный порт для подключения и протокол, который будет использовать туннель. Например, чтобы туннелировать локальный веб-сервер, вы должны запустить:

ngrok http 80

Что откроет графический интерфейс, показывающий текущие открытые соединения и информацию о вашем сеансе. URL-адрес туннеля отображается в разделе «Переадресация», который вы хотите скопировать.

Вы также можете запустить несколько туннелей одновременно из файла конфигурации. Этот файл конфигурации находится в вашем домашнем каталоге, в ~/.ngrok2/ngrok.yml. По умолчанию этот файл будет пустым, за исключением вашего токена авторизации. Вы можете добавить туннели вручную:

tunnels:
 http:
  proto: http
  addr: 80
 tcp:
  proto: tcp
  addr: 9090

Который вы можете запустить сразу, используя:

ngrok start --all

Или запустите вручную, указав имена туннелей. Вы можете найти все свойства туннеля вместе с другими примерами файлов конфигурации в документации ngrok.

Вы также можете создавать туннели ngrok программно с помощью клиентов-оболочек для вашего языка. Например, используя оболочку Node, вы можете заставить свой веб-сервер автоматически перенаправлять себя с помощью:

const url = await ngrok.connect({proto: 'http', addr: 80});

…который будет хранить URL-адрес переадресации в переменной, которую вы можете использовать.

Нгрок Инспектор

Еще одна функция, которая делает ngrok особенно полезным для отладки веб-приложений, — это инспектор туннелей. Всякий раз, когда вы запускаете туннель, вам также предоставляется URL-адрес веб-интерфейса, обычно localhost:4040. Если вы откроете его в своем браузере, вы увидите список всех запросов, проходящих через туннель, вместе с содержимым и ответами.

Он не превосходит среду разработки API, такую как Postman, но все же очень полезен для проверки трафика, идущего между клиентом и сервером. Он фиксирует все, включая запросы, которые ваше приложение делает автоматически.

Здесь есть еще одна вкладка с надписью «Статус», которая отображает состояние вашего туннеля, включая статистику, такую как продолжительность подключения и количество подключений в секунду для каждого туннеля.