Multiple vhosts with simple LAMP in Vagrant

linux lamp vagrant
Dimitri Kouvdis picture Dimitri Kouvdis · Jan 20, 2013 · Viewed 11.8k times · Source

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

Answer

GaryP picture GaryP · Nov 27, 2013


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);

  1. 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.


  2. 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.

  3. 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



  4. 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.


  5. 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
  6. 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.

  7. 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

Other Vagrant LAMP Repos

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

  1. 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

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

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

  3. Create a new folder named wordpress.dev inside vagrant-lamp/public
    So it will look like...
    vagrant-lamp/public/wordpress.dev

  4. 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

  5. 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.

  6. 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.

Related questions

Trouble with Vagrant - "404 - Not Found"

I am attempting to make a LAMP box using Vagrant. I have been told that it is quite simple to use. I am completely new to networks and virtual machines and have very little experience with Linux/Ubuntu. I have …

Read More
How do I change the root directory of an apache server?

Does anyone know how to change the document root of the Apache server? I basically want localhost to come from /users/spencer/projects directory instead of /var/www. Edit I ended up figuring it out. Some suggested I change the …

Read More
What is Options +FollowSymLinks?

I am using a Lamp server on my computer. I started to use Laravel php framework. In my .htaccess , If I use Options +FollowSymLinks , I get 500 error. And If I comment out , I have to use index.php in my …

Read More