Как сделать локальный сайт доступным по сети

0

Как создать свой хостинг (сервер) дома для веб-сайта (чтобы сайт был доступен из локальной сети и Интернет). Простейший пример в Open Server при работе в Windows

Если вы создаете свой сайт и хотите, чтобы он работал только в вашей локальной сети, либо вам нужно сначала его «от и до» протестировать, прежде чем выкладывать в сеть (/либо надумали сэкономить средства на платном хостинге) — можно для этого дела «приспособить» свой домашний ПК/ноутбук (сделать его эдаким сервером). Этим, собственно, мы сегодня и займемся.

Благо, что настраивается это всё достаточно легко (самые большие сложности — обеспечить ему стабильность, ведь далеко не каждый из нас сможет ежедневно/ежечасно контролировать работу компьютера, его подкл. к Интернет, нагрузку ЦП и пр. Но об этом я пару слов скажу в итогах).

Еще пара важных нюансов : способ, изложенный ниже, актуален для ОС Windows 10/11; компьютер должен быть подключен или к локальной сети / или к Интернет (в моем примере ПК подкл. к обычному дом. Wi-Fi роутеру, а он в свою очередь к Интернет).

Итак, теперь к делу.

Пошаговые действия

Установка веб-сервера, размещение файлов сайта

ШАГ 1

В качестве веб-сервера я бы порекомендовал остановиться на 📌Open Server. Он достаточно удобный, надежный, имеет кучу опций (можно выбрать версию PHP, MySQL, настроить авто-выполнение скриптов и пр.). Весь перечень функций приведен на офиц. сайте.

После установки (стандартная, поэтому ее не описываю) и запуска Open Server — у вас в трее должен появиться зеленый флажок (значит веб-сервер работает и с ним все в порядке!). 👇

Кстати, часто Open Server не хочет запускаться из-за отсутствия 📌Microsoft Visual C++ (при установке веб-сервера — не отказывайтесь от загрузки этих пакетов).

Open Server установлен и запущен! Горит зеленый флажок в трее, рядом с часами

ШАГ 2

Далее нужно зайти в папку установки Open Server и открыть каталог «Domains» (в моем случае весь путь такой: C:\openserver5.2\domains ).

В этом каталоге нужно создать папку с именем вашего домена (адреса сайта) , например: testforme.site (можно использовать и testforme.ru , и testforme.com , и даже yandex.ru т.д.*). 👇

📌* Но крайне желательно: выбрать такой домен/адрес сайта, который никем не занят, чтобы в последствии вы могли его зарегистрировать у регистратора, если надумаете открывать сайт для доступа из Интернет. Проверку домена на занятость можно выполнить у Рег.ру.

👉 Примечание : в созданном каталоге с именем домена (в моем случае testforme.site ) нужно разместить файлы сайта: движок, HTML-страницы и т.д. В своем примере я создал в этом каталоге 1 файл index.php и добавил в него короткую строку: «Привет! Этот сайт открылся с дом. хостинга» ). Этого хватит для проверки. Установку движка WordPress рассмотрел в конце статьи, здесь не хочу загромождать.

Папка = имя домена (в ней файл index.php, движок сайта)

Настройка Open Server для доступа к сайту по локальной сети (по IP и по доменному имени)

ШАГ 3

Чтобы открыть настройки у Open Server — сделайте правый клик мышки по его значку в трее, и в появившемся меню выберите соотв. пункт. См. скрин ниже. 👇

Настройки Open Server — клик по значку в трее, в меню выбрать оное

Далее в меню «Модули» укажите необходимую версию PHP, MySQL и пр. для работы вашего сайта. Думаю, что для тестового файла (пока что. ) — можно задать параметры примерно как у меня на скрине ниже. 👇

Можно выбрать версию PHP, MySQL и пр. — модули в Open Server

В меню «Сервер» нужно изменить парочку опций:

1. разрешить запуск сервера в агрессивном режиме (чтобы допустить его работу, если возникнут незначительные ошибки);
2. установить пункт «Все доступные IP» в пункте «IP-адрес сервера» ;
3. затем нужно нажать по меню «Сохранить» .

Все доступные IP, перезагрузка

Далее нам нужно узнать 📌локальный IP адрес компьютера, на котором запущен Open Server (по нему можно будет открывать сайт).

