Working environment for "lazy" web developers (Vagrant + Scotchbox)

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

First of all, the publication is designed for those who customize their working environment under Windows, heard about Vagrant, but so far have not tried it in combat. I hope this simple example will help save some time when you get acquainted with Vagrant-based virtualization.



Out of the box on board “Scotchbox” there is Apache, PHP, MySQL, NPM, Git, Grunt, Gulp, Bower, Yeoman, Ruby, Memcached, Composer and other web developer tools, if you miss something, you can easily install it yourself. and then create your own image.
')
The link https://box.scotch.io provides detailed instructions for installing and running a virtual machine with the Scotchbox environment, as well as a list of what will be installed. This could be the end - they say, see the instructions, but we will automate the creation of virtual hosts for apache (by expanding the Vagrant configuration) and I will briefly describe what is happening there.

For convenience, I created a repository with an example of the vagrant configuration, which 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 “Vagrantfile” is located and execute the command:
   

    vagrant up 

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

Having waited for its loading, we will write a 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 the development.

Consider the example of adding your host using the example of “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" create the file "habrahabr.ru.conf" with the following contents:
   

    <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. In the file "hosts" 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 a virtual machine.

Let's run through the configuration (Vagrantfile)

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

Here we set the internal IP for our virtual machine to 192.168.33.33
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 access rights set).
Synchronization implies the ability to access files in the “www” folder, both from the main OS and from the guest OS. Those. shared 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 the virtual machine.
Thus, the code and structure of the project are separated from the virtual machine itself and will be forwarded there every time it is launched.

Here it is worth noting that there are some problems when using watch'erov (for example, when using gulp) - the event does not trigger the project reassembly when changing the contents of files, if these changes were not made from the same OS in which watch was launched Ery.
Since I work with a “webpack” which has a “poll” (i.e. a change poll), then it doesn't bother me much, but if someone knows how to solve this moment, I will be happy 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 (using the example of 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" 

Execute commands from the vm.provision.sh file immediately after booting the virtual machine.
Everything is simple there - we 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 -gn sudo n stable 

Creating your own image

In order to save your box (for example, if you have 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 

Convenient to no longer bother with the setting or when there is a need to transfer to other developers a specific working environment for your project.

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

Play with the configuration, learn the more subtle features of Vagrant.

Good design!