Перейти к содержимому

Как зайти на локальный сайт

  • автор:

Как настроить локальный сервер для тестирования?

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

Требования: Сначала вам необходимо изучить как работает интернет, а также что такое веб-сервер (en-US) .
Цель: Вы научитесь как устанавливать локальный тестовый сервер.

Локальные и удалённые файлы

На протяжении всего обучения, вы будете открывать примеры непосредственно в браузере — двойным кликом по HTML файлу, перетаскиванием файла в окно браузера, или через меню File > Open. и указывая необходимый HTML файл. Существует множество способов как это сделать.

Если веб-адрес начинается с file:// в котором далее прописан путь к файлу на вашем локальном жёстком диске, значит используется локальный файл. В противоположность этому, если вы откроете на просмотр один из наших примеров, расположенных на GitHub (или пример расположенный на любом другом удалённом сервере), веб-адрес будет начинаться с http:// или https:// , что означает что файл был получен через HTTP.

Проблемы тестирования локальных файлов

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

  • Они содержат асинхронные запросы. Некоторые браузеры (включая Chrome) не будут запускать асинхронные запросы (см. Fetching data from the server), если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с Website security).
  • Они имеют серверный язык. Серверные языки (например, PHP или Python) требуют специального сервера для интерпретации кода и предоставления результатов.

Запуск простого локального HTTP сервера

Чтобы обойти проблему асинхронных запросов, нам нужно протестировать такие примеры, запустив их через локальный веб-сервер. Один из самых простых способов сделать это для наших целей — использовать модуль SimpleHTTPServer Python.

Для этого нужно:

  1. Установить Python. Если вы пользуетесь Linux или Mac OS X, всё уже готово в вашей системе. Если вы пользователь Windows, вы можете скачать установочный файл с домашней страницы Python:
    • Зайдите на python.org
    • В секции загрузок, выберите линк для Python «3.xxx».
    • Внизу страницы выберите Windows x86 executable installer и скачайте его.
    • После загрузки файла запустите его.
    • На первой странице инсталлятора выберите чекбокс «Add Python 3.xxx to PATH».
    • Нажмите Install, затем нажмите Close когда установка закончится.
  2. Откройте командную строку (Windows)/ (OS X/Linux). Для проверки установки Python введите следующую команду:

# include the directory name to enter it, for example cd Desktop # use two dots to jump up one directory level if you need to cd .. 
# If Python version returned above is 3.X python -m http.server # If Python version returned above is 2.X python -m SimpleHTTPServer 

Примечание: . Если у вас уже есть что-то на порту 8000, вы можете выбрать другой порт, запустив команду сервера, за которой следует альтернативный номер порта, например: python -m http.server 7800 (Python 3.x) или python -m SimpleHTTPServer 7800 (Python 2.x). Затем вы можете получить доступ к своему контенту на localhost: 7800 .

Запуск серверных языков локально

Модуль Python SimpleHTTPServer (python 2.0) http.server (python 3.0) полезен, но он не знает, как запускать код, написанный на таких языках, как Python, PHP или JavaScript. Чтобы справиться с этим, вам понадобится нечто большее — именно то, что вам нужно, зависит от языка сервера, который вы пытаетесь запустить. Вот несколько примеров:

  • Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав Django Web Framework (Python). Flask также является хорошей (чуть менее тяжёлой) альтернативой Django. Чтобы запустить это, ознакомьтесь с install Python/PIP, а затем установите Flask с помощью pip3 install flask . На этом этапе вы сможете запустить примеры Python Flask, используя, например, python3 python-example.py , затем перейдя на localhost: 5000 в свой браузер.
  • Чтобы запустить серверный код Node.js (JavaScript), вам нужно использовать Node.js или фреймворк, построенный поверх него. Express — хороший выбор — см. Express Web Framework (Node.js/JavaScript).
  • Чтобы запустить PHP-серверный код, вам понадобится настройка сервера, которая может интерпретировать PHP. Хорошими вариантами для локального тестирования PHP являются MAMP (Mac и Windows), AMPPS (Mac, Windows, Linux) и LAMP (Linux, Apache, MySQL и PHP / Python / Perl). Это полные пакеты, которые создают локальные настройки, позволяющие запускать базы данных Apache, PHP и MySQL.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Как просмотреть локальный сайт на телефоне?

Я сделал сайт и адаптировал его под все устройства, но он, как вы понимаете, только на компе. (и в гите) На хостинг заливать буду позже.
Вопрос: Как мне открыть свой сайт на телефоне (пощупать, понажимать, в общем, проверить его перед заливом на хост?) В интернетах толковой инфы не нарыл (хотя искал прилично). Пробовал вариант через ipconfig узнать айпи локальной сети, в итоге набрал на телефоне, а телефон ушёл в вечную загрузку. Отключал брандмауэр, делал сеть домашней, ничего не получается. Что же мне делать?

Отслеживать
81.1k 9 9 золотых знаков 78 78 серебряных знаков 135 135 бронзовых знаков
задан 17 дек 2020 в 15:09
дмитрий петрович дмитрий петрович
153 2 2 серебряных знака 7 7 бронзовых знаков

В конфигурационном файле вашего локального HTTP сервера нужно создать запись, так чтобы ваш сайт был доступен по локальноой сети по локальному IP адресу вашей серверной машины (обычно это 192.168.0.XXX). Ваш мобильный телефон должен быть в той-же локальной сети (например по WIFI).

17 дек 2020 в 16:23

browsersync.io Поставьте ее себе и открывайте на здоровье. Кроме того есть экстеншены для браузеров. Их тыщща и один вариант. Загуглите тему.)

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

Заур Магомедов

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

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

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

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

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

Читайте также: 7 советов по качественной верстке шаблона сайта

Что делать, если у вас нет выделенного 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 и через мобильный интернет проверить. Вот, что у меня получилось. Доступ к локальному сайту из интернетНа этом все. Надеюсь вам данная статья пригодится. Если возникнут вопросы, то задавайте в комментариях, постараемся решить ваши проблемы. Всем пока и встретимся в других постах.

Статья Делаем локальный сайт (на localhost) доступным для других компьютеров

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

  • внутри квартиры (всегда);
  • внутри локальной домашней сети (почти всегда);
  • для всех пользователей Интернета (не всегда).

Разница в вероятностях (всегда-иногда) заключается в вашем IP. Если он статический, то всё делается довольно легко. Как делать локальный сервер при динамическом IP в этой статье не описывается.

Внутри своей квартиры вы сами задаёте политику присвоения адресов — например, Wi-Fi роутер может раздавать устройствам произвольные, динамические IP адреса; и можно настроить роутер и устройства так, что всем им будут присвоены определённые статические адреса.

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

Локальные адреса, в основном, имеют такой вид (вместо нулей должны быть другие цифры):

172.16.0.0 192.168.0.0

Открываем файл C:ServerbinApache24confhttpd.conf и ищем там строчку

Listen 127.0.0.1:80

Нам нужно заменить IP адрес на свой, например, мой локальный IP адрес 192.168.43.90, следовательно, я пишу:

Listen 192.168.43.90:80

Как вариант, можно сделать вот так:

Listen *:80

Сохраняем файл и перезапускаем сервер. На самом деле — всё!

Пробуем доступ к серверу набрав в строке браузера свой IP (я набираю http://192.168.43.90/ ), как и следовало ожидать — доступа нет, но причина очевидна: файервол. Его нужно настроить должным образом, но для нашего тестирования я его просто отключаю.

28467

Теперь всё впорядке и ваш сайт доступен по адресу http://192.168.43.90/ с любого устройства, находящегося в вашей домашней или городской сети. На следующем скриншоте, я зашёл на локальный сервер с телефона:

28468

24 часа в сутки

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

Внутри локальной (домашней) сети вы можете придумать имя своему сайту и попросить ваших друзей и всех тех, кто будет заходить на него внести изменения в файл
C:WindowsSystem32Driversetchosts
Каждому из них нужно будет добавить туда строчку:
ваш_IP ваш_сайт
например
192.168.43.90 alexblog.local
После этого набирая в адресной строке браузера http://alexblog.local они будут попадать на ваш сайт.

Зачем все эти сложности?

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

Ссылка скрыта от гостей

Более того, открывая доступ к своему localhost нужно подумать о безопасности. В данной статье я этот вопрос не затрагиваю, но могу вас заверить, что Apache, запущенный от имени администратора (а именно так он у большинства на локахосте и запущен), через скрипты PHP (или уязвимости в них), может «путешествовать» по каталогам дисков. Т.е., по крайне мере теоретически, злоумышленник через уязвимости в вашем сайте может скачать файлы с вашего компьютера или удалить файлы, например, в директории Windows. Если заботиться о безопасности локального сервера является слишком сложным занятием для вас, то ответ очевиден — хостинг.

Ссылка скрыта от гостей

, которые бывают на хостингах и самая низкая цена!

Хотите узнать, как заполучить короткий и красивый адрес электронной почты (e-mail)? или как выбрать качественный хостинг? Всё это и многое другое на сайте codeby.net. Подписывайтесь на нашу e-mail рассылку (внизу страницы) или на ленту новостей и вы узнаете первым о новых статьях! Также вступайте в нашу официальную группу вконтакте — там вам очень рады!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Luxury Car Rental in Miami | Reserve a Premium Vehicle with RealCar