Самый простой способ узнать его — 📌открыть настройки роутера и посмотреть список подключенных устройств (впрочем, есть и др. способы). В моем случае напротив имени ПК «alex-pc» значится адрес 192.168.1.2 (он и нужен!). 👇👇

Примечание : кстати, в настройках роутера неплохо было бы сделать этот IP (192.168.1.2, например) постоянно закрепленным за вашим компьютером. Иначе есть риск, что через неск. дней этот IP роутер даст другому компьютеру в вашей сети.

Настройки роутера — узнаем свой локальный IP

Затем в настройках Open Server в разделе «Алиасы» нужно добавить:

• в строку «Исходный домен» свой локальный IP (192.168.1.2 в моем случае);
• в строку «Конечный домен» адрес/домен своего сайта (testforme.site в моем случае). 👇

Алиасы — привязываем IP к домену

👉 По IP 192.168.1.2 — сайт теперь будет доступен со всех ПК/ноутбуков/телефонов в локальной сети (т.е. тех, которые подключены к Wi-Fi сети вашего роутера, например).

👉👉По доменному имени testforme.site — сайт будет доступен только с того компьютера, на котором запущен Open Server. Чтобы сайт был доступен по доменному имени на другом ПК/ноутбуке в локальной сети — нужно на нем открыть блокнот и изменить 📌системный файл hosts (добавить в него строку вида: 192.168.1.2 testforme.site ).

Пример. Из файла hosts

Как это выглядит на примере приведено ниже 👇 (обратите внимание на адресную строку браузера — т.е. сайт доступен одновременно и по IP, и по домену).

Теперь сайт доступен в локальной сети, достаточно указать его IP в адресной строке браузера

Как открыть доступ к сайту из сети Интернет по IP и по доменному имени

Реализуемость этой «штуки» во многом зависит от вашего Интернет-провайдера. Дело в том, что внешний IP-адрес у вас может быть «белым» и «серым» (со втором ничего не получится. ) . Чаще всего провайдеры сегодня выделяют динамический белый IP, и в этом случае всё должно работать (до смены этого IP).

В общем, в идеале нужно заказать у провайдера услугу выделения «белого статического IP-адреса» (у некоторых компаний услуга уже включена по умолчанию, и вам не нужно ничего делать; у других — покупается и подкл. отдельно: где-то дешево / где-то дорого. ).

В любом случае — попробовать нижеописанное труда не составит (даже, если вы ничего не поняли из вышесказанного и не знаете какой у вас IP)! 🙂

ШАГ 4

Итак.

Сначала нужно узнать свой 📌внешний IP адрес. Для этого достаточно, как уже говорил выше, открыть 📌настройки роутера и посмотреть вкладку «Состояние / инф. о подключении» (в моем примере внешний IP: 92.252.216.210). Запоминаем его!

Далее нам нужно в настройках роутера пробросить порты 80 и 443 на тот ПК, на котором расположен сайт (эти порты по умолчанию используются для подкл. к сайту по http\https). Более простой вариант — ничего вручную не пробрасывать, а просто включить DMZ-хост для вашего ПК (т.е. DMZ для вашего локального IP). Ссылка ниже в помощь! 👇

Узнаем свой IP-адрес (он должен быть белым!), и пробрасываем порты

Затем в настройках Open Server необходимо открыть вкладку «Алиасы» и связать там свой внешний IP с доменным именем. См. скрин ниже. 👇

Добавляем внешний IP в алиасы — Open Server

Попробуйте после этого набрать свой внешний IP в адресной строке браузера (с любого ПК/телефона/ноутбука, подкл. к Интернет). Должен открыться ваш сайт! 👇

Половина задачи выполнена!?🙂

Сайт открывается по IP

ШАГ 5

Если вы хотите, чтобы сайт был доступен по сети Интернет с любого устройства по доменному имени — понадобиться его зарегистрировать. Сделать это можно у спец. 📌регистраторов, например, 📌Бегет / 📌Рег-ру (и при усл., что ваше желаемое имя никем не занято!).

После регистрации доменного имени (покажу на примере Бегет и Рег-ру) — необходимо открыть управление DNS записями и создать запись вида «A 92.252.216.210» (разумеется, указать нужно свой внешний IP!). Т.е. мы этой операцией «говорим» какой IP открывать при обращении к домену!

Меняем A-запись в настройках DNS (у регистратора доменов или у DNS-хостинга)

