Разработка сайтов в Перевальске, ДНР. Доступ к локальному хосту из любого места

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

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

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

юбка

ПейджКайт

местный туннель

скучныйпрокси

BrowserStack

Как можно получить доступ к локальному хосту из любого места?

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

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

Примечание об использовании виртуальных хостов

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

DocumentRoot «/Users/patcat/Web»

ServerName mytestsite.test

ServerAlias 350c0f8e.ngrok.com

 

юбка

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

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

Планы Ngrok на май 2021 года выглядят так:

планы ngrok на май 2021 г.

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

Как использовать нгрок

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

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

. /ngrok http 80

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

ngrok работает на порту 80

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

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

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

Просмотр входящих запросов ngrok

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

расширенные функции ngrok

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

ngrok http -auth="username:password" 80

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

ngrok http -subdomain nogophersinmytunnel 80

Пользовательские домены предназначены для тех случаев, когда вы предпочитаете, чтобы в URL-адресе туннелируемого проекта не было «ngrok». Платные планы позволяют вам использовать свои собственные домены вместо использования ngrok.com:

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

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

ngrok http 192.168.0.27:80

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

ngrok tcp 22

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

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

ПейджКайт

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

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

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

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

Как использовать ПейджКайт

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

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

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

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

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

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

PageKite работает на порту 80

Расширенные возможности 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, чтобы выставить его в Интернете:

PageKite и KWS работают на моем телефоне

PageKite доставляет сайт с моего телефона

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

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

местный туннель

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

Как использовать локальный туннель

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

npm install -g localtunnel

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

lt —port 80

Он будет работать так же, как ngrok и PageKite! Это дает вам поддомен, что-то вроде того, что мне дали: https: //loud-ladybug-21.loca.lt.

localtunnel работает на порту 80

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

localtunnel дружественное предупреждение

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

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

lt —port 80 —subdomain platypusestunneltoo

Одной из очень удобных функций, предоставляемых localtunnel, является Node API, который позволяет вам создавать локальные туннели через JavaScript для использования в ваших автоматических тестах:

const localtunnel = require ('localtunnel’) ;

(async () => {

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

// Your tunnel URL will appear as tunnel.url

tunnel.on ('close’, () => {

// Do something once the tunnel is closed

}) ;

}) () ;

скучныйпрокси

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

Кратко о его особенностях:

100% бесплатно и с открытым исходным кодом под лицензией MIT

может быть полностью автономным

имеет встроенный обратный прокси

поддерживает пользовательские домены/поддомены

Как использовать скучный прокси

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

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

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

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

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

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

BrowserStack просматривает страницу на моем локальном хосте

Воспроизведение избранного

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

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

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

Заключение

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