Frontender Magazine

Покажите себя с помощью ngrok

header

Очень часто в веб-разработке требуется показать своё веб-приложение другим разработчиками или клиентам. В случае продакшн-версии сайта беспокоиться не о чем. Деплоите приложение в продакшн, откидываетесь на спинку кресла и ждёте предложения о покупке от Facebook. Но во время разработки вы пользуетесь локальным сервером, и показать промежуточные результаты на нём — нетривиальная задача.

Все еще более усложняется, когда вам нужно проверить взаимодействие чего-либо с приложением. Например GitHub поддерживает нечто под названием веб-хуки. В принципе GitHub просто открывает определённый вами url, при определённых действиях с репозиторием. Для того, чтобы веб-хуки правильно работали, GitHub нужно задать url, который он сможет открыть. Если вы укажете http://localhost или http://127.0.0.1/, очевидно, что ничего не заработает, так как в контексте Github localhost — это он сам.

Знакомьтесь, ngrok, простой сервис который позволяет прокидывать локальный веб-сервис (любого толка: Node.js, ColdFusion, PHP и так далее) в интернет. Он позволяет не только просматривать ваши локальные сайты по доступному для всех урлу, но также тестировать входящие запросы также хорошо, как и повторять их (это может стать решающим фактором, если вы тестируете сервис с ограничениями, вы можете попросить ngrok повторить запрос без использования «настоящего» удалённого сервиса).

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

Установка и запуск

Сопротивляясь мейнстриму, ngrok один из немногих инструментов, который устанавливается без помощи npm. Невероятно, правда? Вместо этого вы просто скачиваете zip-архив, распаковываете его и копируете в папку для бинарников. Как только вы это сделали, запустите ваш сервер (ещё раз, ngrok не привередлив к используемым вами технологиях, поэтому не беспокойтесь даже об использовании Perl CGI) и напечатайте в терминале ngrok 80 для начала работы ngrok. Спешу вас успокоить, конечно же, у ngrok масса полезных настроек. При старте ngrok берёт под контроль терминал и постоянно выводит информацию о происходящем.

shot1

Пропустим строчки о статусе и версии, и обратим внимание на строчки о редиректах. Вы заметите, что ngrok предоставляет доступ к вашему сайту по обоим типам соединения и http и https по случайному поддомену (об этом чуть позже). Можете проверить работу ngrok просто открыв этот адрес в браузере. Как только это произойдет, вы увидите, что ngrok обновил информацию в секции запросов.

shot2

https работает замечательно даже если https не настроен на вашем локальном сервере.

shot3

Теперь обратите внимание на URL веб-интерфейса. Он даёт прилично выглядящий отчёт о запросах на сервер.

shot4

В целом, ngrok очень мощный из коробки.

Пример из реального мира