Кстати, у Рег-ру нужно выбрать беспл. DNS серверы (их), а затем появится возможность добавить A-запись.

Рег-ру — указываем IP-адрес сервера, по которому будет открываться сайт

Затем останется подождать 15-60 мин. (обычно). Сначала при попытке открыть «наш» сайт по доменному имени будет появл. заглушка регистратора, но когда записи обновятся — предстанет сайт!

Важный момент: сайт перестанет открываться, когда провайдер изменит ваш внешний IP-адрес, либо вы выключите свой компьютер (на котором открыт Open Server).

Через 15 мин. сайт стал открываться по указанному IP — всё работает!

Установка движка (например, WordPress) в Open Server

ШАГ 6

1) Сначала потребуется загрузить движок сайта на ПК (обычно, это архив формата ZIP). Для примера я взял WordPress — офиц. сайт: https://ru.wordpress.org/download/releases/

2) Затем нужно запустить Open Server, нажать ПКМ по значку в трее и открыть PHPMyAdmin. См. пример ниже. 👇

Прим.: логин root, пароль вводить не нужно!

Открываем настройки Open Server — PHPMyAdmin

3) После нужно создать базу данных, я для примера ввел «test1» и нажал кнопку «Создать» . См. ниже. 👇

Создать базу данных (пользователь root, пароля нет)

4) Затем в папке «Domains» (она в каталоге с файлами Open Server) нужно создать папку с доменным именем вашего сайта и извлечь в нее архив с файлами движка WordPress (в моем случае путь получился таким: C:\openserver5.2\domains\testforme.site ).

У WordPress за подключение к БД отвечает файл «wp-config-sample.php» — переименовываем его в «wp-config.php» и открываем для редактирования!

Распаковываем файлы WordPress в папку-домен нашего сайта

5) В строку с «DB_NAME» указываем имя нашей созданной базы (в моем случае test1 ), в «DB_USER» вставляем root , а пароль в строке «DB_PASSWORD» оставляем не заданным. См. пример ниже. 👇

Как выглядит открытый wp-config.php в блокноте — редактируем файл

6) Теперь, если открыть адрес нашего сайта в браузере (если вдруг не откроется — перезапустите Open Server!) , — появится приветственное меню с установкой WordPress. Осталось только дать имя сайту, ввести логин и пароль для доступа к админ-панели, и установить движок.

7) Сайт заработал на WordPress! Панелька появилась сверху — вы можете открыть ее для смены темы, добавления новостей и заметок, и пр.

На телефоне тоже открывается! Кстати, как только выключил ПК (на котором Open Server) — сайт сразу же перестал работать. 🙂

Итоги

ШАГ 7

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

Однако, есть свои минусы, которые могут любое удобство и экономию превратить в прямо-противоположное:

1. во-первых , нужен статический «белый» IP адрес (как правило, это отдельная услуга у вашего Интернет-провайдера. Иногда цена на него стоит дороже, чем 📌арендовать платный хостинг/сервер);
2. во-вторых , ПК с веб-сервером и сайтом должен работать 24 часа в сутки (либо посетители должны знать, когда на него заходить 🙂);
3. в-третьих , желательно подкл. 📌к двум Интернет-провайдерам, чтобы обеспечить бесперебойный доступ;
4. в-четвертых , сайт желательно разместить на SSD накопителе (так он будет открываться быстрее);
5. в-пятых , если у вас будет много посетителей, или сайт будет предлагать какую-то ресурсоемкую услугу — то ваш ЦП может начать «испытывать» высокую нагрузку. За ПК работать может стать не комфортно.
6. в-шестых , вам нужно на регулярной основе следить за всем этим «добром»: чтобы Интернет работал, IP не менялись, ПК не перегревался (и работал 24 часа в сутки) и пр.

📌 Взвесив все «За» и «Против» получается, что заниматься этим для экономии средств — практически бессмысленно (по крайней мере, во многих случаях).

Другое дело, если вам требуется сделать небольшой форум в лок. сети для друзей, или вы проводите испытания своего сайта перед «большим заплывом» — то почему нет?! 🙂

Форум

Сразу к делу!
версия Open Server 4.7.6
Прочитал мануал от корки до корки к текущей версии, перечитал все темы на данном форуме касающиеся моей проблемы. Ответа нет, тем масса, ответ всегда один -> мануал.

Так же прошу заметить, глубоких познаний в конфигурации сервера у меня нет, опираюсь на мануал «Open Server 4.7.6» и знания полученные при работе с «Denver(ом)»

