Multiple vhosts with simple LAMP in Vagrant

Question 1

Multiple vhosts with simple LAMP in Vagrant

linux lamp vagrant

Dimitri Kouvdis · Jan 20, 2013 · Viewed 11.8k times · Source

Answer

Answer

Vagrant LAMP Multiple vhosts - UPDATED!

See updated info below

I've been searching ways on how to improve my web development workflow. Im currently using various tools and apps such are, LAMP, Webmin and Filezilla in Theming Projects and the like. And then I discovered the existence of this amazing tool called Vagrant, and after testing it with my projects I fell in love with it and decided to integrate it to my current local web dev environment. And so I dug further and searched for possibilities on how to create and setup a Multi Vhosts setup with Vagrant using my chosen base box Ubuntu 12.04 Precise Pangolin 32-bit. Searching Google returns many results, but I decided to click links from stackoverflow and got landed to this question. I followed the link mentioned in Dimitri Kouvdis's answer, which is a Github Repo. I've tested it and encountered issues very similar as Dimitri Kouvdis had also encountered. But It's already solved now, thanks to his comments, I made it worked. But during my quest in searching for my ideal Vagrant Box with Multiple Virtual Support, I searched and tested several repos from Github until I found the right one for me, And I did found one. The reason I hunted down these repos because I don't know yet how to use Puppet and Chef to provision my own Dev Server, that's why.

I've Found Another Github Repo that Worked For Me

Thanks To This Repo

onema / vagrant-lamp-development

https://github.com/onema/vagrant-lamp-development

