Рабочее окружение для «ленивых» web-разработчиков (Vagrant + Scotchbox)

Всем привет. В данной заметке я опишу один из простейших вариантов, как можно по-быстрому поднять под виртуальной машиной полноценное рабочее окружение, готовое к работе и дальнейшему расширению.
Во главе угла стоят «Vagrant» (для управления виртуализацией) и «Scotchbox» (бокс для Vagrant — образ с ubuntu и предустановленным ПО, подготовленный ребятами из scotch.io).

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



Из коробки на борту «Scotchbox» имеется Apache, PHP, MySQL, NPM, Git, Grunt, Gulp, Bower, Yeoman, Ruby, Memcached, Composer и другой инструментарий web-разработчика, если чего-то будет не хватать, можно легко доустановить самому и после этого создать свой собственный образ.

По ссылке https://box.scotch.io можно ознакомиться с подробной инструкцией по установке и запуску виртуальной машины с рабочим окружением «Scotchbox», а также списком того, что будет установлено. На этом можно было бы и закончить — мол, смотрите инструкцию, но мы еще немного автоматизируем создание виртуальных хостов для apache (путем расширения конфигурации Vagrant) и я вкратце опишу, что там происходит.

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

Итак, последовательность действий:

1. Установите «Vagrant» и «Virtual Box», если они еще не установлены.
2. Склонируйте репозиторий:
   

   git clone https://github.com/WebDevArchive/webdev-env.git
   

   (или скачайте архив и разархивируйте его вручную, если вы на чистой машине без git)
3. Перейдите в папку «webdev-env», где лежит «Vagrantfile» и выполните команду:
   

   vagrant up
   

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

Дождавшись ее загрузки, пропишем в файле «hosts» (в windows) строку

192.168.33.33    webdev.local

и перейдем по локальному адресу http://webdev.local
Если все прошло, как предполагалось, то увидим страницу с текстом «webdev.local», загруженную из нашей виртуальной машины и можем сразу же приступить непосредственно к разработке.

Рассмотрим пример добавления своего хоста на примере «habrahabr.ru».

1. В папке «www» создаем папку «habrahabr.ru» и в ней файл «index.html» с любым содержимым.
2. В папке «www» создаем файл «habrahabr.ru.conf» c таким содержимым:
   

   <VirtualHost *:80>
     ServerAdmin webmaster@localhost
     ServerName habrahabr.ru
     ServerAlias www.habrahabr.ru
     DocumentRoot /var/www/habrahabr.ru
     ErrorLog ${APACHE_LOG_DIR}/error.log
     CustomLog ${APACHE_LOG_DIR}/access.log combined
   </VirtualHost>
   

   
   
3. В файле «hosts» в windows добавляем

   192.168.33.33    habrahabr.ru

4. Перезапустим виртуальную машину:

   vagrant destroy
   vagrant up
   

   
   
5. Теперь при переходе на http://habrahabr.ru, будет грузится сайт с нашего хоста на виртуалке.

Пробежимся по конфигурации (Vagrantfile)

config.vm.network "private_network", ip: "192.168.33.33"

Здесь мы задаем для нашей виртуальной машины внутренний IP 192.168.33.33
По этому адресу мы можем подключаться по SSH, имя пользователя и пароль по умолчанию — vagrant

config.vm.synced_folder "www", "/var/www", :mount_options => ["dmode=777","fmode=666"]

Синхронизация рабочей директории «www» в windows и «/var/www» в ubuntu (с выставленными правами доступа).
Синхронизация подразумевает под собой возможность иметь доступ к файлам в папке «www», как из основной ОС, так и из гостевой. Т.е. общий файловый ресурс — например, мы можем редактировать файлы в любом удобном редакторе или IDE под windows, и эти изменения будут доступны для сборки проекта под виртуальной машиной.
Таким образом, код и структура проекта отделены от самой виртуальной машины и будут пробрасываться туда каждый раз при ее запуске.

Тут стоит отметить, что есть некоторые проблемы при использовании watch'еров (например, при использовании gulp) — не выстреливает событие, запускающее пересборку проекта при изменении содержимого файлов, если эти изменения были сделаны не из той же ОС, в которой были запущены watch'еры.
Т.к. я работаю с «webpack» у которого имеется «poll» (т.е. опрос изменений), то мне это сильно не мешает, но, если кто-то знает, как можно решить этот момент, буду рад прочитать в комментариях и добавить в публикацию.

config.vm.network "forwarded_port", guest: 8008, host: 8008

Так делается проброс портов (на примере порта 8008 — я использую его для webpack-dev-server, о чем в будущем планирую написать).

config.vm.provision "shell", path: "vm.provision.sh"

Выполнение команд из файла vm.provision.sh сразу же после загрузки виртуальной машины.
Там все просто — добавляем/регистрируем хосты, устанавливаем mc и делаем любые другие нужные нам действия:

# Добавляем виртуальные хосты из папки «www»:
for vhFile in /var/www/*.conf
do
    # копируем конфигурационные файлы хостов в специально предназначенную для этого папку apache
    sudo cp /var/www/*.conf /etc/apache2/sites-available/ -R
    vhConf=${vhFile##*/}
    # регистрируем хосты
    sudo a2ensite ${vhConf}
    vhost=${vhConf%.*}
    # Добавляем запись в /etc/hosts
    sudo sed -i "2i${vmip}    ${vhost}" /etc/hosts
done
# выставляем права и перезапускаем apache
sudo chmod -R 755 /var/www
sudo service apache2 restart

# Устанавливаем mc:
sudo apt-get --assume-yes install mc

# Если потребуется обновить node/npm:
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Создание своего образа

Для того, чтобы сохранить свой бокс (например, если вы установили и сконфигурировали много ПО и хотите зафиксировать состояние), нужно выполнить команду:

vagrant package --base my-virtual-machine

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

Вот, собственно, вкратце все основное и изложено.

Играйтесь с конфигурацией, изучайте более тонкие возможности Vagrant.

Хорошей разработки!