Общая нестабильность Windows вынуждают меня искать альтернативы для организации рабочего процесса. Пока я остановился на Ubuntu. Хочется описать свой опыт настройки этой ОС как среды для работы с фронтендом. Мой опыт работы с Ubuntu весьма скромен и, будь подобная статья под рукой, это сильно сэкономило бы мое время.

В общем случае, проект по вёрстке у меня представляет собой подпапку в D:/projects (GIT-репозиторий). Внутри — Grunt/Gulp/Webpack, при старте запускается локальный сервер и слежение за файлами (по сохранению файлов — перекомпиляция стилей (или что-то другое, в зависимости от того, какой файл сохранялся) и автообновление страницы в браузере).

Итак, основной ОС служит Windows 10, гостевой (работающей внутри виртуальной машины) — Ubuntu 14. Сама виртуальная машина — VirtualBox.

Задача

Хотелось, чтобы работа происходила внутри виртуальной машины с Ubuntu, но файлы проектов лежали в файловой системе основной ОС (Windows 10). При этом, нужно, чтобы к запущенному внутри гостевой ОС серверу для разработки был доступ из основной ОС (сервер внутри Ubuntu, но страницу можно открыть в браузере из Windows).

Результат

Получилось запустить работу в Ubuntu, но это потребовало некоторых изысканий (которые и описаны в данной статье) и есть следующие минусы:

  1. При сохранении файлов из Windows, запущенный в гостевой Ubuntu сервер не реагирует — не происходит перекомпиляция и обновление (логично, ибо изменение файла происходит в другой ОС)
  2. Если сравнить скорость старта сервера для проекта, лежащего только внутри гостевой ОС и такого же проекта, файлы которого лежат в основной ОС, но сам сервер запускается из гостевой, то в первом случае, процесс ощутимо быстрее.

Как подготовить Ubuntu для фронтенда

Установим необходимые инструменты нужных версий и настроим их. Рекомендую периодически делать «снимки системы» из главного окна VirtualBox — это позволит, в случае чего-то непредвиденного, «откатиться» к определенному состоянию виртуальной машины. В частности, снимок системы обязательно нужно сделать после установки и настройки предпочитаемого редактора кода.

Установка Ubuntu и дополнений гостевой ОС

Скачиваем образ установочного диска, создаем новую виртуальную машину с типом Linux и версией Ubuntu, подключаем образ к виртуальной машине и устанавливаем гостевую ОС. Установка проста, единственный нюанс: лучше ставить изначально английскую версию и только после установки менять язык, не соглашаясь на переименование папок пользователя — в этом случае папки не будут иметь кириллицы в названиях (без нее проще набирать адреса папок).

Дополнения для гостевой ОС ставятся просто: в окне вирт. машины: Устройства → Подключить образ диска Дополнений гостевой ОС...

Sublime Text

Скачиваем с официального сайта установочный файл, запускаем, устанавливаем. Ставим дополнения, настраиваем под себя.

Git

Если воспользоваться инструкцией, поставится весьма старая версия (на данный момент ставится 1.9, а актуальная — 2.6), поэтому воспользуемся этой статьей — откроем терминал и выполним поочередно три команды:

# Добавим PPA
sudo add-apt-repository ppa:git-core/ppa

# Обновим индекс
sudo apt-get update

# Установим git
sudo apt-get install git

После этого в терминале вводим git --version и видим актуальную версию.

Настройка Git для работы с Github

Для начала, зададим имя пользователя и электромыло (свои, мыло — идентичное таковому в аккаунте на Github), выполнив в терминале две команды:

git config --global user.name "NAME"
git config --global user.email "EMAIL"
Сгенерируем SSH-ключи по инструкции
ssh-keygen -t rsa -b 4096 -C "EMAIL"
# Generating public/private rsa key pair.

Enter file in which to save the key (/Users/you/.ssh/id_rsa): [просто нажмём ENTER]

Enter passphrase (empty for no passphrase): [введём ключевую фразу]
Enter same passphrase again: [введём ключевую фразу ещё раз]

# Your identification has been saved in /Users/USERNAME/.ssh/id_rsa.
# Your public key has been saved in /Users/USERNAME/.ssh/id_rsa.pub.
# The key fingerprint is:
# 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db EMAIL
Добавим ключи в ssh-agent
eval "$(ssh-agent -s)"
# Agent pid NUMBER

ssh-add ~/.ssh/id_rsa
Добавим ключи в аккаунт github-а
# Установим xclip
sudo apt-get install xclip

