Working environment for lazy web developers (Vagrant + Scotchbox)

Hello. In this article I will describe one of the simplest options for how to quickly raise a full-fledged working environment under a virtual machine, ready for work and further expansion.
At the forefront are “ Vagrant ” (for managing virtualization) and “ Scotchbox ” (boxing for Vagrant - an image with ubuntu and pre-installed software prepared by the guys from scotch.io).

First of all, the publication is intended for those who set up their working environment under Windows, heard about Vagrant, but so far have not tried it in battle. I hope this simple example helps save some time when introducing Vagrant-based virtualization.



Out of the box on board the Scotchbox there is Apache, PHP, MySQL, NPM, Git, Grunt, Gulp, Bower, Yeoman, Ruby, Memcached, Composer and other web developer tools, if something is missing, you can easily install it yourself and after that create your own image.

The link https://box.scotch.io provides detailed instructions for installing and starting a virtual machine with the Scotchbox working environment, as well as a list of what will be installed. This could be finished - they say, see the instructions, but we will automate the creation of virtual hosts for apache a bit (by expanding the Vagrant configuration) and I will briefly describe what is happening there.

For convenience, created a repository with an example of the vagrant configuration that we will use.

So, the sequence of actions:

1. Install “ Vagrant ” and “ Virtual Box ” if they are not already installed.
2. Clone the repository:
   

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

   (or download the archive and unzip it manually if you are on a clean machine without git)
3. Go to the "webdev-env" folder, where the "Vagrantfile" is, and run the command:
   

   vagrant up
   

The first launch can take a lot of time - the image will be downloaded, during subsequent launches this step will not be, the image will cling from the cache. Next, the virtual machine will start.

Having waited for its loading, we will write the line in the “hosts” file (in windows)

192.168.33.33    webdev.local

and go to the local address http: //webdev.local
If everything went as expected, then we will see a page with the text "webdev.local" loaded from our virtual machine and we can immediately proceed directly to development.

Consider the example of adding your host using the example “habrahabr.ru”.

1. In the folder “www” we create the folder “habrahabr.ru” and in it the file “index.html” with any content.
2. In the folder “www” we create the file “habrahabr.ru.conf” with the following contents:
   

   
     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
   

   
   
3. In the hosts file in windows, add

   192.168.33.33    habrahabr.ru

4. Restart the virtual machine:

   vagrant destroy
   vagrant up
   

   
   
5. Now, when switching to http://habrahabr.ru , the site will be loaded from our host on the virtual machine.

Let's go over the configuration (Vagrantfile)

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

Here we set the internal IP 192.168.33.33 for our virtual machine.
At this address we can connect via SSH, the default username and password is vagrant

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

Synchronization of the working directory " www " in windows and " / var / www " in ubuntu (with set permissions).
Synchronization implies the ability to have access to files in the www folder, both from the main OS and from the guest. Those. file share - for example, we can edit files in any convenient editor or IDE under windows, and these changes will be available for building the project under a virtual machine.
Thus, the code and structure of the project are separated from the virtual machine itself and will be routed there every time it is launched.

It is worth noting that there are some problems when using watch'ers (for example, when using gulp) - it does not fire an event that triggers a rebuild of the project when the contents of the files change, if these changes were not made from the same OS in which the watch was run Era.
Because I work with “webpack” which has a “poll” (ie polling changes), then this doesn’t bother me much, but if someone knows how to solve this moment, I will be glad to read in the comments and add to publication.

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

This is how port forwarding is done (for example, port 8008 - I use it for webpack-dev-server, which I plan to write about in the future).

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

Executing commands from the vm.provision.sh file immediately after loading the virtual machine.
Everything is simple there - add / register hosts, install mc and do any other actions we need:

# Добавляем виртуальные хосты из папки «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

Create your own image

In order to save your box (for example, if you installed and configured a lot of software and want to fix the state), you need to run the command:

vagrant package --base my-virtual-machine

It’s convenient not to bother with setting up anymore or when there is a need to transfer specific working environment for your project to other developers.

Here, in fact, in brief all the main and stated.

Play with the configuration, explore the finer features of Vagrant.

Good design!