Установка и настройка локального веб-сервера XAMPP

xampp

Всем привет! Я снова увлекся веб-разработкой и сегодня хочу с Вами поделиться знаниями по установке и настройке локального веб-сервера XAMPP. С помощью локального веб-сервера вы сможете разработать на своем ПК рабочий сайт, протестировать его, внести какие либо изменения, а потом перенести уже рабочий сайт на хостинг.

Существует множество различных, локальных веб-серверов, но я выбрал XAMPP потому, что он является абсолютно бесплатным с открытым исходным кодом локальным веб-сервером, прост в установке и настройке, доступен для Windows, Linux и MacOS, занимает минимальный объем на жестком диске и содержит актуальную версию скриптового языка php 7.3. Надеюсь я Вас убедил, что XAMPP является хорошим локальным веб-сервером, поэтому мы будем переходить к процессу его установки.

Установка XAMPP

Первым делом нам необходимо зайти на официальный сайт XAMPP https://www.apachefriends.org/ru/index.html и скачать дистрибутив под Вашу операционную систему, я буду проделываться все операции на ОС Windows 10.

Скачиваем XAMPP для ОС WIndows
Загружаем XAMPP для WIndows
  • По окончанию загрузки запускаем установочный файл xampp-windows-installer и перед нами появится окно с предупреждением в котором необходимо нажать на кнопку Ок.
Нажимаем Ок в окне с уведомлением от XAMPP
В предупреждении от XAMPP нажимаем на кнопку Ок
  • В следующем окне нажимаем на кнопку Next
Нажимаем на кнопку Next в окно с приветствием от XAMPP
В окне приветствия от XAMPP нажимаем на кнопку Next
  • Далее выбираем компоненты как на скриншоте и нажимаем на кнопку Next. Если появится окно от Брандмауера, то предоставляем разрешение нажав на кнопку разрешить доступ.
Отмечаем установочные компоненты как на скриншоте
Отмечаем необходимые компоненты
  • В следующем окне оставляем папку установки программы по умолчанию т.е в корне диска С: и нажимаем Next
Выбираем папку для установки XAMPP
Оставляем папку для установки по умолчанию и нажимаем на кнопку Next
  • Далее снимаем галочку на чекбоксе Learn more about Bitnami for XAMPP и нажимаем кнопку Next
  •  Ожидаем завершение установки, в конце установки нажимаем на Finish
Дожидаемся завершения установки и нажимаем на кнопку Finish
Ждем пока завершится установка, а в конце нажимаем на кнопку Finish
  • Выбираем английский язык так, как русского языка нет и нажимаем на кнопку Save.
Выбираем английский язык и нажимаем на кнопку Save
Выбираем английский язык

Установка завершена, но чтобы не потерять панель управления XAMPP, вынесем ярлык на рабочий стол, открываем C:\xampp и ищем файл xampp-control.exe нажимаем на нем правой кнопкой мыши выбираем Отправить->Рабочий стол(создать ярлык).

Добавление виртуального хоста в XAMPP

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

  • Находим файл hosts расположенный по адресу C:\Windows\System32\drivers\etc, перетягиваем его на Рабочий стол и открываем Блокнотом или Sublime Text3 и в самую нижнюю строку добавляем 127.0.0.1 mysite.ru, далее нажимаем Файл-> Сохранить. Теперь перетаскиваем назад файл hosts в папку C:\Windows\System32\drivers\etc.
Редактируем файл hosts
Редактируем файл hosts
  • Заходим в папку C:\xampp\htdocs. и здесь создаем новую папку с именем mysite.ru, а внутри папки создаем файл index.html
  • Теперь заходим в папку C:\xampp\apache\conf\extra и открываем файл httpd-vhosts.conf любым текстовым редактором. В данном файле в самом низу необходимо прописать наш виртуальный хост.
    <VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "C:/xampp/htdocs/mysite.ru"
    ServerName mysite.ru
    ServerAlias www.mysite.ru
    </VirtualHost>
    
    
  • Далее открываем панель управления XAMPP и на модуле Apache и MySQL нажимаем Start, дожидаемся когда надпись станет зеленого цвета.
  • Открываем браузер, вводим в адресную строку mysite.ru и нажимаем Enter, перед нами откроется веб странице которая расположена по адресу C:\xampp\htdocs\mysite.ru\index.html

Готово! Мы создали локальный виртуальный хост musite.ru с которым мы можем работать как угодно. Теперь все зависит от вашего вкуса и знания различных технологий.

Как видим XAMPP действительно легок в установке и просто в использовании, надеюсь статья была полезна и Вы получили достаточно новых знаний для начала первых шагов в разработке своего собственного блога или сайта. Спасибо за внимание, жду Ваши вопросы и пожелания в комментариях, не забывайте оценивать статью с помощью нашего «звездного рейтинга», а также делиться записью с друзьями в социальных сетях. Еще хотелось бы услышать обратную связь о том, насколько Вам интересны статьи такого содержания? Продолжить ли серию статей по развертыванию различных CMS на локальный веб-сервер? Стоит ли дополнять статью видео уроком?

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(2 голоса, в среднем: 5 из 5)

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

  • Митя

    10.12.2022

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

    Ответить
    • admin

      12.12.2022

      Добрый день! Конечно можно, вам нужно отредактировать html страницу, все зависит от того как вы собираетесь делать сайт. Используете какой-то движок? Или это самописные страницы?

      Ответить

Добавить комментарий для Митя Отменить ответ