Как открыть сайт в локальной сети с локального компьютера?

Как открыть сайт в локальной сети с локального компьютера?

96 393 в Полезные советы 61

Всем привет! На связи Заур Магомедов с очередной порцией материала для веб-мастеров. Не успел начаться год, как мы уже приблизились к концу февраля. Пишу этот пост в праздничный день 23 февраля и пока не забыл — поздравляю всех мужчин с Днем защитников отечества! Ну что можно пожелать еще, как не мирного неба над головой и здоровья всем нам. А теперь собственно перейдем к теме поста.

Когда разрабатываешь сайт по ходу дела могут появляться какие-либо вопросы к заказчику. Так вот эти вопросы удобнее, а в некоторых случаях просто обязательно обсуждать, когда заказчик видит сам сайт. Как мы можем показать сайт заказчику если он разрабатывается на локальном сервере? Можно, конечно, выгрузить на хостинг, это как вариант. Но для меня лично это неудобно, т.к. придется делать обновление на хостинге периодически по мере поступления вопросов. Можно также работая на локалке, при каждом сохранении файлов выгружать их на хостинг, причем делается это автоматически, например, в редакторе Sublime Text 3 + плагин Sftp есть такая возможность.

Не смотря на вышеперечисленные способы, есть вариант дать доступ к локальному сайту из интернета для просмотра. Тогда заказчик может наблюдать за всем ходом работы. Единственный минус — когда вы выключаете компьютер просмотр станет невозможным. Можно в принципе компьютер и не выключать, пусть работает, ничего страшного в этом нет. Давайте теперь рассмотрим, как показать сайт по локальной сети и дать доступ из интернет.

В качестве веб-сервера я буду использовать мой любимый Open Server.

Доступ к сайту по локальной сети

Сразу скажу, что в данной статье я не буду показывать как нужно настраивать саму локальную сеть. Благо по этой теме в интернете есть масса материалов, в том числе и видео. Чтобы показать сайт по локалке нам необходимо сделать некоторые настройки в Open Server. Для этого щелкаем правой кнопкой мыши по флажку Open Server в трее и переходим к настройкам. Выбираем вкладку «Сервер» и там находим такой пункт, как «IP-адрес сервера», выставляем опцию «Все доступные IP».

Настройки Open Server вкладка Сервер

Далее переходим во вкладку «Алиасы». Обратите внимание на поля: исходный домен, конечный домен. В поле «Исходный домен» мы вбиваем IP-адрес нашего компьютера в локальной сети. Узнать его можно следующим образом: щелкаем на комбинацию клавиш Win+R и в появившимся окошке вбиваем команду «cmd» для запуска окна командной строки.

Запуск командной строки в Windows

Далее в окне командной строки вводим команду «ipconfig» и получаем вот такой результат.

Командная строка Windows

Здесь нас интересует срока «IPv4-адрес». Это и есть ваш локальный IP-адрес компьютера. У меня он — 192.168.1.205, вот как раз его я и вбиваю в поле «Исходный домен» в настройках локального сервера. В поле «Конечный домен» мы выбираем домен нашего сайта. Я выбрал домен по умолчанию — Localhost для примера. После выбора жмем по кнопке «Добавить» и у нас в списке внизу появится запись, которая говорит о том, какой домен должен открываться при обращении к компьютеру с данным IP-адресом из локальной сети.

Исходный и конечный домены во вкладке Алиасы Open Server

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

Доступ к локальному сайту из интернета

Можно дать возможность пользователям смотреть на сайт из интернета. В данном случае локальный сервер будет выступать в роли виртуального хостинга. Но здесь есть некоторый нюанс — у вас должен быть выделенный (статичный) внешний IP-адрес. Ваш интернет-провайдер должен назначить вашему компьютеру в своей сети IP-адрес, который останется неизменным. Обычно такую услугу провайдеры предоставляют за отдельную дополнительную плату. Имея выделенный IP-адрес, доступ к локальному сайту можно решить на раз, два…

Безопасность компьютера!

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

Открываем настройки Open Server -> Алиасы. Добавляем новую строку в паре Исходный домен -> Конечный домен. В поле исходного домена вбиваем наш выделенный IP-адрес. В поле конечного домена выбираем наш домен. Не забываем нажать на кнопку «Добавить». Если вы не знаете свой IP-адрес, то узнать его можно на сайте 2ip.ru.

Узнать свой IP-адрес на сайте 2ip.ru

Следующее, что нам необходимо будет сделать это создать переадресацию портов в маршрутизаторе. Для чего это нужно? Когда обращаются к нашему IP-адресу из сети компьютер должен знать куда перенаправлять эти запросы. Так вот, с помощью переадресации мы как-бы говорим открой такой то сайт. Я покажу на примере своего роутера Asus RT-N12, но суть у всех роутеров будет та же самая, поэтому тут проблем не должно возникнуть. Если у вас английская прошивка, то ищите что-то типа Port Forwarding. На крайний случай почитайте в интернете, как создать переадресацию портов в вашем роутере.

