Если вы связаны с 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 на странице с токеном. Введите в терминале команду заменив <YOUR_AUTHTOKEN> на настоящий токен:
ngrok authtoken <YOUR_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-разработке (фронтенд, бекенд, все вместе, …)? Какие технологии и языки программирования используете? Какими программами пользуетесь?