Знаете ли вы, как люди из другой сети могут получить управляемый доступ к локальному приложению на вашем компьютере? Допустим, вы разрабатываете сайт для клиента на своем ПК и хотите, чтобы тот просматривал его, отслеживая прогресс без необходимости размещать этот тестовый веб-ресурс в интернете (для чего нужны дополнительные заморочки типа хостинга). Что делать в такой ситуации? — спросите вы.
Решение есть! Мультиплатформенное программное обеспечение для туннелирования трафика под названием Ngrok.
Ngrok — инструмент разработчика, позволяющий сделать безопасный сервер, работающий на локальном компьютере (и доступный удаленно через localtunnel). Далее в нашем небольшом руководстве рассмотрим, как использовать эту полезную программу: от установки и базовой настройки, до развертывания веб-сайта на компьютере с Linux.
Содержание:
1. Что такое Ngrok?
2. Зачем его использовать?
3. Как установить Ngrok?
4. Безопасен ли Ngrok?
5. Базовые команды
6. Ngrok на реальном примере
7. Есть ли альтернатива?
Ngrok — это мощная сетевая утилита, позволяющая пользователям делиться или получать доступ к любым локально размещенным веб-приложениям через общедоступный веб-URL, предоставляемый посредством домена Ngrok.io. При этом трафик туннелируется, проходя строго через указанный порт локального хоста.
Туннелирование — это механизм, защищающий определенные службы, запрещая прямой доступ к ним.
Ngrok будет работать на операционных системах Windows, macOS, Linux и FreeBSD. Приложение доступно для бесплатного использования (с ограниченными параметрами) и платного — с расширенным функционалом (субдомены, белый список и т. д).
Для того, чтобы начать работать с утилитой, необходимо зарегистрироваться при помощи электронной почты или учетной записи GitHub/Gmail. Мы будем использовать бесплатный тарифный план, которого будет достаточно для наглядности и реализации практических примеров.
Давайте возьмем случай, когда произошла интеграция двух систем, одна из которых ссылается на внешнюю службу уведомлений о конкретном действии. Чтобы проверить, успешно ли завершена работа этой службы, требуется предоставить приложению доступ к общедоступному URL-адресу, а этого можно добиться с помощью Ngrok.
Еще один важный пример использования (его мы уже вскользь упоминали), в котором Ngrok может быть полезен, — это демонстрация локально размещенного приложения клиенту. Иногда разработчику нужно показать демо-версию своего труда заказчику. Для этого необходимо создать общедоступный URL-адрес с помощью Ngrok, а затем поделиться им.
Как разработчик, иногда вы можете захотеть протестировать свое веб-приложение в другом браузере. К примеру вы разрабатываете сайт на Mac и хотите протестировать его в браузере Internet Explorer. Этого можно достичь, используя Ngrok, создав общедоступный URL-адрес и поделившись им с пользователем IE.
Чтобы установить утилиту на свой компьютер, нужно создать учетную запись Ngrok
Затем загрузите установочный пакет утилиты, выбрав из списка операционную систему, установленную на вашем целевом устройстве. В нашем случае это будет версия Ngrok для Linux.
Когда архив с файлом загрузился, необходимо извлечь его:
./ngrok authtoken 1pxC7zO80wPh6x48MPrq3QQxWlb_whZvhLEUE7MKhFrKF9yM
Далее нужно подключить учетную запись. Для этого нам понадобится уникальный токен аутентификации, который можно найти на официальном сайте Ngrok в панели управления, в разделе «Начало работы» > «Настройка и установка».
Аутентифицируемся в системе, прописав свой токен, это выглядит так:
./ngrok authtoken 1pxC7zO80wоh6x48MPrq3QQxWlb_whZvнLEUE7MKhFrKF9yM
Когда обновление токена аутентификации завершено успешно, мы сможем запустить туннель для своих локально размещенных приложений.
Чтобы запустить Ngrok и вывести список доступных команд, выполните следующую команду в терминале или командной строке:
./ngrok help
Чтобы запустить переадресацию HTTP-туннеля на ваш локальный порт, например, на порт 80, выполните следующую команду:
./ngrok http 80
Ngrok по умолчанию безопасен за счет передачи данных через защищенные туннели только на открытый вами localhost, расположенный за брандмауэрами. Инструмент не требует настройки конфигурации и поставляется со встроенным сетевым перехватчиком.
Для привязки пользователя к учетной записи, система предоставляет ему секретный токен аутентификации. Мы только что пользовались этой командой. При ее использовании ваш личный токен прописывается в файле конфигурации и вам больше не придется вводить его при каждом вызове.
Данная команда предоставляет сведения об авторе приложения и лицензии ПО.
Это запускает туннель, отслеживающий трафик 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
Запускает туннель по имени из файла конфигурации, примеры:
Запустим туннель, указанный в конфигурационном файле dev:
./ngrok start dev
Запустим туннели «web» и «blog»:
./ngrok start web blog
Запустим все туннели, определенные в файле конфигурации:
./ngrok start --all
Запускает TCP-туннель, например:
Перенаправляем порт на локальный сервер ssh:
./ngrok tcp 22
Запускает туннель для отслеживания TLS-трафика через порт 443. Использование этой команды рекомендуется только с параметром -hostname, например:
Перенаправляем трафик TLS для example.com на порт 443:
./ngrok tls -hostname=example.com 443
Другие варианты использования этой команды будут работать, но всегда будут приводить к предупреждениям о несоответствии сертификатов.
Обновляет ngrok до последней версии, при наличии более свежих файлов по апгрейду клиента.
./ngrok update
Рассмотрим практический пример использования утилиты с 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
На изображении выше видно, что наше локальное приложение теперь доступно в интернете, и к нему можно получить удаленный доступ с любого компьютера.
Ngrok, возможно, самый простой и известный туннелирующий localhost-сервис, однако все те же функции могут выполнять и другие программы. Вот некоторые из альтернативных вариантов:
http/https. Можно использовать через исполняемый файл node.js (пример: lt --port 3000). Это бесплатная утилита, поддерживающая субдомены. Работает на всех операционных системах.http/https, tcp. Может использоваться с исполняемым файлом или без него. Доступны как бесплатная, так и платная версии. Есть поддержка субдоменов. Поддержка всех платформ и операционок.Теперь у вас есть общее представление об этой полезной утилите и о том, как она работает. Ngrok незаменим в случаях, когда вам нужно предоставить интернет-доступ к серверу работающему на локальном компьютере, а также при коллективном веб-тестировании.
Для того, чтобы лучше понять принцип работы утилиты, предлагаем вашему вниманию несколько неплохих обучающих роликов по теме:
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…