Включите исполнение JavaScript в браузере, чтобы запустить приложение.
13 ноя 2024

Утилита Ngrok

Нужно открыть локальный сервер для внешнего доступа? Узнайте, как работать с Ngrok: пошаговая инструкция по установке, настройке и работе с Ngrok Dashboard. Переходите на gitverse.ru и ознакомьтесь с примерами команд и решениями частых проблем.

Среди разработчиков ngrok — это популярная утилита обратного прокси-сервера для доступа внутренних служб к Интернету путем маршрутизации трафика через облачную сеть. Программное обеспечение создает видимость того, что ваш локальный веб-сервер (например, компьютер, ноутбук, raspberry PI) размещен на поддомене ngrok.com. Это означает, что общедоступный IP-адрес или доменное имя на локальном компьютере не требуются. В статье рассмотрим синтаксис ngrok и особенности его установки.

Что такое утилита Ngrok

Ngrok — это кроссплатформенное приложение, которое создает защищенные туннели от общедоступной конечной точки к локально запущенной веб-службе. Сервис создает защищенный туннель между локальным сервером и конечной точкой на серверах ngrok (или поддоменом на ngrok.com). Эта конечная точка находится в открытом доступе в Интернете и перенаправляет запросы на ваш локальный сервер. Вам не нужен общедоступный IP-адрес или доменное имя.

Зачем нужен Ngrok

Ngrok объединяет все необходимые компоненты. Это API-шлюз, обратный прокси-сервер, балансировщик нагрузки, защита от DDoS-атак, сеть доставки и брандмауэр. Они доставляют трафик из ваших локальных служб в Интернет. С помощью ngrok службы могут передавать трафик другим удаленным службам, работающим в любой среде, без внесения изменений в сетевые настройки вашей среды. С момента своего первоначального выпуска в 2013 году ngrok был дополнен дополнительными функциями и улучшениями безопасности. Они гарантируют, что данные, проходящие через туннели ngrok, не будут доступны злоумышленникам.

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

Например, у вас есть интерфейсное веб-приложение в React. Теперь вы хотите, чтобы другие разработчики могли видеть ваше приложение React в вашей среде разработки. Вы можете использовать Ngrok для создания общедоступного URL-адреса для локального веб-сервера. Другие разработчики могут видеть ваше приложение React в среде разработки.

Установка Ngrok в Linux

Зарегистрируйтесь на Ngrok. Перейдите на веб-сайт https://ngrok.com/download и зарегистрируйтесь или войдите в систему с помощью Google.

Скачайте Ngrok. После регистрации вы увидите это окно, затем вам нужно нажать на «Загрузить для Linux».

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

tar -xvzf ( file name )

Настройка токена авторизации:

Шаг 1: После регистрации и входа в систему откроется панель мониторинга, прокрутите вниз, а затем скопируйте отображаемый там токен авторизации.

Шаг 2: Откройте терминал и введите команду auth-token.

Шаг 3: Теперь, последний шаг —  запустить сервер Ngrok. Используйте следующую команду для запуска сервера Ngrok. Можно использовать любой номер порта для запуска сервера, например, 8888, 8080, 4242.

/ngrok tcp 8989

Синтаксис и опции Ngrok

Ngrok создает конечные точки HTTP и HTTPS. Это делает его полезным для тестирования интеграции со сторонними сервисами или API, которым требуются действительные домены SSL/TLS. Другие варианты использования включают в себя быструю демонстрацию локальных данных клиентам, тестирование серверных частей мобильных приложений и запуск персональных облачных сервисов с домашнего ПК.

В приложении есть возможность отслеживать и воспроизводить HTTP-запросы через веб-консоль ngrok. Функция воспроизведения полезна при тестировании вызовов API или веб-подключений. Так можно легко просматривать все содержимое заголовка и данные запроса или ответа в одном месте через пользовательский интерфейс консоли.

Премиум-версия ngrok, ngrok link, доступна разработчикам для использования в производственной среде. В ней есть автоматизация API и управление учетными данными. Эта версия подходит для удаленного управления IoT в профессиональной среде.

Как пользоваться Ngrok

Пошаговая инструкция по началу работы в Ngrok.

Регистрация аккаунта

Сначала нужно зарегистрировать новую учетную запись. Если вы не планируете использовать сервис в коммерческих целях, то можете воспользоваться бесплатной версией. На первое время этого вполне достаточно. 

Процесс регистрации:

1. Откройте официальный веб-сайт и нажмите кнопку «‎Зарегистрироваться».

2. Введите свое имя, адрес электронной почты и пароль.

3. Если вы все сделали правильно, то получите электронное письмо с подтверждением. Откройте электронное письмо и перейдите по ссылке из него. Как только вы войдете в свою учетную запись, откроется панель управления. В ней вы сможете загрузить клиент или просмотреть команды для его настройки.

Подключение аккаунта

Далее нужно подключить созданную учетную запись. Для этого необходимо указать ключ авторизации. Этот ключ находится в самом низу страницы  «‎Setup & Installation» в вашем профиле. Просто запустите команду:

$ ngrok config add-authtoken XXXXXXXXXXXXXXXXX_XXXXXXXXXXXXXXXXXXXX

Создание туннеля

Чтобы открыть доступ к веб-серверу, укажите номер порта, на котором он запущен:

ngrok http 3000

# To use different location provide a region: us, eu, ap, au

# Default region (if none provided) is us

ngrok http -region eu 8080

Это даст вам URL-адрес вашего туннеля и статистику.

Если вы отправите запрос на URL-адрес, вы должны получить ответ (замените URL-адрес на тот, который вы получили).

curl http://7711dd0d.ngrok.io

curl http://7711dd0d.ngrok.io -d name=Phil

Веб-интерфейс Ngrok

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

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

ngrok http -auth="username:password" 3000

Замените имя пользователя и пароль на нужные вам учетные данные.

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

Если вы получаете доступ к своему приложению через домен, определенный в вашем файле hosts (например, 127.0.0.1 your-application.local), вам просто нужно указать заголовок host для команды:

ngrok http -host-header=your-application.local 80

Настройка туннелей в конфигурационном файле

Утилиту можно настроить с помощью файла конфигурации YAML. Если файл конфигурации не указан, программа попытается загрузить его из расположения по умолчанию ($HOME/.ngrok2/ngrok.yml).

Используя опцию -config, можно предоставить явный конфигурационный файл. Можно предоставить несколько конфигурационных файлов. Они будут объединены друг с другом. 

ngrok http -config ~/.ngrok2/ngrok.yml -config project-config.yml 3000

Файл конфигурации чаще всего используется для определения туннелей. Туннели определяются в соответствии со свойством tunnels в файле конфигурации

tunnels:

    app:

        proto: http

        addr: 3000

        bind_tls: false

    app-protected:

        proto: http

        addr: 3000

        auth: "username:password"

    mongo:

        proto: tcp

        addr: 27017

Чтобы запустить туннель, укажите его название:

ngrok start -config ~/.ngrok2/ngrok.yml -config project-config.yml app-protected

Для запуска определенных туннелей, используйте переключатель --all:

ngrok start -config ~/.ngrok2/ngrok.yml -config project-config.yml --all