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

ngrok — Когда нужно прокинуть ваш сервис в Интернет

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

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

Как работать с ngrok

Для работы нам необходимо:

• скачать бинарный файл для вашей системы — ngrok;
• зарегистрировать аккаунт на ngrok для получения токена;
• удостовериться, что ваш локальный сервис запущен и ожидает HTTP запросов;
• запустить ngrok.

Эти 5 шагов позволят получить временный домен для проверки вашего сервиса. Но давайте попробуем разобрать на примере запуска локального сервиса. Я буду запускать Nginx сервер в docker контейнере.

• У меня Mac OS, и я воспользуюсь пакетным менеджером brew.

brew cask install ngrok 

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

• Перейдите по вкладке Auth и скопируйте ваш токен.

• Запустите ваш сервис на удобном для вас порту. Я буду использовать Nginx.

docker run --name some-nginx -p 8080:80 nginx 

Таким образом, я ожидаю подключения на адрес 127.0.0.1:8080 и получу стандартное сообщение от Nginx.

• Затем запускаем ngrok.

ngrok http 8080 

Где 8080 — ваш локальный порт, где запущен сервис.

В терминале будет примерно следующая картина:

ngrok by @inconshreveable (Ctrl+C to quit) Session Status online Account Rinat Muhamedgaliev (Plan: Free) Update update available (version 2.3.35, Ctrl-U to update) Version 2.2.8 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://870eb390.ngrok.io -> localhost:8080 Forwarding https://870eb390.ngrok.io -> localhost:8080 Connections ttl opn rt1 rt5 p50 p90 2 0 0.01 0.00 5.81 10.83 HTTP Requests ------------- GET /favicon.ico 404 Not Found GET / 200 OK 

Теперь, обратившись по адресу http://870eb390.ngrok.io или https://870eb390.ngrok.io, мы увидим стандартный ответ от Nginx как видели и раньше. А если открыть в браузере адрес http://localhost:4040, то можно получить доступ сервисной странице со статистикой и логом запросов.

Таким образом, небольшой инструмент позволил получить временный домен и https адрес (иногда критично для платежных систем) для разработки. Полный набор ключей для параметризации можно почитать на странице https://ngrok.com/docs#http.

В бесплатной версии вы также можете строить TCP тоннели, если вам необходимо работать с TCP сервисами. С платными функциями вы можете познакомится на странице https://ngrok.com/pricing.

Открытые альтернативы

Если же вам ближе opensource решения, то советую взглянуть на localtunnel. Localtunnel написан на JS и очень прост в использовании.

Вам необходимо поставить npm пакет и запустить:

npm install -g localtunnel lt --port ваш порт> 

Из коробки данный сервис предлагает поддомены и https соединение. Более полную информацию можете почитать на главной странице проекта localtunnel.

А если хотите узнать о других интересных инструментах из мира разработки и желаете прокачаться в JVM стеке — приходите ко мне на обучение.

Нанять Рината своим индивидуальным наставником — это сюда: Записаться к Ринату

© Copyright 2014 — 2023 mkdev | Privacy Policy

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

Ngrok — это сервис, который позволяет сделать локальный порт доступным из интернета без настройки NAT, роутера, DDNS и других протоколов. Программа создает туннель между вашим компьютером и удалённым сервером и предоставляет доступ к нему с уникального домена. Достаточно только зарегистрироваться на сайте сервиса, установить программу на компьютер и запустить команду создания туннеля.

Конечно, такой способ не подойдёт если вам нужно чтобы ваш сервис был доступен постоянно, но показать как работает ваш локальный сайт или потестировать работу Callback API довольно удобно. В этой статье мы рассмотрим как пользоваться Ngrok, а также как установить Ngrok в Ubuntu.

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

Если вы пользуетесь Ubuntu или другим дистрибутивом, в котором установлен менеджер пакетов snap, вы можете использовать его для установки Ngrok. Просто выполните команду:

snap install ngrok

Кроме того, в Ubuntu и других дистрибутивах, основанных на Debian можно установить пакет из репозиториев разработчиков. Для этого сначала добавьте ключ в систему:

curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null

