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
Dev tools: ngrok
Have you ever wanted to show your work which is running on your local machine to your colleagues or friends? If they are far away of you, how will you show them? Will you upload your source code to github to share it with your friends? But what if you don’t like to share your source code with others? Will you run it on public or private cloud or something like that? But there is an awesome tool to expose your local services to the internet. Meet ngrok.
What is ngrok?
ngrok is a reverse proxy that creates a secure tunnel from a public endpoint to a locally running web service. ngrok captures all traffic over the tunnel for later inspection and replay.
What is ngrok useful for?
- Temporarily sharing a website that is only running on your development machine
- Demoing an app at a hackathon without deploying
- Developing any services which consume webhooks (HTTP callbacks) by allowing you to replay those requests
- Debugging and understanding any web service by inspecting the HTTP traffic
- Running networked services on machines that are firewalled off from the internet
Demo
I created a demo application to show how it look like. This is my simple web application on port 8080 on my computer:
Now you need ngrok. After you downloaded ngrok and after you set your authentication token you can easily expose your local service to the Internet by typing:
./ngrok http 8080
It gives you a public url. In this case my given public url is cdd65d2b.ngrok.com
Ngrok comes with a built-in dashbord (default on port 4040) that you can see all requests and replay a request:
- https://github.com/inconshreveable/ngrok
- https://ngrok.com/
Ngrok: создаём защищенный URL-адрес на локальный сервер минуя NAT и Firewall
Если вы связаны с web-разработкой, то наверняка сталкивались с проблемой ограничения доступа к localhost через Интернет.
Процесс разработки обычно выглядит следующим образом. Вы запускаете локальный сервер для разработки и работаете над web-приложением на своем компьютере. Вносите правки в код и тут же проверяете в браузере, это удобно и экономит кучу времени.
Проблемы начинаются когда к локальному серверу необходим доступ из вне. Например необходимо:
- Дать доступ заказчику, чтобы обсудить и внести мелкие правки в верстке
- Протестировать web-приложения на мобильных устройствах
- Интегрировать сторонний сервис требующий обработки уведомлений (webhook)
Выгружать каждый раз код на хостинг из-за небольших правок неудобно и не всегда возможно.
В этой статье поговорим о том, как с помощью простой программы легко и быстро открыть доступ к локальному серверу не заморачиваясь с настройками сети.
Ngrok консольный клиент, который пробрасывает защищенный туннель с локального хоста в интернет, минуя NAT и Firewall. Прост в использовании и работает в Windows, Mac и Linux.
Как это работает
Консольный клиент Ngrok подключается к облачному сервису ngrok, который выделяет url-адрес доступный через интернет и принимает на него трафик. Весь полученный трафик будет передан запущенному клиенту ngrok на вашем компьютере, а затем на локальный адрес.
Такой подход позволяет мгновенно открывать доступ к локальным службам, при этом не затрагивая настройки локальной сети.
Установка
Скачайте архив с программой для своей операционной системы с официального сайта. В нем содержится единственный исполняемый файл ngrok . Для удобства использования переместите его в директорию, которая прописана в системной переменной PATH , чтобы ngrok запускался из любого места. Я использую операционную систему Ubuntu, в моем случае это директория /usr/bin .
Откройте терминал если вы используете Linux или Mac, в Windows запустите командную оболочку CMD. Для проверки успешной установки введите команду:
ngrok version
Если вы все сделали правильно, на экране появится что-то вроде этого ngrok version 2.2.8 .
Ngrok готов к использованию, но для некоторых возможностей необходимо зарегистрироваться. Пройдите регистрацию на сайте ngrok.com и скопируйте authtoken на странице с токеном. Введите в терминале команду заменив на настоящий токен:
ngrok authtoken
На этом установка завершена, приступим к использованию.
Использование
Чтобы вывести список доступных команд, введите команду:
ngrok help
HTTP туннели
HTTP туннели с поддержкой шифрования https .
Туннель для HTTP-сервера, который слушает 80 порт:
# С указанием порта ngrok http 80 # С указанием адреса и порта ngrok http mysite.dev:80
Постоянный поддомен для туннеля:
ngrok http --subdomain=mysite mysite.dev:80
Защита туннеля паролем:
ngrok http --auth="username:password" 80
Виртуальные хосты (XAMPP, MAMP, Vagrant, и др.). Изменение заголовка Host :
ngrok http --host-header=rewrite site.dev:80 ngrok http --host-header=site.dev 80
Расположение сервера на котором запускается туннель:
# us - United States (Ohio) # eu - Europe (Frankfurt) # ap - Asia/Pacific (Singapore) # au - Australia (Sydney) ngrok http --region=eu 80
TCP туннели
TCP туннели помогут открыть доступ к службам использующим TCP-соединения: SSH, игровые сервера, базы данных и т.д.
Туннель для SSH:
# SSH по умолчанию слушает 22 порт ngrok tcp 22
Туннель для PostgreSQL:
# PostgreSQL по умолчанию слушает 5432 порт ngrok tcp 5432
Туннель для MySQL:
# MySQL по умолчанию слушает 3306 порт ngrok tcp 3306
Конфигурационный файл
Ngrok поддерживает конфигурационные файлы в формате YAML, которые хранят все настройки и позволяют запускать несколько туннелей одновременно.
По умолчанию конфигурационный файл находится по адресу $HOME/.ngrok2/ngrok.yml :
- OS X /Users/username/.ngrok2/ngrok.yml
- Linux /home/username/.ngrok2/ngrok.yml
- Windows C:\Users\username\.ngrok2\ngrok.yml
Пример конфигурационного файла:
authtoken: 7LXRBnKeQ. Y9YDP5J9t region: eu web_addr: localhost:4040 tunnels: app1: addr: 80 proto: http subdomain: app1 auth: user:secret host_header: app1.loc app2: addr: 80 proto: http host_header: app2.loc
Запуск нескольких тунеллей одновременно:
# выборочно ngrok start app1 app2 # все ngrok start --all
Инспектор трафика (web-интерфейс)
Ngrok предоставляет web-интерфейс, в котором отображаются входящие запросы и ответы вашего приложения. Пригодится при отладке API, Ajax или Webhook.
Если ngrok клиент запущен, откройте в браузере:
http://localhost:4040
Вместо вывода
Раньше мне приходилось настраивать роутер и DynDNS пока я не нашел ngrok. Надеюсь эта простая, но очень полезная программа сэкономит вам кучу времени так же как и мне!
P.S. Напишите в комментариях какие задачи решаете в web-разработке (фронтенд, бекенд, все вместе, …)? Какие технологии и языки программирования используете? Какими программами пользуетесь?
Евгений Прокопьев
Привет! Меня зовут Евгений Прокопьев. Я разрабатываю сложные web-приложения для бизнеса. В своей работе использую: PHP, Python, JavaScript, SQL, HTML, CSS и много сопутствующих технологий.
Рассылка от программиста
Подпишись и получай полезные материалы
Рассказываю о программировании и как с помощью него сделать жизнь чуточку легче
При подготовке материала использовались источники:
https://mkdev.me/ru/posts/ngrok-kogda-nuzhno-prokinut-vash-servis-v-internet
https://mostafa-asg.github.io/post/ngrok/
https://evgeniyprokopev.com/ngrok-sozdaet-zashhishhennyj-url-adres-na-vash-lokalnyj-server-minuya-nat-i-firewall/