Доступ к localhost из любой точки мира

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

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

Всем усталым веб-разработчикам я сообщаю, что более простой способ пришел! Фактически, целый ряд приложений и сервисов доступен для облегчения этого процесса, предоставляя доступ к вашему localhost из Интернета. Те, о которых я буду говорить в этой статье:

• ngrok
• PageKite
• localtunnel
• boringproxy
• BrowserStack

Основные выводы

Как можно получить доступ к localhost из любой точки мира?

Это возможно через безопасные туннели в интернете! Это услуги, которые предоставляют вам туннель от Интернета к вашему компьютеру.

Это означает, что они предоставляют общедоступный URL, отслеживают вызовы по этому URL и пересылают эти вызовы на ваш сервер localhost. Все запутанная настройка уже сделана за вас; вам нужно только установить приложение и направить его на ваш localhost.

A Note About Using Virtual Hosts

На моем localhost установлены виртуальные хосты. Без указания адреса от каждой из следующих услуг в качестве ServerAlias, мой сервер откажется корректно работать. Прошло несколько часов замешательства. Если вы оказались в такой же ситуации, добавьте ServerAlias в ваш httpd.conf, заменив адрес ngrok, указанный ниже, на адрес используемой вами услуги:

<VirtualHost *:80>
  DocumentRoot "/Users/patcat/Web"
  ServerName mytestsite.test
  ServerAlias 350c0f8e.ngrok.com
</VirtualHost>

ngrok

ngrok — это приложение для Windows, macOS и Linux, которое создает туннель и позволяет проверять все трафик, проходящий через него, а также воспроизводить этот трафик для тестирования.

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

Планы ngrok по состоянию на май 2021 года выглядят следующим образом:

Одним из ключевых преимуществ ngrok является отсутствие зависимостей. Вы устанавливаете ngrok и запускаете его. Ничего более не требуется.

Как использовать ngrok

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

Откройте командную строку и перейдите в папку, куда вы извлекли ngrok. Выполните следующую команду, чтобы создать туннель к вашему localhost на порту 80:

./ngrok http 80

Вы увидите экран, как на картинке:

В примере выше у нас есть трафик на случайно сгенерированный адрес ngrok http://42e474ef9799.ngrok.com, который перенаправляется на наш localhost по адресу 127.0.0.1:80.

Откройте этот URL на любом устройстве с подключением к интернету, и вы будете получать доступ к вашему localhost через Веб!

Одно из более уникальных предложений, которое предоставляет ngrok, – это возможность проверять прошлый трафик. Для этого перейдите по ссылке http://localhost:4040/ на вашем компьютере. Вы получите доступ к панели, на которой отображаются входящие запросы. Вы можете нажать на каждый запрос слева и увидеть детали справа для заголовков и другой информации. Моё любимое использование этого – просмотр данных JSON, возвращаемых от запросов. Очень простая структура этого, когда загружается простая HTML-страница, выглядит следующим образом:

Вы даже можете повторить запрос, нажав кнопку Повторить справа. Это перезапустит запрос для вас через туннель.

Продвинутые функции ngrok

Защита паролем позволяет предотвратить случайный доступ членов общественности к вашему сайту:

ngrok http -auth="username:password" 80

Пользовательские поддомены предназначены для случаев, когда вы не хотите запоминать случайно сгенерированный URL! Если вы подпишетесь на платную подписку ngrok, вы можете зарезервировать поддомен, чтобы другие не могли его занять. Следующее позволяет просматривать ваш localhost по адресу nogophersinmytunnel.ngrok.com:

ngrok http -subdomain nogophersinmytunnel 80

Пользовательские домены предназначены для случаев, когда вы предпочитаете не иметь “ngrok” в вашем URL для туннелированного проекта. Платные планы позволяют использовать ваши собственные домены, а не нуждаться в использовании ngrok.com:

ngrok http -hostname="tunnel.yourdomain.com" 80

Вы даже можете туннелироваться к IP-адресу в вашей локальной сети, который в противном случае не был бы доступен для внешнего мира:

ngrok http 192.168.0.27:80

