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

Очень часто в веб-разработке требуется показать своё веб-приложение другим разработчиками или клиентам. В случае продакшн-версии сайта беспокоиться не о чем. Деплоите приложение в продакшн, откидываетесь на спинку кресла и ждёте предложения о покупке от 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 берёт под контроль терминал и постоянно выводит информацию о происходящем.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ngrok -authtoken Ythisisrandomsecretcrap2 -subdomain mymilkshakeisbetterthanyours 80

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

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

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