Как публично выставить локальный сервис SignalR для мобильных клиентов с помощью ngrok

При работе с мобильными клиентами не всегда удобно поместить их в одну сеть с вашей машиной разработки, и даже если получится, localhost для них будет означать другое: придётся использовать IP-адреса, менять биндинги, отключать SSL или доверять самоподписанным сертификатам - словом, мучение.

Поприветствуйте ngrok.

ngrok позволяет создать защищённый публичный прокси, который перенаправляет все запросы на конкретный порт вашей машины разработки. Бесплатный план разрешает HTTP/TCP-туннели на случайных URL и портах для одного процесса плюс не более 40 соединений в минуту. Для большинства этого более чем достаточно. Если нужны зарезервированные домены или собственные поддомены - и более высокие лимиты - есть платные планы.

Начнём

Сначала зарегистрируйтесь в ngrok, скачайте их клиент и распакуйте в удобное место. Затем, следуя Setup & Installation guide, выполните команду ngrok authtoken для аутентификации.

Далее запустите ваше веб-приложение и посмотрите его URL. У меня это https://localhost:44312/, значит нам нужно пробросить порт 44312 по https. В том же окне cmd, где вы аутентифицировались, выполните ngrok http `https://localhost:44312/`, конечно, заменив https://localhost:44312/ на URL вашего приложения. Это запустит прокси и покажет публичные URL, по которым к нему можно обратиться.

Если вы не используете HTTPS, можно использовать более короткую команду ngrok http 44312.

Если вы получаете 400 Bad Request — Invalid Hostname, значит кто-то пытается проверить заголовок Host и не может, потому что значения не совпадают: по умолчанию ngrok передаёт всё на ваш веб-сервер без изменений. Чтобы переписать заголовок Host, используйте ключ -host-header=rewrite.

В моём случае - ASP.NET Core + IIS Express - полная команда выглядит так:

ngrok http -host-header=rewrite https://localhost:44312

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

Попробуйте!

Вы легко можете проверить это сами: клонировать оригинальный пример Xamarin Forms SignalR Chat (репозиторий на GitHub больше не доступен), запустить проект .Web и выставить его через ngrok, как описано выше. Затем замените ChatHubUrl в appsettings.json на ту, что сгенерировал для вас ngrok.