Затем добавьте сам репозиторий:

echo «deb https://ngrok-agent.s3.amazonaws.com buster main» | sudo tee /etc/apt/sources.list.d/ngrok.list

Обновите список пакетов для того чтобы получить данные из только что добавленного репозитория:

sudo apt update

И установите Ngrok:

sudo apt install ngrok

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

Загруженный архив необходимо распаковать. Там находится только исполняемый файл Ngrok, поэтому его можно сразу же поместить в каталог /usr/local/bin используя такую команду:

sudo tar xvzf ~/Downloads/ngrok-v3-stable-linux-amd64.tgz -C /usr/local/bin

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

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

Давайте сначала рассмотрим синтаксис и опции утилиты командной строки, которая будет использоваться для управления программой. Синтаксис довольно простой:

$ ngrok команда опции

Вот основные команды, которые вы можете использовать:

• completion — сгенерировать скрипт автодополнения для bash или zsh;
• config add-authtoken — сохранить токен аутентификации в конфигурационный файл;
• config check — проверить конфигурационный файл на ошибки;
• config edit — редактировать конфигурационный файл;
• http — создание HTTP туннеля;
• tcp — создание TCP туннеля;
• start — запуск туннелей, настроенных в конфигурационном файле;
• service install — установить конфигурационные файлы сервисов в систему;
• service start — запустить сервис;
• service stop — остановить сервис;
• update — пробросаобновить утилиту до последней версии;
• version — показать версию утилиты.

У большинства команд есть свои опции и мы рассмотрим их в разделе о том как пользоваться Ngrok.

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

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

Сервис имеет бесплатную версию для не коммерческого использования. Она поддерживает всё необходимое для того чтобы сделать локальный порт доступным из интернета. Для того чтобы зарегистрировать аккаунт откройте официальный сайт и нажмите кнопку Sign Up. На этой странице надо указать ваше имя, адрес электронной почты и пароль:

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

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

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

Достаточно выполнить команду, которая там написана:

ngrok config add-authtoken XXXXXXXXXXXXXXXXX_XXXXXXXXXXXXXXXXXXXX

После этого всё готово к использованию. Этот же ключ вы можете посмотреть на вкладке Your Authtoken:

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

Для того чтобы сделать доступным локальный HTTP порт извне необходимо использовать команду http. Просто укажите порт в качестве параметра, например для порта 80:

После успешного запуска туннеля в терминале будет отображена информация о его состоянии. В поле Forwarding можно найти URL, по которому можно получить доступ к этому сервису. При первом заходе Ngrok покажет предупреждение, что этот сайт доступен через Ngrok. Тут необходимо нажать Visit Site:

После этого станет доступно и само содержимое сайта:

Если вы не хотите чтобы кто-то посторонний смог получить доступ к этому ресурсу, можно добавить HTTP авторизацию. Для этого используйте опцию —basic-auth:

ngrok http —basic-auth=»пользователь:пароль» 80

После этого для доступа к сайту необходимо будет ввести пароль. Если для вашего локального сайта необходимо указать Host, то это можно сделать с помощью опции —host-header. Например, для замены домена на example.local используйте такую команду:

ngrok http —host-header=»example.local» 80

По умолчанию сервис будет доступен извне по HTTPS. Если вы хотите чтобы он был доступен только по HTTP используйте опцию —scheme. Например:

ngrok http —scheme=»http» 80

Если вы хотите сделать доступным порт на другой машине, укажите её IP адрес вместе с портом. Например, для 192.168.1.143:

ngrok http 192.168.1.143:80

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

После того как клиент Ngrok был запущен, вы можете открыть веб интерфейс, который доступен по адресу http://127.0.0.1:4040. Здесь доступна история запросов, в которой можно увидеть какие данные пришли и что было отправлено в ответ:

Здесь есть как заголовки так и тело запроса и ответа. С помощью кнопки Replay можно переотправить запрос. Также можно модифицировать его перед отправкой. Для этого выберите Replay with Modifications:

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

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