Описание задачи:
Необходимо настроить доступ в локальной сети к домену(сайту), назовем его «local.mysite.ru»

Решение задачи:
идем в мануал: Работа с программой -> Внешний доступ
находим там строку:

далее нажимаем кнопку «Сохранить», «Open Server» просит перезапустить сервер, нажимаем «Ок».

Проблема 1
Сервер не запускается, идем в логи и видим:

Логично понять куда идти дальше, идем в мануал:
Другие материалы -> Решение проблем
Перебираем все возможные варианты решения проблемы, их 10, но не один из вариантов не подходит.
Идем за ответом на форум, перебрав кучу страниц находим
решение «Проблемы 1» :
Нужно папку «localhost» находящуюся в «D:\OpenServer_4.7.6\domains\localhost», переименовать например в «mylocalhost». Далее делаем «рестарт сервера», сервер запущен!
Прошу добавить данный аспект в мануал
—————————————————————————————

Далее необходимо как-то достукиваться до нашего домена «local.mysite.ru» с других устройств в локальной сети.

идем в мануал:
Работа с программой -> Внешний доступ

находим там строку:

Проблема 2
CMS не может подключиться к базе MySQL, эта проблема наблюдается после того как прописать в настройках сервера локальный IP адрес компьютера где стоит «Open Server 4.7.6»
Решение?

Проблема 3
Как я могу достучаться до сайта «local.mysite.ru» находящегося в локальной сети, например с планшета под управлением «Android» или «iOS»?
Работая с «Denver(ом)», достаточно было на любом устройстве, находящемся в локальной сети, ввести «http://192.168.1.33/local.mysite.ru». (это как рабочий пример).
Решение?

P. S. Пишу максимально развернуто, для общего понимания моих действий.

Проблема 1

Это, простите, ахтунг! Такое в мануал записывать? Ууууу нет. Вы увидели в логах, что домен localhost совместим только с ip 127.0.0.1 и после этого вы перечитывали мануал и насиловали форум. и. и не знали что делать.
Не понимаю. как можно не догадаться переименовать домен. Всякое бывает, может вы устали, тяжелый день, сразу не сообразили и т.д.

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

Это естественно, что открывается эта ошибка. Руководство пользователя до конца прочитать видимо не смогли. Я про тот же раздел о внешнем доступе. Почитайте. Может тогда узнаете, как сделать чтобы сайт открывался по IP.

Проблема 2

Там скорее всего у вас в настройках CMS прописан ip 127.0.0.1 в качестве адреса mysql сервера, вот оно и не может подключиться, ведь сервер на другом адресе запускается. Измените адрес как написано в руководстве.

Проблема 3
Тут два варианта. Либо нужно иметь root доступ на андроиде и обычным образом отредактировать HOSTS файл, либо нужно согласно руководства настроить доступ по ip, но в этом случае вы уже сможете открывать только один единственный сайт, который укажите при создании алиаса. Так что рекомендую первый способ.

Денвер в локальной сети. Локальный сайт на телефоне

Web-программирование в наше время доступно далеко не только узким специалистам в их профессиональной деятельности. С этой сферой IT-индустрии часто сталкиваются и системные администраторы, и даже рядовые пользователи компьютеров, интересующиеся развитием интернет-технологий.
В статье Ошибка #1273 — Unknown collation: utf8mb4. Обновляем MySQL в Denwer мы говорили о переносе базы данных сайта с одного хостинга на другой, а также о переносе сайта на локальный компьютер. Сегодня мы поговорим о том, как открыть сайт, развёрнутый на компьютере, с другого компьютера и с телефонов в локальной сети.

Содержание статьи:

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

Перед всеми настройками, приведём несколько примеров, когда доступ к сайту из локальной сети может быть реально полезен:

