Актуальный способ установки и настройки окружения Windows WSL для веб-разработки

Это актуальная инструкция по установке и настройке окружения Windows WSL (Подсистемы Windows для Linux), Node.js и других полезных инструментов для веб-разработки в родной среде Unix shell.

Смотреть урок на YouTube

Предварительная установка

1. Активируем возможность использования подсистемы. Для этого откроем панель управления - Win+R, выполняем команду control, переходим в раздел "Программы и компоненты", слева кликаем "Включение или отключение компонентов Windows", находим пункт "Подсистема Windows для Linux" и активируем чекбокс, нажимаем OK. Компьютер будет перезагружен.

2. Скачиваем и устанавливаем WSL ..x64.msi

3. Выбираем WSL 1 в качестве версии по умолчанию. Выполняем в PowerShell:

wsl --set-default-version 1

Внимание! WSL 2 в настоящее время работает медленно на большинстве систем. Рекомендую использовать именно WSL 1.

4. Устанавливаем неномерной дистрибутив Ubuntu из магазина Windows. Задаем имя пользователя и пароль.

Если доступа к магазину Windows нет, можно установить командой:
wsl --install Ubuntu

Установка окружения

Сразу после создания пользователя можно установить окружение одной командой:

sudo apt update; sudo apt -y install ruby ruby-dev gcc make g++ curl p7zip; curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -; sudo apt -y install nodejs; sudo npm i -g gulp rimraf npm-check-updates browser-sync esbuild; npm config set package-lock false; sudo gem i bundler jekyll jekyll-paginate-v2

Данной командой мы установим Node.js, npm, gulp, rimraf, npm-check-updates, jekyll, ruby и другие вспомогательные инструменты.

Обратите внимание, если вам не требуется jekyll или другие инструменты, вы можете не включать их в составную команду или наоборот, добавить необходимые через пробел в нужной секции. В секции sudo apt -y install можно добавить программы Linux к установке, в секции sudo npm i -g можно добавить необходимые npm-модули к установке, в секции sudo gem i можно добавить необходимые ruby-модули и т.д.

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

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

sudo nano ~/.bashrc

Управляя курсором на клавиатуре, перейдем в самый низ файла и добавим строку (для отображения только текущей папки в пути терминала):

PROMPT_DIRTRIM=1

Выходим из редактора Ctrl+X, вводим Y и нажимаем Enter, чтобы подтвердить сохранение файла. Перезапускаем WSL, можно работать.

WSL2 для Docker

Если вам нужен WSL2 для работы Docker, можно просто установить дополнительную номерную версию Ubuntu в WSL2. Узнать текущую стабильную номерную версию Ubuntu LTS вы можете выполнив в PowerShell:

wsl -l -o

Итак, на данный момент последняя LTS версия Ubuntu - 24.04. Выполняем в PowerShell:

wsl --install Ubuntu-24.04 --version 2

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

wsl -d Ubuntu-24.04

Если вы НЕ используете Docker Desktop для Windows, а работаете с Docker непосредственно в WSL2, можете просто установить Docker cli в самой системе Ubuntu-24.04, внутри WSL2:

grep -q "\[automount\]" /etc/wsl.conf || echo -e "\n[automount]\noptions=\"metadata,umask=0022\"" | sudo tee -a /etc/wsl.conf && sudo apt update && sudo apt install -y docker.io docker-compose && sudo usermod -aG docker $USER && logout

После установки окно WSL закроется. Его следует перезапустить.

Если вы используете Docker Desktop для Windows, в настройках устанавливаем следующие параметры:

И выполняем команду внутри Ubuntu-24.04:

grep -q "\[automount\]" /etc/wsl.conf || echo -e "\n[automount]\noptions=\"metadata,umask=0022\"" | sudo tee -a /etc/wsl.conf

Если в процессе работы с интерфейсом Docker вы получаете предупреждение "Docker Desktop - Ubuntu", просто нажмите в диалоговом окне "Restart the WSL integration", снимите галочку "Enable integration with my default WSL distro", нажмите кнопку "Apply & Restart" и предупреждение вас больше не побеспокоит.

Премиум уроки от WebDesign Master

Создание сайта от А до Я. Комплексный курс

Веб-дизайн с нейросетями для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Инструменты»

• Настройка Parcel для веб-разработки
• Tailwind CSS для начинающих. Подробный урок по подключению, настройке и использованию
• Настройка VS Code для веб-разработки
• Starter - Простой стартер для веб-разработки
• Урок по хостингу от А до Я. Сайты, базы, домены, SSL, SSH, sFTP
• Gulp - Актуальное и исчерпывающее руководство для самых маленьких