Используем подсистему Linux (WSL) в Windows 10 для разработки сайтов

Я постоянно использую терминал для работы с git и автоматизации сборки проектов (вёрстка/фронтенд: компиляция scss, обработка изображений, и т.д.). Раньше, для решения такого рода задач было не так много хороших и комфортных решений, либо использовать Ubuntu (либо другой linux дистрибутив) и наслаждаться комфортной работой, либо использовать Windows и устанавливать на него множество программ которые частично, или медленнее чем в linux решают задачи разработки, такие как GitBash для использования консольных команд bash для работы с git, OpenServer для создания локального сервера на вашей рабочей машине. Но в 2016г. Microsoft сделали большой шаг для разработчиков, представив подсистему Linux в Windows 10, но тогда, в 2016 году, её использование разочаровало: нельзя было запускать из bash-терминала программы Windows, подсистема не определяла изменение файла, если изменение было сделано из Windows. Сейчас эти проблемы решены.

Что такое подсистема Windows для Linux?

Microsoft Windows 10 имеет новую дополнительную функцию, которая называется «Подсистема Windows для Linux (WSL)». Данная функция была добавлена в систему, начиная с обновления «Anniversary Update» и доступна она только в 64-битных редакциях Windows 10.

WSL представляет собой подсистему для ОС Windows 10, через которую можно запускать Linux приложения. В этой статье рассмотрим, как на данной подсистеме можно настроить веб-сервер LAMP (Apache, MySQL, PHP) для локальной разработки веб-проектов.

Включение подсистемы Windows для Linux

Для включения компоненты «Подсистема Windows для Linux» в Windows 10 необходимо выполнить следующие действия:

Windows 10 - Включение подсистемы Windows для Linux

  1. Открыть «Панель управления» (Пуск -> Служебные -> Windows -> Панель управления).
  2. Открыть окно «Компоненты Windows» (пункт «Программы» в «Панели управления» -> Включение и отключение компонентов Windows).
  3. Установить галочку напротив опции «Подсистема Windows для Linux» и нажать «ОК»;
  4. Перезагрузить операционную систему.

Установка приложения «Ubuntu»

Для установки приложения «Ubuntu» заходим в магазин приложений Microsoft Store и в поле поиска вводим Ubuntu и устанавливаем данное приложение.

Windows 10 - Установка приложения Ubuntu

Создание директории для веб-проекта

Все веб-проекты предлагаю создавать в директории C:\projects. Для примера создадим в ней новый тестовый проект с названием директории test, конечный путь будет иметь следующий вид: C:\projects\test.

Установка программного обеспечения в ОС Ubuntu

Запускаем установленное приложение Ubuntu.

Откроется терминал, в котором при первом запуске нужно будет ввести новое UNIX имя пользователя (username) и пароль (password).

Обновим локальный индекс apt пакетов в операционной системе Ubuntu:

sudo apt update

Обновим установленное программное обеспечение:

sudo apt upgrade

Установим Apache:

sudo apt install apache2

Установим MySQL сервер:

sudo apt install mysql-server

Установим php и другие пакеты, необходимые для веб-разработки:

sudo apt install php libapache2-mod-php php-mysql php-xml php-curl

Включим модуль Mod rewrite в Apache:

sudo a2enmod rewrite

Также есть официальная инструкция с microsoft.com, если вдруг какой-то момент покажется непонятным или не будет работать.

Изменение метода аутентификации MySQL пользователя root

Для изменения метода аутентификации MySQL пользователя root выполним следующие действия:

  1. Запустим службу mysql.
sudo service mysql start
  1. Подключимся к серверу MySQL под стандартным пользователем root, который создаётся при установке MySQL на компьютер:
sudo mysql -uroot -p
  1. Нажмём на Enter, т.к. по умолчанию пользователь root, созданный при установке, не имеет пароля.

  2. Проверим метод аутентификации, который используется для пользователя root.

SELECT user, authentication_string, plugin, host FROM mysql.user WHERE user="root";

Если пользователь использует аутентификацию с помощью плагина auth_socket, то изменим эту настройку на использование пустого пароля. Для этого введём команду:

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '';

Выполним команду FLUSH PRIVILEGES, которая применит внесённые изменения:

FLUSH PRIVILEGES;

Создание базы данных

Создадим базу данных для веб-проекта test. Для этого введем в командной строке MySQL введём следующую команду:

CREATE DATABASE test;

Если в базу данных test необходимо загрузить дамп некоторой базы, находящийся, например, в файле backup.sql, то можно воспользоваться следующими инструкциями:

use test;
source backup.sql;

Для завершения работы с командной строкой MySQL выйдем из неё:

exit

Установка phpMyAdmin

Выполняем команду

sudo apt install phpmyadmin