• сайт создан для корпоративных целей . То есть сайт служит исключительно для работы внутри офиса или здания организации/учреждения. В этом случае тратить деньги, пусть и не самые большие, на покупку доменного имени и хостинга не всегда рационально;
• требуется отладка сайта в различных версиях операционных систем , будь то разные версии Windows, MacOS, Linux или другие, более экзотические ОС. Да, для тестирования сайта на других ОС достаточно воспользоваться виртуальной машиной, но это в том случае, если сайт уже загружен на хостинг, а вот на этапе подготовки и внесения значительных изменений в структуру и дизайн ресурса способ с доступом к сайту в локальной сети очень пригодится;
• отладка сайта на мобильных устройствах . Некоторые шаблоны современных CMS могут вести себя достаточно непредсказуемо при открытии с мобильных аппаратов. Сегодня этим пренебрегать не стоит, так как поисковые системы всё лояльнее относится к оптимизированным под смартфоны ресурсам. Конечно, популярные браузеры имеют опцию, имитирующую отображение страницы на мобильном девайсе, но если вы проверите, то убедитесь, что работа некоторых меню сайта и отображения некоторых элементов в десктопном браузере всё равно будет отличаться от таковых на реальном мобильном гаджете.

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

Первые два этапа подготовки проводятся непосредственно на компьютере, где расположен сайт, то есть там, где установлен денвер. Это наш локальный сервер или, другими словами, хостинг , то есть хранилище, на котором расположены все файлы ресурса.

Для начала необходимо обеспечить доступность локального сервера в сети. Современные версии Денвера сами прописывают исключения в стандартный межсетевой экран операционной системы при установке.

Но в случае, когда основной компьютер оказывается недоступен из локальной сети, необходимо добавить входящие/исходящие подключения в исключения Брандмауэра.
Для начала добавляем порт доступа в исключения используемого вами Брандмауэра или Фаервола. По умолчанию денвером используется 80 порт .

Если после проделанных настроек компьютер всё равно будет не доступен с внешних устройств, то потребуется добавить ip-адреса внешних компьютеров и мобильных устройств локальной сети в исключения сетевого экрана.
О том, как узнать ip-адрес компьютера в локальной сети подробно можно почитать в статье Определение ip адреса и mac адреса компьютера в сети. Это всё, что нам нужно сделать на данном этапе.

Открытие сайта из Denwer по ip-адресу в локальной сети

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

Есть два способа открыть по ip-адресу компьютера нужный сайт .

Первый способ — это создать в папке home денвера каталог, именем которого сделать ip-адрес основного компьютера, например, 192.168.0.21 и уже в этом каталоге расположить папку www с файлами сайта. То есть путь до каталога, содержащего сайт будет следующим:

где X — это буква виртуального диска, созданного при установке Denwer;
192.168.0.21 — ip-адрес в локальной сети компьютера, на котором установлен Denwer.

Этот способ простой, но его минус заключается в том, что он работает на этапе создания локального сайта . Если таковой у вас уже развёрнут, то этот вариант не подходит.
Кроме того, при подобной настройке придётся открывать сайт исключительно по ip-адресу , а не по доменному имени.

Второй способ открытия сайта по ip-адресу в локальной сети — использование файла .htaccess

Подобный файл может быть уже расположен в папке www или public_html , нам же надо создать этот файл на одном уровне с данными папками ( www или public_html ), то есть в каталоге с названием доменного имени сайта. Для сайта miradmin.ru, предположим, путь до файла .htaccess будет следующим:

Содержимое файла будет таким (можно использовать и прочие настройки, но их обсуждение выходит за рамки данной публикации):

где 192.168.0.21 — ip-адрес в локальной сети компьютера, на котором установлен Denwer.
Если вам по каким-то причинам не удаётся создать подобный файл, вы можете скачать файл .htaccess из прикреплённого к статье архива: .htaccess

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

Открытие сайта из Denwer в локальной сети по домену

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

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

Итак, если на клиентском компьютере установлена операционная система Windows , то нам нужно открыть для редактирования в любом текстовом редакторе (Блокнот, Notepad++ и так далее) файл, расположенный по пути

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

где 192.168.0.21 — ip-адрес в локальной сети компьютера, на котором установлен Denwer;
miradmin.ru — адрес, при переходе по которому пользователь в локальной сети должен получать наш сайт.

Если вам не удаётся сохранить внесённые изменения в файл hosts , то можно скопировать файл в любую пользовательскую папку ( Рабочий стол , Мои документы и так далее), отредактировать файл, сохранить изменения, а уже затем поместить файл hosts обратно в каталог etc , откуда файл и был скопирован.

Если же доступ в локальной сети необходимо обеспечить смартфону/планшету на базе Android , то аналогичную запись, приведённую выше, нужно добавить в файл hosts, который находится по следующему пути:

О том, как это сделать, подробно описано в статье Убираем рекламу на Android. Файл hosts
Если текстовым редактором изменить файл hosts на Андроид не удалось , то можно воспользоваться специальной утилитой, которая называется Hosts Editor, и предназначена конкретной для этой цели.

Пути расположения файла hosts для некоторых других операционных систем (взято из приведённой выше публикации):

В UNIX-подобных операционных системах типа Linux файл расположен в каталоге:

В последних версиях Mac OS X и iOS от Apple путь будет следующим:

Что надо знать при работе с Denwer в локальной сети

Настройки проведены, наш сайт доступен в локальной сети по доменному имени. Рассмотрим некоторые моменты, которые необходимо учитывать при работе с Денвером в локальной сети:

• При корректной настройке сети локальный сайт будет открываться в ней независимо от того, каким образом произведено подключение устройства : по проводному каналу Ethernet или по беспроводному Wi-Fi. Это касается как главного компьютера, на котором сайт расположен, так и клиентских, подключаемых машин.
• Если для доступа к сайту по доменному имени были внесены изменения в hosts файл, то после этого аналог сайта в интернете будет недоступен (если таковой существует на удалённом хостинге с аналогичным доменным именем). Для подключения к сайту, находящемуся на удалённом сервере через интернет потребуется либо удалить добавленную ранее строчку из файла hosts с доменом и ip-адресом основного компьютера, либо закомментировать её , просто поставив вначале строки символ решётки:
• Если после добавления в файл hosts строк с доменом и ip в браузере всё равно отображается версия из интернета , откройте сайт в приватной вкладке (для некоторых браузеров — в режиме Инкогнито ). Также на компьютере можно провести обновление страницы нажатием сочетания клавиш Ctrl + F5, в этом случае вся страница заново скачается из сети , а не подгрузится из кэша браузера.
• Если после всех настроек и добавления исключений в брандмауэр сайт всё ещё недоступен в локальной сети , нужно предоставить общий доступ к папке сайта в Денвер. В Windows это делается нажатием правой кнопки мыши по папке и переходом по пути Свойства — Доступ — Общий доступ и Расширенная настройка .
  
• И последнее, о чём хотелось бы сказать — это безопасность . Сразу отметим, что при корректной настройке и работе системы никаких проблем с безопасностью у вас не возникнет. Однако, следует понимать, что, давая доступ к сайт из сети, мы подвергаем его опасности подключения извне. При наличии бреши в системе безопасности компьютера злоумышленники могут даже получить возможность работы с данными за пределами каталогов Denwer.

На этом всё, мы рассмотрели, как открыть сайт из Денвер на компьютере и на смартфоне в локальной сети .

Как сделать локальный Django-сайт доступным в Интернете / Туннели ngrok

Допустим вы пишите какое-то Django-приложение. Как обычно разработка идёт локально на вашем компьютере. По умолчанию все Django-проекты доступны по адресу http://localhost:8000 или http://127.0.0.1:8000 что одно и тоже. Эта адреса твоего локального компьютера. Соответственно никто другой в Интернете, перейдя по одному из этих адресов, ваш сайт не увидит.

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

Что делать, как показать Django-проект, которые запускается на локальном сервере, недоступном в Интернете? Есть несколько вариантов:

cделать скриншоты каждой страницы сайта;

показать экран в ZOOM или Discord;

дать доступ к своему рабочему столу через Team Viewer;

настроить HTTP-туннель с помощью утилиты ngrok.

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

что такое туннелирование и HTTP-туннель;

зачем нужна и как работает утилита ngrok;

как настроить HTTP-туннель с помощью ngrok, чтобы сделать доступным в Интернете ваш локальный сайт на Django или любом другом веб-фреймворке.

Прежде чем начнём, давайте знакомится. Меня зовут Макс. Я преподаватель в классическом университете и один из авторов YouTube-каналы PyLounge. Теперь же приступим к делу!

Для начала разберёмся с понятийным аппаратом, чтобы говорить на одном языке.

Дисклеймер: Я намеренно упрощаю некоторые понятия и концепции, т.к. данный материал нацелен преимущественно на новичков. Может быть подобного рода допущения грешны, но что вы мне сделаете, я в другом городе?

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

Комбинация туннелирования и шифрования позволяет реализовать закрытые виртуальные частные сети (VPN).

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