Или вы можете создать туннель для других не-HTTP сервисов:

ngrok tcp 22

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

Чтобы ознакомиться со всеми возможностями, см. документацию ngrok.

PageKite

PageKite — это основанный на Python «динамический туннельный обратный прокси», который работает на Windows, macOS, Linux и даже на устройствах Android! Он очень похож на ngrok, но существует намного дольше и, похоже, значительно более проверен в боях для более широкого круга применений. Они даже настроили его для работы с протоколом Minecraft, чтобы люди могли запускать сервер Minecraft на своем локальном компьютере.

Вы можете зарегистрироваться на бесплатную пробную версию на месяц с квотой на передачу данных в 2,5 ГБ. После этого действует система «плати как хочешь» (минимум 4 доллара США в месяц, или бесплатно, если вы работаете над свободным открытым программным обеспечением). Однако вам нужно будет платить больше, чтобы получить больше в этом случае, причем те, кто платит большие суммы, получают большую квоту, более длительный срок обслуживания, пользовательские поддомены и так далее.

PageKite, похоже, не имеет инструмента для проверки трафика, как ngrok, но у него есть довольно невероятные функции, такие как встроенный брандмауэр, который блокирует доступ к общим целям атак, таким как /wp-admin, /xampp, phpMyAdmin страницы… и так далее. Его можно отключить, если вы не против того, чтобы эти страницы были публичными.

У них даже есть передний конец ретранслятора в Сиднее, Австралия, так что это потенциально может обеспечить более быстрые скорости для австралийских разработчиков.

Как использовать PageKite

Перейдите на PageKite.net и загрузите версию для вашей ОС. Для пользователей Windows сначала нужно убедиться, что установлен Python. Для macOS и Linux можно использовать простой командный cURL для установки прямо из командной строки.

После загрузки запустите эту команду, чтобы запустить туннель к вашему серверу localhost. Вы выбираете конкретный поддомен, который используете каждый раз (вместо случайного распределения в ngrok). Здесь я выбрал hurrygetintothefancytunnel:

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Недавно на моем Mac мне нужно было запускать с python3 в начале, так что попробуйте это, если вышеуказанное не сработает:

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Он запустится и зарегистрирует вас в сервисе, если вы еще не зарегистрированы. Тогда у вас будет работающий localhost для всего мира!

Дополнительные функции PageKite

PageKite имеет некоторые более впечатляющие дополнительные функции.

Один пример: нет необходимости в веб-сервере. Если у вас нет работающего сервера, у него есть встроенный веб-сервер, который может запускать ваши статические файлы следующим образом:

pagekite.py /path/to/folder igotthattunnelvision.pagekite.me

Как и в ngrok, вы можете ограничить доступ с помощью пароля:

pagekite.py 80 terelekkayatuneli.pagekite.me +password/username=password

Или ограничить доступ по IP-адресам:

pagekite.py 80 arcadefirecamethroughmywindow.pagekite.me +ip/1.2.3.4=ok +ip/4.5.6=ok

Как упоминалось выше, вы можете даже запустить все это на вашем телефоне. Я установил веб-сервер для Android под названием kWS и затем запустил PageKite, чтобы отобразить его в Интернете:

Это, конечно, не то, что я буду делать каждый день, но довольно приятно видеть, что это теперь возможно исключительно на смартфоне!

Так же, как и ngrok, PageKite позволяет создавать несколько туннелей одновременно, поддерживает использование собственного домена и настройку конфигурационного файла для туннелей. Больше информации можно найти в их Руководстве по быстрому старту и более подробной странице с инструкциями.

localtunnel

localtunnel — это сервис туннелирования, изначально разработанный на Node.js, но также имеющий клиенты на Go и C#/.NET.

Как использовать localtunnel

Вы можете установить его глобально на своем устройстве, как большинство пакетов npm:

npm install -g localtunnel

Чтобы запустить туннель на localhost по порту 80, выполните следующую команду:

lt --port 80

Он работает аналогично ngrok и PageKite! Вы получите субдомен, например, такой, как у меня: https://loud-ladybug-21.loca.lt.