Входим в панель управления роутера и переходим в раздел «Интернет» -> «Переадресация портов». Здесь сразу ставим переключатель «Включить переадресацию портов» в положение «Да». Далее, в поле «Имя службы» можно ввести произвольное название на латинице. В поле «Диапазон портов» можно указать диапазон портов с которыми вы будете работать. По умолчанию для http-соединения используется 80-й порт, поэтому в данном поле я ввожу — 80. В поле «Локальный IP-адрес» выбираем свой локальный компьютер. «Локальный порт» — вводим номер порта, с которым работает ваш локальный сайт. Его можно узнать в настройках Open Server. Смотрите выше скрин настроек Open Server, вкладки «Алиасы», ниже указаны настройки портов. Порт по умолчанию «80» можно переопределить, например. — 8080. Это нужно, если в вашей локальной сети уже кто-то занял 80-й порт. Тогда соответственно в поле «Локальный порт» вы указываете — 8080. После всего жмем на кнопочку «Add/Delete» и у нас в списке появляется новая запись.

Переадресация портов в роутере Asus RT-N12

После всех настроек применяем настройки — «Применить», при этом роутер будет перезагружен. Теперь в адресной строке браузера на удаленном компьютере вводим наш внешний IP-адрес и открываем сайт.

Что делать, если у вас нет выделенного IP-адреса?

Вариант с выделенным IP-адресом может подойти не всем. Не каждый захочет переплачивать провайдеру за выделенный IP и я их понимаю. Как раз для таких случаев предусмотрен вариант с динамическим IP-адресом — технология DDNS (Dynamic Domain Name System). Суть ее состоит в том, что клиенты могут подключится к роутеру даже с динамическим внешним IP-адресом через зарегистрированное доменное имя. В большинстве современных роутерах служба DDNS уже встроена. В качестве DNS-сервера выступают сервисы, которые предлагают услуги DDNS. Один из таких сервисов — noip.com. Вообще, таких сервисов может быть много, по крайней мере я знаю уже несколько. Итак, давайте все по порядку.

Регистрируемся на сайте noip.com. При регистрации можно отметить чек-бокс «Create my hostname later», т.е. создать имя хоста позже. Обратите внимание, на странице регистрации указано, что доступно бесплатным пользователям. Нас интересует именно «Hostnames», т.е. количество создаваемых хостов. Для бесплатного аккаунта это количество равно — 3. Думаю этой цифры будет более, чем достаточно.

Выбор тарифного плана на сайте no-ip.com

После регистрации обязательно активируйте свой аккаунт, переходом по ссылке в письме. После авторизации мы попадаем в свой личный кабинет, выбираем в меню «Dynamic DNS (Free)» -> «Hostnames» и создаем имя хоста, кликнув по кнопочке «Add Hostname». В поле «hostname» вводим любое имя латинскими буквами, например, my-site. Имейте ввиду, что выбранное вами имя может быть занято на определенном домене (поле Domain). Можете ввести другое имя или выбрать домен, на котором это имя будет свободно. В поле «IPv4 Address» подставлен ваш внешний IP-адрес, система определила его автоматически. Здесь ничего не трогаем. Если хотите убедиться, что это именно ваш IP, то можете сравнить его на сайте 2ip.ru. Добавляем хост — «Add Hostname».

Создание хоста на сайте no-ip.com

Все, хост у нас создан. Теперь копируем адрес хоста в буфер обмена и идем в панель управления роутера: «Интернет» -> «DDNS» и вводим свои данные, как на скрине ниже. Единственное прокомментирую то, что вам надо будет ввести свой логин и пароль, который вы указывали при регистрации на сайте no-ip.com.

Настройка DDNS в роутере Asus RT-N12

Жмем «Применить» и ждем пока перезагрузится роутер. Последнее, что нам необходимо будет сделать это указать наш хост в Open Server. Для этого идем в настройки, вкладка «Алиасы» и добавляем в список новый хост в ключе Исходный домен -> Конечный домен.

Добавление нового алиаса хоста в Open Server

Все, вбиваем в адресной строке браузера наш хост, в моем случае это — my-site.ddns.net и ура наш локальный сайт открывается. Проверять лучше на телефоне или на другом устройстве, которое не подключено к вашей локальной сети, т.к. данный хост может открыться и по локалке. Можно в телефоне отключить Wi-Fi и через мобильный интернет проверить. Вот, что у меня получилось.

Доступ к локальному сайту из интернет

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

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (21 оценок, среднее: 4,81 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, jQuery, JavaScript, Git, БЭМ, Gulp.
Другие материалы той же категории