HTTP-туннелирование используется для создания сетевого соединения между двумя компьютерами в условиях ограниченного сетевого подключения (брандмауэр, NAT, ACL). Туннель создается посредником, который называется прокси-сервером, который обычно находится в DMZ.

Ngrok – это утилита для создания туннелей. Она позволяет сделать локальный порт приложения доступным из Интернета без настройки NAT, роутера, DDNS и других протоколов.

Ngrok создает туннель между вашим компьютером и удалённым сервером и предоставляет доступ к нему с уникального домена (адреса), который сама и генерирует. Достаточно только зарегистрироваться на сайте сервиса, установить программу на компьютер и запустить команду создания туннеля. Этим мы и займемся.

Пусть у нас изначально есть некоторый Django-проект. Он работает и запушен локально, доступен по адресу http://localhost:8000 .

Переходим на официальный сайт Ngrok — https://ngrok.com/

Регистрируемся на сайте и подтверждаем почту. Это бесплатно.

Скачиваем архив с ngrok для вашей версии операционной системы. В моём случае это Windows 10 64-бит.

Распаковываем архив в любое удобное место.

Запустим файл ngrok.exe.

В открывшемся окне выполним следующую команду для автоматической конфигурации файла настроек ngrok.yml:

ngrok config add-authtok ВАШ_ТОКЕН

Токен можно посмотреть на сайте ngrok на вкладке Your Authtoken либо в разделе Setup & Installation в пункте 2. Connect your account.

Setup & Installation Your Authtoken

Это нужно, чтобы получить доступ ко всем функциям ngrok.

Теперь для создания HTTP-туннеля выполним команду:

ngrok http http://localhost:8000 или ngrok http 8000

Открывается окно сеанса туннелирования. В этом окне в разделе Forwarding сгенерировалась ссылка. По ней наше Django-приложение, запушенное на порту 8000, и будет доступно в Интернете.

Окно сеанса

Теперь вы можете просто скопировать эту ссылку и отправлять её другу, заказчику, другому разработчику и т.д. Эта ссылка будет работать пока вы не завершите сеанс Ngrok или пока не закончится время сеанса (аренды ссылки). После чего сеанс придётся перезагрузить, при этом сгенерируется новая ссылка.

Однако при попытке перейти на сайт Django выдаст ошибку DisallowedHost

Чтобы её исправить необходимо открыть файл settings.py нашего Django-приложения и в списке ALLOWED_HOSTS указываем ‘*’

Django проверяет заголовок хоста HTTP-запроса на наличие URL/ip-адреса, который находится в пределах разрешенных хостов ALLOWED_HOSTS . Указывая * мы разрешаем доступ с любого хоста.

После сохранения изменений сайт наконец-то будет доступен по сгенерированной ссылке!

Базовый синтаксис утилиты Ngrok выглядит следующим образом:

ngrok команда опции

completion — сгенерировать скрипт автодополнения для bash или zsh;

config add-authtoken — сохранить токен аутентификации в конфиг файл;

config check — проверить конфигурационный файл на ошибки;

config edit — редактировать конфигурационный файл;

http — создание HTTP туннеля;

tcp — создание TCP туннеля;

start — запуск туннелей, настроенных в конфигурационном файле;

service install — установить конфигурационные файлы сервисов в систему;

service start — запустить сервис;

service stop — остановить сервис;

update — обновить утилиту до последней версии;

version — показать версию утилиты.

Если вы хотите посмотреть перечень всех команд, можно запустить команду ngrok help .

У каждой команды есть свои параметры. Так чтобы сделать доступным локальный HTTP порт нашего приложения извне необходимо использовать команду http. Затем указать порт в качестве параметра, например для нашего случая это порт Django проекта 8000:

ngrok http 8000

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

ngrok http —basic-auth=»пользователь:пароль» 8000

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

На последок упомяну, что, когда Ngrok-клиент запущен, можно открыть веб-интерфейс, который доступен по адресу http://127.0.0.1:4040 . В нём доступна история запросов, в которой можно увидеть какие данные пришли и что было отправлено в ответ, переотправить или модифицировать запрос и многое другое.

Вот таким нехитром способом можно использовать Ngrok для создания туннелей и проброса локального порта в Интернет.

В бесплатном тарифе Ngrok может использоваться только для не длительного проброса в районе, кажется, 1 часа (тут могу ошибиться). Потом надо перезапускать сессию. Однако для локальной разработки, чтобы показать, как выглядит локальный сайт вполне подойдёт.

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