Testing the Github Repo Dimitri Kouvdis had mentioned, I've encountered several issues and during that time I stopped working on it and decided to search for similar repos from Github. I found several and tested some of them including Nino Paolo's Repo (https://github.com/paolooo/vagrant-lamp). I've encountered several issues again specially during vagrant up. I decided again to search for another until I found and successfully setup onema's repo. I finally decided to use and integrate this solution to my current workflow in my web development practice environment. I started loving onema's repo because;

It's easy to setup since instructions are easy to follow, specially for newbies and self-learner like me.
It has several documentations and example setup.
Most of all, Adding new Vhosts is easy compared to other ones I've tested.
You can choose and setup any folder in your local drive as your source-site/project-folder.
It's just simple without the un-necessary (in my case) Add-ons (node.js, less, etc). I just needed the LAMP Stack, plus vhost support and phpmyadmin.

How To Set It Up - For Starters and Self-Learner Like Myself

As I mentioned it above, setup is easy (specially for newbies and self-learner like me) by reading and following the instruction found from it's Github Repo page. - https://github.com/onema/vagrant-lamp-development. You can choose to use the downloaded zip file or choose to use git clone https://github.com/onema/vagrant-lamp-development to copy the Vagrant files to your local-drive.

This is how I've set it up (in my *nix machine, Ubuntu 12.04 x64);

Download the files to your local-drive, either by using the downloaded zip files or git and do the basic Vagrant and VirtualBox setup. Read instruction from the Github Page, plus do the below steps.
With my setup, I've edited the Vagrantile a bit. In line: 70 of the orig Vagranfle file, I disabled NFS by putting a comment # to

config.vm.synced_folder "~/Sites", "/vagrant", nfs: true

so, it now looks like this...

#config.vm.synced_folder "~/Sites", "/vagrant", nfs: true

and then commenting out...

#config.vm.synced_folder "~/Sites", "/vagrant"

line: 140 from the orig Vagrantfile

so, it now looks like this...

config.vm.synced_folder "~/Sites", "/vagrant"

I am doing this because in my machine, during vagrant up, it throws several NFS related errors that I do not understand.
Now, for the sake of this example, and from the example from it's Repo Page, create a folder and you must name it Sites. This should be located in your User Account's folder root or your Home Folder.

/home/your-user-account-home-folder/Sites

In my case, (take note of that capital S)

/home/gary/Sites
- A.
  
  Create your sample dev-site/vhost and create a new folder named wordpress.dev and make this as the document root of your vhost wordpress.dev Then add your project files here. See example below;
  
  /home/gary/Sites/wordpress.dev
- B.
  
  Now, reate a simple splash page for your newly created vhost so you can confirm that your configuration is redirecting you to the destination vhost root folder, when you visit the dev site from your browser. Of course, when your configurations are correct, you shall see the splash page. This is how I made my splash page.
  
  I created an index.php file and put some codes inside it,like so;
  
  <?php echo "Success!!! Your wordpress.dev looks fine"; ?>
  
  So when you successfully reached your vhost, you'll be greeted by the message Success!!! Your wordpress.dev looks fine
Now, add your Vagrant Box's IP Address to your hosts file and mapping your dev site wordpress.dev to it, like so;

192.168.50.4 wordpress.dev

Note: 192.168.50.4 is the default configured IP Address of the Vagrant Box, you may change this to your liking and update your hosts file.

In my case, I put it like so,
- A
  
  10.10.10.10 wordpress.dev - in my hosts file, while
- B
  
  config.vm.network "private_network", ip: "10.10.10.10"
  
  in my Vagrantfile.
  
  You can find this settings by looking inside your Vagrantfile and navigating just below this line
  
  # Host-Only networking required for nfs shares
  
  Then change the ip: settings from there and update your hosts file to match the IP.

Edit your Vagrantfile again and add your vhost settings, to point to your dev site folder, add these code block like so;

:wordpress => {
   :name => "wordpress",
   :host => "wordpress.dev", 
   :aliases => ["wordpress.dev"],
   :docroot => "/wordpress.dev"
}

When you added the code to the orig Vagrantfile, it should look like this;

 :vhost => {
    :localhost => {
    :name => "localhost",
    :host => "localhost", 
    :aliases => ["localhost.web", "dev.localhost-static.web"],
    :docroot => ""
  },
    :wordpress => {
    :name => "wordpress",
    :host => "wordpress.dev", 
    :aliases => ["wordpress.dev"],
    :docroot => "/wordpress.dev"
  }

So your Vagrantfile shall now look like this one below; take note on the comma , right above the w of the :wordpress and right of closing curly brace }.

There should be a comma in there, when you add another vhost, you should add another comma to the right of the closing curly brace } of wordpress.

  Vagrant.configure("2") do |config|
  config.vm.box = "precise32"
  config.vm.box_url = "http://files.vagrantup.com/precise32.box"
  config.vm.host_name = "localhost"
  config.vm.provision "chef_solo"  do |chef|
    chef.cookbooks_path = "cookbooks"    
    chef.add_recipe "vagrant_main"
    #####################################
    # MONGODB
    # https://github.com/edelight/chef-cookbooks
    #####################################
    chef.add_recipe "mongodb::10gen_repo"
    chef.add_recipe "mongodb::default"
    #####################################
    # REDIS
    # https://github.com/phlipper/chef-redis
    #####################################
    chef.add_recipe "redis"
    chef.json.merge!({
      :mysql => {
        :server_root_password => "root",
        :server_debian_password => "root",
        :server_repl_password => "root"
      },
      #####################################
      # YOU WILL NEED TO ADD THESE DOMAINS 
      # TO THE LIST OF HOSTS IN YOUR LOCAL 
      # ENVIRONMENT FOR THESE TO BE PROPERLY 
      # ROUTED
      #####################################
      :vhost => {
        :localhost => {
            :name => "localhost",
            :host => "localhost", 
            :aliases => ["localhost.web", "dev.localhost-static.web"],
            :docroot => ""
        },
        :symfony => {
                :name => "symfony",
                :host => "symfony.web", 
                :aliases => ["symfony"],
                :docroot => "/symfony/web"
        },
        :wordpress => {
            :name => "wordpress",
            :host => "wordpress.dev", 
            :aliases => ["wordpress"],
            :docroot => "/wordpress.dev"
        }
      }
    })
  end
  config.vm.network "forwarded_port", guest: 80, host: 8080
  config.vm.network "forwarded_port", guest: 3306, host: 3307

  ##########################################################################
  # UNCOMMENT IF NFS IS DISABLED
  ##########################################################################
  config.vm.synced_folder "~/Sites", "/vagrant"

  ##########################################################################
  # NFS 
  # Enable if you have performance issues with large projects. 
  # see the following links for more info:
  # http://forum.symfony-project.org/viewtopic.php?t=52241&p=167041#p147056
  # http://docs.vagrantup.com/v2/synced-folders/nfs.html
  # http://www.phase2technology.com/blog/vagrant-and-nfs/
  ###########################################################################
  # Host-Only networking required for nfs shares
  config.vm.network "private_network", ip: "10.10.10.10"
  #config.vm.synced_folder "~/Sites", "/vagrant", nfs: true


  config.vm.provider :virtualbox do |vb|
    #   # Don't boot with headless mode
    #   vb.gui = true
    #
    #   # Use VBoxManage to customize the VM. For example to change memory:
    vb.customize ["modifyvm", :id, "--memory", "512"]
  end
end

You are now ready to start your Vagrant Box, open your terminal window

ctrl + alt + tand type in

cd vagrant-lamp-development to change directory to vagrant-lamp-development folder and type in

vagrant up

so you can start the Vagrant Box VM and then wait for it to boot-up completely. It will take several mintues for the FIRST INITIAL BOOT UP. Upon successful bootup, open up your browser and navigate to

http://wordrpress.dev

You should see a web splash message, that you made earlier in Step 3 B.
To Add New Vhosts, just create a new folder inside /home/your-home-folder/Sites/new-project-folder and then...
- Repeat Steps 3B, 4A, 5
- If you made the changes or the addition of Vhosts to your Vagrantfle while the VM Box is Running, type..
  
  vagrant provision
  
  in your terminal to make the changes take effect.