При первом запуске localtunnel вы получите дружественное напоминание о том, что это действие делает ваши ресурсы публичными в Интернете. Просто нажмите Нажмите, чтобы продолжить.

Дополнительные функции localtunnel

Получение бесплатного пользовательского субдомена возможно, если он не занят. Чтобы использовать пользовательский субдомен, просто запустите его с параметром --subdomain:

lt --port 80 --subdomain platypusestunneltoo

Одна из очень полезных функций, предоставляемых localtunnel, — это API для Node.js, которое позволяет создавать localtunnels через JavaScript для использования в автоматизированных тестах.

const localtunnel = require('localtunnel');

(async () => {
  const tunnel = await localtunnel({ port: 3000 });

  // Ваш URL туннеля будет выглядеть как tunnel.url

  tunnel.on('close', () => {
    // Сделайте что-то, когда туннель закроется
  });
})();

boringproxy

boringproxy — это более новая опция, которая полностью бесплатна и является открытым исходным кодом под лицензией MIT! Ее основное внимание уделяется облегчению для людей самостоятельного размещения веб-сайтов на своих компьютерах. Она поставляется в виде одного исполняемого файла, который работает как сервер и клиент в одном. Существует исполняемый файл для ряда систем Linux и Windows. macOS указан как “непроверенный”. Мне лично не удалось заставить его работать на моем Mac, но если у вас есть доступ к Linux или Raspberry Pi, это может быть именно таким решением для вас. Все написано на Go и открыто для соавторов.

Краткое описание его функций:

• 100% бесплатно и открыто под лицензией MIT
• может быть полностью размещен самостоятельно
• имеет встроенный обратный прокси
• поддерживает пользовательские домены/субдомены

Как использовать boringproxy

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

В целом, это включает:

• загрузку экземпляра сервера через curl (например, curl -LO https://github.com/boringproxy/boringproxy/releases/download/v0.6.0/boringproxy-linux-x86_64)
• chmod-уем загруженный исполняемый файл (например, chmod +x boringproxy-linux-x86_64)
• настройка привязки к портам 80 и 443 (например, sudo setcap cap_net_bind_service=+ep boringproxy-linux-x86_64)
• установка исполняемого файла на клиентской стороне тоже

В этом видео от создателя boringproxy подробно рассказывается о том, как это делать лучше всего:

Расширенные возможности boringproxy

Автоматические сертификаты HTTPS управляются автоматически через Let’s Encrypt. Не нужно беспокоиться о получении сертификатов для тестирования, так как это происходит за кулисами.

Веб-интерфейс для настройки автоматически настраивается для управления пользователями, токенами доступа и туннелями.

Вы можете легко туннелировать веб-приложения. Самостоятельно размещать веб-приложения, такие как Etherpad (как показано в видео выше), предоставлять им собственный поддомен, и затем вы можете к ним получить доступ из любой точки мира.

BrowserStack

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

Вы можете использовать вышеуказанные методы для тестирования сайтов localhost в виртуальных машинах BrowserStack, но также имеется расширение браузера для Chrome и Firefox, позволяющее предоставлять доступ к вашему localhost с их серверов.

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

Как использовать BrowserStack

Зарегистрируйтесь на пробное использование на BrowserStack.com. На самом деле процесс локального тестирования на их сайте хорошо документирован, поэтому прочитайте об этом, если вы заинтересованы в этом пути.

В конце концов, однако, это позволит вам тестировать ваши сайты localhost на виртуальных машинах, работающих через Интернет, следующим образом:

Любимые

После того, как я поиграл со всеми этими вариантами, моими личными фаворитами должны быть ngrok и PageKite.

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

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

Заключение

Если вы работаете на компьютере с активным подключением к интернету, теперь вы можете настроить доступ к вашему localhost из любой точки мира всего за несколько минут! Начало работы чрезвычайно просто, и, как вы видели, вариантов решения проблем немало!

Вы использовали какие-либо из этих услуг? Есть ли у вас другие предпочтения? Я бы хотел услышать ваше мнение в Твиттере!

 

Часто задаваемые вопросы о доступе к localhost из любой точки