Ngrok: понятное руководство по использованию

Знаете ли вы, как люди из другой сети могут получить управляемый доступ к локальному приложению на вашем компьютере? Допустим, вы разрабатываете сайт для клиента на своем ПК и хотите, чтобы тот просматривал его, отслеживая прогресс без необходимости размещать этот тестовый веб-ресурс в интернете (для чего нужны дополнительные заморочки типа хостинга). Что делать в такой ситуации? — спросите вы.

Решение есть! Мультиплатформенное программное обеспечение для туннелирования трафика под названием Ngrok.

Ngrok — инструмент разработчика, позволяющий сделать безопасный сервер, работающий на локальном компьютере (и доступный удаленно через localtunnel). Далее в нашем небольшом руководстве рассмотрим, как использовать эту полезную программу: от установки и базовой настройки, до развертывания веб-сайта на компьютере с Linux.

Содержание:
1. Что такое Ngrok?
2. Зачем его использовать?
3. Как установить Ngrok?
4. Безопасен ли Ngrok?
5. Базовые команды
6. Ngrok на реальном примере
7. Есть ли альтернатива?

1. Что такое Ngrok?

Ngrok — это мощная сетевая утилита, позволяющая пользователям делиться или получать доступ к любым локально размещенным веб-приложениям через общедоступный веб-URL, предоставляемый посредством домена Ngrok.io. При этом трафик туннелируется, проходя строго через указанный порт локального хоста.

Туннелирование — это механизм, защищающий определенные службы, запрещая прямой доступ к ним.

Ngrok будет работать на операционных системах Windows, macOS, Linux и FreeBSD. Приложение доступно для бесплатного использования (с ограниченными параметрами) и платного — с расширенным функционалом (субдомены, белый список и т. д).

Для того, чтобы начать работать с утилитой, необходимо зарегистрироваться при помощи электронной почты или учетной записи GitHub/Gmail. Мы будем использовать бесплатный тарифный план, которого будет достаточно для наглядности и реализации практических примеров.

2. Зачем его использовать?

• Проверка поведения веб-страницы.
Онлайн-курс Frontend-разробник від Powercode academy.
Курс на якому ти напишеш свій чистий код на JavaScript, попрацюєш із різними видами верстки, а також адаптаціями проектів під будь-які екрани. .
Зарееструватися

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

• Демонстрация приложения клиенту.

Еще один важный пример использования (его мы уже вскользь упоминали), в котором Ngrok может быть полезен, — это демонстрация  локально размещенного приложения клиенту. Иногда разработчику нужно показать демо-версию своего труда заказчику. Для этого необходимо создать общедоступный URL-адрес с помощью Ngrok, а затем поделиться им.

• Веб-тестирование, когда не все браузеры доступны локально.

Как разработчик, иногда вы можете захотеть протестировать свое веб-приложение в другом браузере. К примеру вы разрабатываете сайт на Mac и хотите протестировать его в браузере Internet Explorer. Этого можно достичь, используя Ngrok, создав общедоступный URL-адрес и поделившись им с пользователем IE.

3. Как установить Ngrok?

Чтобы установить утилиту на свой компьютер, нужно создать учетную запись Ngrok(для получения токена аутентификации, необходимого для успешной регистрации).

Затем загрузите установочный пакет утилиты, выбрав из списка операционную систему, установленную на вашем целевом устройстве. В нашем случае это будет версия Ngrok для Linux.

Когда архив с файлом загрузился, необходимо извлечь его:

./ngrok authtoken 1pxC7zO80wPh6x48MPrq3QQxWlb_whZvhLEUE7MKhFrKF9yM

Далее нужно подключить учетную запись. Для этого нам понадобится уникальный токен аутентификации, который можно найти на официальном сайте Ngrok в панели управления, в разделе «Начало работы» > «Настройка и установка».

Аутентифицируемся в системе, прописав свой токен, это выглядит так:

./ngrok authtoken 1pxC7zO80wоh6x48MPrq3QQxWlb_whZvнLEUE7MKhFrKF9yM

Когда обновление токена аутентификации завершено успешно, мы сможем запустить туннель для своих локально размещенных приложений.

Чтобы запустить Ngrok и вывести список доступных команд, выполните следующую команду в терминале или командной строке:

./ngrok help

Чтобы запустить переадресацию HTTP-туннеля на ваш локальный порт, например, на порт 80, выполните следующую команду:

./ngrok http 80

4. Безопасен ли ngrok?

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

5. Базовые команды

Команда authtoken

Для привязки пользователя к учетной записи, система предоставляет ему секретный токен аутентификации. Мы только что пользовались этой командой. При ее использовании ваш личный токен прописывается в файле конфигурации и вам больше не придется вводить его при каждом вызове.