# Скопируем ключ в буфер обмена
xclip -sel clip < ~/.ssh/id_rsa.pub

И потом в аккаунте github-а: Settings → SSH → Add SSH key → Add key. Название произвольное, поле ключа — просто вставьте содержимое буфера. Это действие на github-е требует подтверждения паролем.

Проверим соединение
ssh -T git@github.com

# The authenticity of host 'github.com (207.97.227.239)' can't be established.
# RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
# Are you sure you want to continue connecting (yes/no)? [введём yes]

# Hi USERNAME! You've successfully authenticated, but GitHub does not
# provide shell access.

Git-lfs

Увы, поставить по инструкции пока не удалось, после корректной отработки первой команды, в ответ на sudo apt-get install git-lfs получаю E: Не удалось найти пакет git-lfs .

Node.js и npm

Ставим по инструкции, выполнив в терминале две команды:

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -

sudo apt-get install -y nodejs

Npm-пакеты без sudo

Хочется ставить и использовать npm-пакеты без прав суперпользователя (из-за нужды в таких правах у меня, по началу, не работала автоматизация). Для этого строго следуем этой инструкции (если проигнорировать предупреждение «WARNING: If your path is /usr, switch to option 2.», можно убить гостевую ОС).

Установка грант и галп (и ещё чего угодно) глобально

Поставьте необходимые Вам инструменты. В моем случае это свелось к выполнению двух команд:

npm install -g grunt-cli
npm install -g gulp

Общие папки

Чтобы гостевая ОС могла оперировать файлами основной, нужно задать общие папки. Это делается в настройках виртуальной машины с гостевой ОС, в разделе «Общие папки» можно выбрать папку, предназначенную в основной ОС для хранения всех проектов («автоподключение» включить, «только чтение» — выключить). Папка появится внутри гостевой ОС в /media/, но доступа к ней пока не будет. Для доступа:

sudo adduser USERNAME vboxsf

Доступ из основной ОС

Получим доступ к серверу, запущенному внутри гостевой ОС из основной ОС.

Остановим виртуальную машину, перейдем к ее настройкам, в разделе «Сеть», на вкладке «Адаптер 2» отметим флажок «Включить сетевой адаптер», выберем тип — «Сетевой мост». Вновь запустим виртуальную машину.

В терминале гостевой ОС:

ifconfig

eth0      Link encap:Ethernet  HWaddr 08:00:27:11:a5:6d  
          inet addr:10.0.2.15  Bcast:10.0.2.255  Mask:255.255.255.0
          inet6 addr: fe80::a00:27ff:fe11:a56d/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:24 errors:0 dropped:0 overruns:0 frame:0
          TX packets:39 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000 
          RX bytes:3104 (3.1 KB)  TX bytes:4588 (4.5 KB)

eth1      Link encap:Ethernet  HWaddr 08:00:27:85:5d:fc  
          inet addr:192.168.1.191  Bcast:192.168.1.255  Mask:255.255.255.0
          inet6 addr: fe80::a00:27ff:fe85:5dfc/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:13 errors:0 dropped:0 overruns:0 frame:0
          TX packets:28 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000 
          RX bytes:1841 (1.8 KB)  TX bytes:2835 (2.8 KB)

lo        Link encap:Локальная петля (Loopback)  
          inet addr:127.0.0.1  Mask:255.0.0.0
          inet6 addr: ::1/128 Scope:Host
          UP LOOPBACK RUNNING  MTU:65536  Metric:1
          RX packets:142 errors:0 dropped:0 overruns:0 frame:0
          TX packets:142 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:0 
          RX bytes:9051 (9.0 KB)  TX bytes:9051 (9.0 KB)

Здесь eth1 — только что включенный второй адаптер, нас интересует его addr , то есть в моем случае — 192.168.1.191 . Это тот IP, который нужно ввести в адресную строку браузера в основной ОС, чтобы открыть главную страницу с запущенного в гостевой ОС сервера.

Заключение

После описанных манипуляций у меня внутри Ubuntu налажен рабочий процесс, но я вынесу туда (пока) только один проект, имеющий проблемы с автоматизацией на Windows (с остановкой сервера не останавливаются все процессы node.js).

Photoshop

Ubuntu стоит у меня и второй ОС (на случай смерти Windows, чтобы не грузиться с флешки). В какой-то момент у меня получилось «завести» в ней Photoshop CS6, но его возможности, в сравнении с CC 2015 оставляют желать много лучшего, да и лицензия у меня есть только к CC 2015. Поэтому, полный переезд в Ubuntu я пока отложил.