Тестирование локального сайта на мобильном устройстве

Была ли у вас необходимость проверить сайт, который вы делаете на localhost, на мобильном устройстве? Наверняка да. У меня такая необходимость возникает довольно часто.

Конечно, мы можем воспользоваться инструментами, которые идут в комплекте с браузером, но что, если возникла необходимость открыть сайт на реальном устройстве?

Такая задача легко решается, когда у вас есть удаленный сервер, на котором вы ведете разработку и совершенно спокойно можно открыть сайт на своем телефоне или использовать сервис типа BrowserStack, но что делать, если разработка ведется на локальном сервере?

Решение есть — ngrok!

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

Установка ngrok на macOS

Для установки необходимо выполнить всего три шага:

1. Скачать ngrok;
2. Разархивировать в папку Программы(Applications);
3. Создать символическую ссылку(symlink).

Создание симлинка для ngrok

Выполните две команды в терминале для создания симлинка:

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

Также установить ngrok можно выполнив команду:

Использование ngrok

Проще всего запустить туннелирование выполнив команду ngrok http [номер порта], например:

После выполнения команды вы увидите примерно следующие данные:

и используя сгенерированные сервисом ссылки сможете перейти на локальный ресурс с любого устройства.

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