Когда появится первое сообщение, нажмите пробел, Tab, а затем Enter, чтобы выбрать Apache. Выберите Да, когда вас попросят использовать dbconfig-common для настройки базы данных. Укажите пароль пользователя MySQL root Выберите пароль для самого приложения phpMyAdmin

Включить необходимые расширения PHP:

sudo phpenmod mcrypt
sudo php en mod mbstring

Перезапустить Apache:

sudo service apache2 restart

Теперь вы можете получить доступ к phpMyAdmin по следующему URL: http://localhost/phpmyadmin/ Вы можете войти в систему, используя имя пользователя root и пароль root, настроенные во время установки MySQL.

Настройка виртуальных хостов в Apache

В Ubuntu файлы настроек виртуальных хостов Apache располагаются в /etc/apache2/sites-available/*.conf. По умолчанию в Apache уже настроен один виртуальный хост. Его настройки лежат в файле 000-default.conf. Данный файл будем использовать в качестве примера.

Создадим копию файла 000-default.conf:

sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/test.conf

Отредактируем файл test.conf, для этого можно воспользоваться, например, редактором nano:

sudo nano /etc/apache2/sites-available/test.conf

В Ubuntu все локальные диски системы Windows находятся в директории /mnt, тоесть, если наш проект находится в директории C:\projects\test, то в Ubuntu к ней нужно обращаться так /mnt/c/projects/test.

Итоговое содержимое файла test.conf:

<VirtualHost *:80>
    ServerAdmin webmaster@test.loc
    ServerName test.loc
    ServerAlias www.test.loc
    DocumentRoot /mnt/c/projects/test/
    <Directory /mnt/c/projects/test/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>          
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Включим новый виртуальный хост с помощью утилиты a2ensite:

sudo a2ensite test.conf

Перенаправление test.loc на локальный веб-сервер

Для того чтобы доменное имя test.loc было связано с локальным веб-сервером необходимо открыть файл hosts, расположенный по адресу C:\Windows\System32\drivers\etc и добавить в него строчку:

127.0.0.1 test.loc

Команды для запуска и остановки веб-сервера

Для запуска Apache и MySQL необходимо ввести следующие команды:

sudo service apache2 start
sudo service mysql start

Для остановки веб-сервера:

sudo service apache2 stop
sudo service mysql stop

Упрощение добавления нового проекта

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

!! Не забудьте разкомментировать строки в скрипте для работы в Windows.

Разработка верстки сайта

Для разработки верстки сайта я пользуюсь npm с gulp и своим настроенным окружением для разработки фронтенд части сайта. Проект можете посмотреть здесь.

Замеченные баги в WSL

Работать с буфером обмена по умолчанию не комфортно (Ctrl + V, Shift + Insert не работают, приходится кликать (!!!) ПКМ по заголовку окна и выбирать Изменить → Вставить). Решается использованием терминала не самостоятельно, а внутри например Cmder или Terminus, я выбрал для себя Terminus.

После загрузки Windows иногда (было всего дважды) отказывается работать. Помогает перезагрузка (это же Windows).

Брандмауэр Windows по умолчанию не даёт зайти на запущенный внутри WSL сервер при запросе с другого устройства (запускаем сервер разработки на рабочем компе, открываем его страницы с телефона, находящегося в той же локальной сети). Как это лечить — не разобрался, приходится временно отключать брандмауэр.

Как заходить на сервер, запущенный в WSL, со сторонних устройств в одной локальной сети

Я пишу много html-страниц. В процессе работы у меня запущен локальный сервер, собирающий разметку, стили, javascript, спрайты и т.п. Бывает удобно запустить на основном компьютере сервер и зайти на него с помощью ноутбука, телефона, планшета (сервер доступен по IP, наподобие http://192.168.1.207:8080). Однако, встроенный в Windows 10 фаервол по умолчанию блокирует такие соединения.

Чтобы попасть на такой сервер, нужно добавить правило для брандмауэра:

  1. Найти с помощью поиска «Брандмауэр защитника Windows», открыть, нажать слева «Дополнительные параметры».
  2. В открывшемся окне Монитора брандмауэра выбрать (слева) «Правила для входящих…», нажать «Создать правило» (справа).
  3. Выбрать «Для порта», нажать «Далее».
  4. Выбрать «Определенные локальные порты», ввести номер порта (мой локальный сервер работает на порту 8080, его я и ввёл), нажать «Далее».
  5. Выбрать «Разрешить подключение», нажать «Далее», выбрать профили (я выбрал все), «Далее».
  6. Ввести какое-либо имя, нажать «Готово».

После этого получится зайти с любого устройства (в одной локальной сети) на запущенный в WSL на рабочем компьютере сервер.

Также можно использовать gulp + live-server и всё будет работать без дополнительных настроек.