- If you made the changes or the addition of vhosts to your Vagrantfile while the VM Box is OFF, type...
  
  vagrant up --provision
  
  in your terminal to make the changes take effect.
  
  NOTE: The Vagrantfile used in this guide will download a 64-bit Precise Pangolin Basebox Base Box, you could change it to a 32-bit Precise Pangolin Basebox by changing the config from the Vagrantfile.
  
  I did this in my case, because I already downloaded my 32-bit base box. So I changed it to 32-bit, so I don't have to download again.
  
  Change...
```
Vagrant.configure("2") do |config|
     config.vm.box = "precise64"
     config.vm.box_url = "http://files.vagrantup.com/precise64.box"
```
  To
```
Vagrant.configure("2") do |config|
        config.vm.box = "precise32"
        config.vm.box_url = "http://files.vagrantup.com/precise32.box"
```
  DONE!

Other Vagrant LAMP Repos I've Tested that Worked - But not necessarily supports multiple vhosts

r8/vagrant-lamp Supports Multiple Vhosts
mattandersen/vagrant-lamp
chad-thompson/vagrantpress

Other Vagrant LAMP Repos

Vagrant LAMP Repo

If you wish to use R8's Vagrant-LAMP Repo - For Multi Vhosts Purpose

r8/vagrant-lamp

Here's how to add a new vhosts

Create a new .json file matching your desired dev-site name, ex: wordpress.dev in
vagrant-lamp/data_bags/sites

So it shall look like...
vagrant-lamp/data_bags/sites/wordpress.json

Edit the newly created file wordpress.json and add the following (for example only);

{
    "id": "wordpress",
    "host": "wordpress.dev",
    "aliases": [
        "www.wordpress.dev"
    ]
}

Create a new folder named wordpress.dev inside vagrant-lamp/public
So it will look like...
vagrant-lamp/public/wordpress.dev
Edit your hosts file to add and map 192.168.33.10``wordpress.dev
So it shall look like this... 192.168.33.10 wordpress.dev
And you're good to go... Fire up vagrant and type vagrant up --provision, if the box is turned off
If the box is turned on when you did the procedure, then type vagrant provision instead.
After this, fire up your browser and test your config, browse to http://wordpress.dev.
Make sure you put some index files in there.

The Update: Added new repository from Github.

Guys, my Linux Mint 13 (Ubuntu 12.04 based) dev box broke. That is why I had to re-install my OS (My bad... using Fake RAID & don't have a backup) from scratch again. But this time, I've used Linux Mint 17 which is based on Ubuntu 14.0.4 LTS.

So I re-installed everything from scratch and quickly setup my Web Dev environment. But it turned out that my previous working setup with vagrant no longer works. So I've searched for solution on how to setup another web development environment that will work with Ubuntu 14.04 LTS. And luckily I found a working setup with the use of another Github repo called CPT Server

The Setup

So this is how you set it up.

Clone this repo: cptserver
Or download the zip file
Browse to where you cloned or downloaded the repo (extract the zip file)
Open config/config.yaml and customize how you wanted it. In my case, I did not touch any of the default configs, I just added my vhost.
Now from your terminal, browse to where you downloaded or clone the repo and vagrant up

That's it! First boot will take long.

Adding New Virtual Host Is Easy

Just edit config/config.yaml and go to the bottom most part of the file. Look for vhost: line and insert your new virtualhost like this:

 ServerName: mydevsite.dev
    ServerAlias: mydevsite.dev
    DocumentRoot: /var/www/mydevsite.dev
    ServerAdmin: webmaster@localhost

Then create a new folder inside www and name it to match the ServerName or DocumentRoot folder mydevsite.dev

If you added a new host while vagrant is running, then do this; vagrant provision If you modify the upper part of the config.yaml while vagrant box is running, do this; vagrant reload --provision

Don't forget to update the hosts file of your host machine, point your vhost to vagrant's ip.

So that's it.

Question 2

I am trying to create a simple LAMP through Vagrant that can support multiple websites stored in /var/www. That can be done with vhosts.

Each project should end in .dev

Cant stand the idea creating each build that supports one project with a database each.

I cant make head or tails with Puppet or Chef. I rather avoid that, but happy to clone it from a repo.

I need some advice or point me to the right direction.

Thanks

Multiple vhosts with simple LAMP in Vagrant

Answer

Vagrant LAMP Multiple vhosts - UPDATED!

I've Found Another Github Repo that Worked For Me

Thanks To This Repo

How To Set It Up - For Starters and Self-Learner Like Myself

This is how I've set it up (in my *nix machine, Ubuntu 12.04 x64);

DONE!

Other Vagrant LAMP Repos I've Tested that Worked - But not necessarily supports multiple vhosts

Other Vagrant LAMP Repos

If you wish to use R8's Vagrant-LAMP Repo - For Multi Vhosts Purpose

The Update: Added new repository from Github.

The Setup

Adding New Virtual Host Is Easy

Related questions