Настройка Windows для локального тестирования вебхуков с помощью ngrok

Будучи разработчиком, работающим на Windows, я воспринял открытие ngrok как манну небесную. Возможность предоставить мой локальный веб-сервер в общий доступ через интернет, упрощенная отладка и тестирование таких сервисов, как Twilio, и инструмент, который не заставлял меня устанавливать и настраивать другие фреймворки или среды выполнения языков только для того, чтобы начать работу? Всё это заставило меня улыбаться.

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

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

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

За последнее десятилетие Microsoft создала множество способов запуска веб-приложений на локальном компьютере. В зависимости от вашей версии Windows и версии Visual Studio, вы можете использовать Сервер веб-разработки Visual Studio (Visual Studio Web Development Server), IIS Express или даже полноценный IIS.

Вот краткий обзор некоторых различных комбинаций, которые могут быть у вас установлены:

— VS2005 – VS2010

— Сервер веб-разработки Visual Studio

— VS2010 SP1

— Сервер веб-разработки Visual Studio – по умолчанию

— IIS Express – опционально

— VS2012 / VS2013 / VS2015

—

— IIS Express – по умолчанию

— Сервер веб-разработки Visual Studio – опционально

Помимо этих вариантов, если вы решили использовать тип проекта «Веб-сайт» (Web Sites) в Visual Studio, вы также можете запускать свой сайт на локальном сервере IIS.

Само собой разумеется, что это может немного запутать, и в зависимости от того, что у вас установлено, изменятся и действия, необходимые для использования ngrok.

ngrok и Сервер веб-разработки Visual Studio

Если вы используете Сервер веб-разработки Visual Studio, использование ngrok не составит труда. Просто запустите ngrok из командной строки с помощью следующей команды:

ngrok [порт]

где аргумент port — это номер порта, который использует ваш веб-сайт. Например, если при запуске вашего веб-сайта URL-адрес выглядит как *http://localhost:147114*, то вы должны запустить ngrok с помощью этой команды:

ngrok 147114

Теперь любой пользователь в интернете должен иметь возможность загрузить ваш веб-сайт, используя ваш ngrok URL-адрес:

http://6e5c9d59.ngrok.com/

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

Если же вы используете IIS или IIS Express в качестве локального сервера веб-разработки, вам нужно добавить дополнительный параметр «-host-header»:

ngrok 147114 -host-header=»localhost:147114″

Это заставит IIS Express или IIS думать, что клиент обращается через домен localhost на номере порта вашего проекта. Без этого вам придется делать гораздо больше настроек. Читайте дальше, если вам интересно.

#### Привязки сервера

Начиная с IIS 7 и IIS Express 7.5, новый файл с именем applicationhost.config используется в качестве корневого файла конфигурации приложения. Он использует простую XML-схему для определения всех сайтов, приложений, виртуальных каталогов и пулов приложений, а также глобальных значений по умолчанию для веб-сервера (аналогично machine.config и корневому web.config для настроек .NET Framework).

Вы можете найти файл конфигурации для IIS Express здесь:

%USERPROFILE%\My Documents\IISExpress\config\applicationhost.config

а файл конфигурации для IIS здесь:

%WINDIR%\system32\inetsrv\config

При использовании Visual Studio 2012 для создания нового веб-сайта или при изменении существующего сайта в Visual Studio 2010 SP1 для использования IIS Express, Visual Studio добавит новый элемент в файл applicationhosts.config.

Элемент site содержит коллекцию привязок, которые по умолчанию указывают IIS Express, что этот веб-сайт должен прослушивать и отвечать на HTTP-запросы, сделанные на любой IP-адрес, привязанный к этой машине, на статически определенном порту с именем хоста localhost.

Чтобы сообщить IIS Express, что я также хочу, чтобы этот веб-сайт прослушивал и отвечал на запросы к моему домену ngrok, мне нужно добавить вторую привязку:

После добавления этой второй привязки мне нужно обязательно завершить работу и перезапустить IIS Express, чтобы он перезагрузил информацию о привязках для этого веб-сайта.

#### Безопасность http.sys и списки управления доступом к URL-адресам (Url Access Control Lists)

На этом этапе, если бы я запустил ngrok и указал ему пересылать запросы в мое локальное веб-приложение, я бы увидел, что мой сайт все еще не работает так, как я ожидал, возвращая ответ HTTP 400 Invalid Hostname. Это происходит потому, что http.sys — компонент Windows, который обрабатывает входящие сетевые запросы по протоколу HTTP, — не разрешает IIS Express обслуживать запрос к моему домену ngrok. По умолчанию http.sys разрешает приложениям, которые хотят отвечать на HTTP-запросы, привязываться только к портам 80 и 443. Он также блокирует приложения от обслуживания внешнего трафика.

Чтобы заставить http.sys разрешить IIS Express обслуживать внешний трафик на моем локальном порту, у меня есть два варианта:

— Запустить IIS Express с повышенными привилегиями, что позволит http.sys принимать входящие HTTP-запросы из внешних источников. Для запуска IIS Express с повышенными привилегиями вам нужно запустить Visual Studio от имени администратора.

— Явно указать Windows разрешить входящие запросы к моему домену ngrok, изменив список управления доступом к URL-адресам (URL Access Control List, ACL).

Поскольку общепринято считать, что запуск Visual Studio с минимальными привилегиями является лучшей практикой, я обычно выбираю второй вариант.

Добавить мой URL-адрес в список управления доступом просто. Откройте новую командную строку с повышенными привилегиями, используя опцию «Запуск от имени администратора» (Run As Administrator), и выполните одну из следующих команд в зависимости от вашей ОС:

Vista или новее:

netsh http add urlacl url=http://6e5c9d59.ngrok.com:147114/ user=everyone

XP:

httpcfg set urlacl /u http://6e5c9d59.ngrok.com:147114/ /a D:(A;;GX;;;WD)

Обратите внимание, что вы **должны включить косую черту в конце** доменного имени, чтобы команда выполнилась успешно.

Теперь откройте браузер и перейдите по адресу вашего домена ngrok, и вы должны увидеть, что ваш локальный веб-сервер успешно обслуживает контент.

Независимо от того, какой вариант вы выберете, помните, что оба варианта открывают ваш компьютер для всего интернета. Хорошей идеей будет помнить, что после завершения тестирования приложения следует завершить работу IIS Express, если он запущен с повышенными привилегиями, или удалить URL ACL, что можно сделать с помощью следующей команды:

Vista или новее:

netsh http delete urlacl url=http://6e5c9d59.ngrok.com:147114/

XP:

httpcfg delete urlacl /u http://6e5c9d59.ngrok.com:147114/

Предоставление веб-контента в общий доступ через интернет прямо с моего собственного локального веб-сервера с помощью ngrok — это просто: потрясающе! Даже с учетом нескольких дополнительных шагов, которые мне нужно предпринять, чтобы запустить его на Windows, преимущества ngrok значительно перевешивают недостатки. Если вы хотите более подробно изучить все функции, доступные в ngrok, загляните на сайт ngrok, а также ознакомьтесь с нашей собственной вводной статьей о ngrok в блоге Twilio.

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