Команда credits

Данная команда предоставляет сведения об авторе приложения и лицензии ПО.

Команда http

Это запускает туннель, отслеживающий трафик HTTP/HTTPS с указанным именем хоста.

Примеры:

Перенаправляет субдомен ngrok.io на локальный порт 80:

./ngrok http 8080

Перенаправляет трафик на example.com:9000:

./ngrok http example.com:9000

Разрешает доступ из интернета к локальным файлам в /var/log:

./ngrok http file:///var/log

Перенаправляет на локальный сервер https:

./ngrok http https://localhost:8443

Команда start

Запускает туннель по имени из файла конфигурации, примеры:

Запустим туннель, указанный в конфигурационном файле dev:

./ngrok start dev

Запустим туннели «web» и «blog»:

./ngrok start web blog

Запустим все туннели, определенные в файле конфигурации:

./ngrok start --all

Команда tcp

Запускает TCP-туннель, например:

Перенаправляем порт на локальный сервер ssh:

./ngrok tcp 22

Команда tls

Запускает туннель для отслеживания TLS-трафика через порт 443. Использование этой команды рекомендуется только с параметром -hostname, например:

Перенаправляем трафик TLS для example.com на порт 443:

./ngrok tls -hostname=example.com 443

Другие варианты использования этой команды будут работать, но всегда будут приводить к предупреждениям о несоответствии сертификатов.

Команда update

Обновляет ngrok до последней версии, при наличии более свежих файлов по апгрейду клиента.

./ngrok update

6. Ngrok на реальном примере

Рассмотрим практический пример использования утилиты с React-приложением.

Для работы с ним необходимо предварительно установить node.js и npm, а затем выполнить приведенные ниже команды в терминале:

sudo apt install nodejs
sudo apt install npm

Далее, создадим React-приложение при помощи команды:

npx create-react-app {your_app_name}

В нашем случае это будет:

npx create-react-app ngrok_test_app

Переходим во вновь созданный каталог с помощью команды cd и выполняем npm start:

npm start

Запустится ваше приложение по URL-адресу: localhost:3000

Введя URL-адрес в локальном браузере, можно увидеть созданную программу, в нашем случае — это тестовый вывод логотипа React.

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

host_device_ip_address:3000

или

192.168.1.52:3000

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

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

./ngrok http 3000

Вывод покажет вам запущенный сеанс и URL-адрес, использующийся для удаленного доступа к локальному приложению. URL-адреса (http и https формата) находятся напротив значения Forwarding, как показано ниже:

Этот URL-адрес вы отправляете вашему клиенту, чтобы тот мог получить удаленный доступ к локальному приложению. В нашем случае это будет:

http://e2c8-5-12-194-229.ngrok.io

https://e2c8-5-12-194-229.ngrok.io

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

7. Есть ли альтернатива?

Ngrok, возможно, самый простой и известный туннелирующий localhost-сервис, однако все те же функции могут выполнять и другие программы. Вот некоторые из альтернативных вариантов:

1. Localtunnel. Токен авторизации не требуется. Довольно легко установить и использовать. Поддерживает http/https. Можно использовать через исполняемый файл node.js (пример: lt --port 3000). Это бесплатная утилита, поддерживающая субдомены. Работает на всех операционных системах.
2. Serveo. Токен авторизации не требуется. Приложение можно использовать напрямую через командную строку без какой-либо установки. Поддерживает http/https, tcp. Может использоваться с исполняемым файлом или без него. Доступны как бесплатная, так и платная версии. Есть поддержка субдоменов. Поддержка всех платформ и операционок.
3. Teleconsole. Не требует токена авторизации. HTTP/HTTPS не поддерживается напрямую, только через SSH. Это хорошая и чрезвычайно простая утилита распространяется бесплатно и с открытым исходным кодом. Не поддерживает субдомены, так как в основном используется для обмена сеансами SSH. В настоящее время может работать только на Unix и MacOS.
4. Pagekite. Требуется однократная настройка учетной записи. Поддерживает HTTP/HTTPS, SSH и TCP. Требуется однократная настройка поддомена, привязанного к адресу электронной почты. Можно использовать при настройке туннеля. Доступны как бесплатный, так и платный варианты (пробный период на месяц). Субдомен поддерживается.

---

Теперь у вас есть общее представление об этой полезной утилите и о том, как она работает. Ngrok незаменим в случаях, когда вам нужно предоставить интернет-доступ к серверу работающему на локальном компьютере, а также при коллективном веб-тестировании.

Для того, чтобы лучше понять принцип работы утилиты, предлагаем вашему вниманию несколько неплохих обучающих роликов по теме: