Как зайти на локальный сайт
Перейти к содержимому

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

  • автор:

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

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

Требования: Сначала вам необходимо изучить как работает интернет, а также что такое веб-сервер (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.

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

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

И вот здесь может появиться вопрос «как зайти на локальный сайт с телефона?». Ответов может быть несколько, если сильно углубляться в тему. Но мы рассмотрим одно решение, и весьма простое. Только придется кое-что установить на ваш компьютер.

Открываем локальный сайт на телефоне

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

Первый шаг. Скачиваем текущую версию платформы Node.js с сайта разработчиков. Установите её себе на компьютер в штатном режиме.

Второй шаг. Запустите командную строку от имени администратора и вставьте в нее такую строку:

npm install -g browser-sync

Нажмите «Enter» и дождитесь окончания установки. Этим действием мы устанавливаем компонент browser-sync.

Третий шаг. Если локальный сервер не запущен, к примеру, OpenServer, или какой-то другой, запускайте его. Далее переходим в папку с названием сайта. Допустим, папка будет называться, mysite.net. Находясь в этой папке, снова вызовите командную строку, и вставьте в нее следующею строку:

browser-sync start —proxy mysite.net

Обратите внимание, что ваша папка с сайтом может носить другое название. Следовательно, вы меняете его на свое и нажмите «Enter». Вам выдаст похожий результат:

C:\Windows\system32>browser-sync start —proxy mysite.net
[Browsersync] Proxying: http://mysite.net
[Browsersync] Access URLs:
———————————-
Local: http://localhost:3000
External: http://192.168.1.3:3000
———————————-
UI: http://localhost:3001
UI External: http://localhost:3001
———————————-

Теперь, чтобы посмотреть локальный сайт на телефоне, вбейте в адресную строку браузера результат External, а именно этот адрес — http://192.168.1.3:3000. Сайт будет доступен на телефоне, пока открыта командная строка с результатом.

Читайте также:
  • Ошибка загрузки блока: Ответ не является допустимым ответом JSON
  • Менеджер шрифтов для Windows 10 – FontExpert
  • Установка счётчика Яндекс.Метрика на WordPress
  • Горячие клавиши для всех пользователей WordPress
  • Установка WordPress на локальный сервер Open Server
  • Самый лучший менеджер шрифтов
  • Как сделать скриншот с прокруткой страницы
  • Оптимизация изображений – программа Riot
  • Программы для создания CSS меню
  • Проверка текста на наличие ошибок. Онлайн-сервисы

2 комментария
Leopold :

Блин, чувак! Это реально круто! Работает! Облазил +100500 сайтов с вопросом «подключиться с мобильного телефона OpenServer». Сколько же там экспертов — в кавычках. Очень умных — в кавычках. Особенно поражает отношение к задающим вопросы. Только ни одна инструкция от экспертов не помогла. А у тебя кратко и по сути! Супер!

Как запустить сайт на компьютере без хостинга?

Рассмотрим часто возникающий вопрос: Как запустить сайт на компьютере без хостинга? Нам понадобятся всего две вещи:

1 — скачанный с хостинга сайт (средствами файл-менеджера или Filezilla),

2Openserver для запуска его локально на компьютере.

FileZilla — программа для передачи файлов сайта через FTP на сервер.

Openserver — программа для запуска сайтов локально на компьютере.

Установка FileZilla и подключение к серверу

Скачиваем установщик для Windows. Устанавливаем, соглашаясь с тем, что нам предлагается во время установки. Далее открываем программу и переходим в меню «Менеджер сайтов».

FileZilla - меню менеджер сайтов

Данные логин, ftp и пароль вы должны знать от хостинга. В различных хостингах меню находится в разных местах интерфейса.

FileZilla - установка соединения с FTP

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

Теперь вы свободно можете скачивать/закачивать файлы на сервер и на компьютер.

Запуск сайта БЕЗ базы данных MySQL (лендинги, статические сайты)

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

Как открыть статический сайт на компьютере

Создаем архив сайта на хостинге

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

Создаем архив на хостинге

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

Открываем phpMyAdmin

Экспортируем базу данных:

Экспортируем базу данных

Альтернативный метод, это сделать бэкап сайта и скачать его. Любой из этих хостингов, поможет это сделать бесплатно.

Скачиваем файлы сайта на компьютер

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

Скачиваем файлы сайта на компьютер

Теперь разархивируем файлы в папку и у нас на компьютере будет полная версия нашего сайта + база данных. Лежать пусть будет в этой же папке.

Устанавливаем Open server на Windows

Для запуска нам достаточно версии Open Server Basic. Скачивание программы займет какое-то время. Или можете отправить донат в 60 рублей и скачать программу быстро. Программа является бесплатной, поэтому нет ничего зазорного в том, чтобы поддержать разработчиков.

Запускаем установку. Выбираем диск для установки программы.

Установка Open server

После установки мы идем в папку, находим .exe файл. Запускаем его, после чего увидим красный флажок справа-внизу панели Windows и загрузка Microsoft VC ++. Придется подождать какое-то время, пока система загрузит компоненты. Потом следует перезагрузить компьютер.

Первый запуск Open server

Запускаем Openserver и сайт на нем

Нажимаем «Запустить» (зеленый флажок).

Запуск Open server

Программа начинает свою работу. Теперь мы можем настроить (пункт «Настройки»), все, что нам необходимо в программе. В случае, если вы впервые смотрите на настройку веб-сервера, советуем вам выбирать все то, что было у вас на хостинге. Это либо сервер Apache, либо Nginx.

HTTP: Apache-PHP+Nignx — последней версии, PHP: 7.1+ и MySQL/MariaDB: MySQL 5.7+. Выше шанс, что сайт запустится без проблем.

Настройка Open server

Для начала работы нам нужен сайт в папке «Openserver/domains«.

  • Создаем здесь сайт (папку), допустим test.local.
  • Копируем туда все файлы сайта, скачанные и разархивированные ранее.

ПЕРЕЗАПУСКАЕМ СЕРВЕР! (желтый флажок)

Подключаем Базу Данных

Открываем опцию «Дополнительно — PhpMyAdmin»:

Открываем PhpMyAdmin в Open server

Вводим логин и пароль: root и root, соответственно. Если вы не меняли логина пароля для сервера. Это не нужно, если вы работаете исключительно у себя на локальном компьютере.

Создаем базу данных. В моем случае «mysql«. Импортируем базу данных сюда, вкладка «Импорт» в меню PhpMyAdmin.

Импорт БД Open server

Все. Мы создали базу.

Успешный импорт БД Open server

Теперь вам следует изменить все пути до конфиг файлов (в моем случае это: C:/Openserver/domains/test.local) и настройки подключения базы данных: имя базы, логин, пароль. Просто открываем конфиг файл редактором и меняем логин, пароль и название базы на: root, root, mysql (базу можете назвать, как хотите).

Где искать конфиг файлы для разных CMS?

Конфиг файла WordPress лежит в корне сайта: /wp-config.php. С WP есть особенность с путями до страниц и комментариев. Перенос WordPress и смена имени домена.

Конфиг файлы для MODX revo лежат тут: корень сайта /config.core.php, /manager/config.core.php, /connectors/config.core.php и главный с доступом в базу: /core/config/config.inc.php.

Файл для настройки Joomla в корне сайта: /configuration.php.

Как видите, сколько CMS, столько путей до конфиг-файлов.

Запускаем сайт локально на компьютере

Теперь наш сайт легко запускается по ссылке test.local.

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

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

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

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

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

17 дек 2020 в 16:23

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

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

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