Давайте попробуем ngrok на реальном примере. Ранее я упоминал веб-хуки у GitHub, рассмотрим их поближе. Я выбрал из своих проектов случайный (https://github.com/cfjedimaster/BehanceAPI), зашёл в настройки, раздел Webhooks & Services и кликнул Add webhook.

В моём случае я собираюсь использоваться простой ColdFusion-скрипт на локальном сервере. Я не буду делать ничего сложного, мне просто надо удостовериться, что все работает. Создаем файл helloGitHub.cfm и положим его в тестовую папку локального сервера Apache.

shot5

Заметьте — я выбрал опцию Send me everything, чтобы было легче тестировать. GitHub позволяет запускать вебхуки только по событию пуша в репозиторий, по любому событию и по индивидуально заданным событиям. Нажмите Add webhook чтобы закончить.

Ок, что теперь? Теперь GitHub будет открывать URL когда что-то будет происходить. Но я не представляю что будет мне присылать GitHub. Уверен, что это будет куча полезной информации и я могу найти информацию об этом в документации, но зачем скучать за мануалами, когда можно протестировать наживую с ngrok.

Как я уже сказал, GitHub будет запускать вебхук на любое событие, поэтому я добавлю пустой ишью к моему проекту и посмотрю, что произойдёт.

Как только я добавил ишью, веб-интерфейс ngrok в реальном времени отразил новое событие.

shot6

Как вы можете видеть, вы получаете краткую сводку и заголовки вместе с необработанным и бинарным кодом. Заметьте, что информация отображается как есть — без форматирования JSON. На самом деле ngrok поддерживает форматирование JSON, но только если тип данных application/json. Но так как GitHub не передает соответствующий заголовок, указывающий этот тип данных, то ngrok не рассматривает данные как JSON.

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

Дополнительные возможности

В целом, это отличный сервис, особенно если учесть то, как просто его использовать и то, что он — бесплатный, но что можно получить за регистрацию? В первую очередь, также бесплатно вы получите именованные поддомены, TCP-туннелирование, HTTP-аутентификацию и множественные туннели.

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

ngrok -authtoken Ythisisrandomsecretcrap2 -subdomain mymilkshakeisbetterthanyours 80

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

Пара слов в заключение

В целом, ngrok — мощный инструмент, решающий очень специфическую задачу, безумно полезный для веб-разработчиков.

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Raymond Camden
Владимир Старков
Переводчик:
Владимир Старков
Сaйт:
http://iamstarkov.com
Twitter:
@iamstarkov
GitHub:
iamstarkov

Комментарии (17 комментариев, если быть точным)

Автар пользователя
SergeyAlexeev

Круто! Попробовал расшарить локальное приложение на IIS, работает отлично!

Автар пользователя
gladkih

Здорово, не знал про него. Теперь есть с помощью чего шефу показывать текущий результат.

Автар пользователя
vomchik

ngrok на macOS можно поставить через brew

Автар пользователя
alexsimkovich

В чем разница, если сравнивать с консольным вариантом browser-sync (он тоже создает глобальный доступ на ваш локальный IP ?

Автар пользователя
iamstarkov

@alexsimkovich ngrok более узко-специализированный инструмент, чем browser-sync

Автар пользователя
zjoin

Крутой инструмент, пользуюсь им с момента выхода этой статьи http://www.sitepoint.com/accessing-localhost-from-anywhere/

Автар пользователя
xolodutra

Подскажите как бороться с такой проблемой:
Tunnel http://********.ngrok.com unavailable Unable to initiate connection to 127.0.0.1:80. A web server must be running on port 127.0.0.1:80 to complete the tunnel.

У меня Mac OS, сижу через wi-fi роутер перепробовал все способы открытия портов, какие смог нагуглить, пробовал через другие порты, всё без толку

Автар пользователя
zjoin

@xolodutra такая проблема выскакивает если у тебя на том же порту не запущен локальный сервер

Автар пользователя
xolodutra

@zjoin огромнейшее спасибо! почему-то упустил из виду простейшее! Всего-то нужно было запустить локальный сервер!))

Автар пользователя
grantorin

Че-то не работает, постоянно пустая страница по ссылке сгенерированой этой утилитой, сталкивался кто?

Автар пользователя
iamstarkov

@grantorin ngrok ничего не генерирует, он только проксирует локальный сервер в интернет.

Автар пользователя
grantorin

@iamstarkov я о ссылке писал http://joxi.ru/5mdnRoZHJPdzA1

Автар пользователя
iamstarkov

@grantorin у тебя работает локальный сервер?

Автар пользователя
grantorin

@iamstarkov Да, сервер запущен конечно же.

Автар пользователя
iamstarkov

@grantorin напиши мне в скайп "iamstarkov"

Автар пользователя
grantorin

Может кому пригодится: Проблема решена, путем настройки Aliasess на OpenServer, с которого была данная проблема.

Автар пользователя
iamstarkov

Также советую всем использовать nodejs сервера, а не openserver