Ngrok имеет конфигурационный файл, в который сохраняется токен авторизации. Если вы не хотите каждый раз писать длинную команду запуска туннеля, вы можете описать его в конфигурационном файле, а потом запускать по имени. Ngrok хранит конфигурацию в формате Yaml в домашней папке в папке .config. Но не нужно редактировать файл напрямую. Для редактирования существует команда config edit:

ngrok config edit

Для описания туннелей необходимо добавить в конфигурационный файл секцию tunnels. Синтаксис описания туннеля такой:

tunnels: имя_туннеля: proto: протокол addr: порт

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

• basic_auth — добавить HTTP авторизацию;
• host_header — заменить значение заголовка Host;
• inspect — нужно ли сохранять запросы для инспектирования, по умолчанию включено;
• schemes — доступные схемы: http и/или https;
• hostname — указать своё доменное имя для сервиса, доступно только в платной подписке.

Например, для того чтобы создать туннель example для порта 80, с заменой заголовка Host на example.local добавьте в секцию tunnels такие строки:

example: proto: http addr: 80 host_header: "example.local"

Сохраните изменения и проверьте конфигурационный файл такой командой:

ngrok config check

Если всё хорошо и в конфигурационном файле нет ошибок команда выведет такое сообщение:

После этого вы можете запустить настроенный туннель по его имени:

ngrok start example

На этом настройка Ngrok завершена.

Выводы

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

Как сделать локалхост публичным: ngrok

Во время разработки сайтов люди обычно работают у себя на компьютере, и запускают сайты локально. Ваша локальная сеть ( 127.0.0.1 ) не доступна для людей извне, этот адрес доступен только с вашего компьютера.

Иногда это хочеся исправить: например, показать другу сайт, над которым вы работаете. В случае написания чатбота — это может быть создание локального вебхука.

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

1. Регистрируетесь, скачиваете, устанавливаете и т.д. по инструкции отсюда.
2. Узнайте на каком порту хостится ваш сайт/вебхук/что угодно.

Вот так в терминале выглядит запущенная Django:

August 14, 2019 - 18:37:46 Django version 2.2.4, using settings 'real_estate_agency.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C. 

Здесь адрес сайта: 127.0.0.1:8000 , т.е. порт — 8000 .

Вот вывод Flask:

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 203-976-264 

В этом случае адрес сайта: 127.0.0.1:5000 , т.е. порт — 5000 .

1. Авторизуйтесь в ngrok с вашим токеном.
2. ngrokните нужный порт:

./ngrok http ПОРТ 

Вы получите такой вывод:

ngrok by @inconshreveable (Ctrl+C to quit) Session Status online Account Ilya (Plan: Free) Version 2.3.34 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://d51299bb.ngrok.io -> http://localhost:8000 Forwarding https://d51299bb.ngrok.io -> http://localhost:8000 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00 

Отсюда нужно выловить ngrok-адрес вашего сервиса. Вот он: http://d51299bb.ngrok.io -> http://localhost:8000 . Теперь достаточно перейти по ngrok-ссылке ( http://d51299bb.ngrok.io ) и вы получите ваш сайт.

Если вы делаете вебхук, укажите этот сайт в качестве адреса вебхука.

Попробуйте бесплатные уроки по Python

Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

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

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

Практичний курс від laba: Директор з продажу.
Створюйте та розвивайте успішний відділ продажів.

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

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

Освітній курс від mate.academy: UI/UX Design.
Творчий розвиток навичок дизайну.

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

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

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

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

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

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

• Проверка поведения веб-страницы.

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

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

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

Спеціалізований курс від robotdreams: Frontend Engineer.
Створюйте вражаючий веб.

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

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

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

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

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

./ngrok authtoken 1pxC7zO80wPh6x48MPrq3QQxWlb_whZvhLEUE7MKhFrKF9yM

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

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

./ngrok authtoken 1pxC7zO80wоh6x48MPrq3QQxWlb_whZvнLEUE7MKhFrKF9yM

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

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

Потужний курс від skvot: blender.
Відкрийте для себе світ 3D-графіки.

./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

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

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 незаменим в случаях, когда вам нужно предоставить интернет-доступ к серверу работающему на локальном компьютере, а также при коллективном веб-тестировании.

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