Use Xip.io and any subdomain to map to a project directory on your computer.We'll use xip.io to reach our Vagrant server using a domain name, rather than the direct IP address, using "localhost" or editing our /etc/hosts file.

Some Setup

sudo apt-get update
sudo apt-get install -y nginx php5-fpm

Let's see what IP address is assigned to the server:

# Check output for eth1 "inet addr".
ifconfig

In this case, the IP address assigned is 192.168.22.14. We can use that in our browser to see it: http://192.168.22.14.xip.io. That domain resolves to the IP address in the subdomains. We can add additional subdomains as well: http://any.subdomain.i.want.192.168.22.14.xip.io.

Let's check out Nginx's configuration for its default site (virtualhost):

sudo vim /etc/nginx/sites-available/default

Change server_name to the xip.io address:

server {
    # other items omitted
    server_name 192.168.22.14.xip.io;
    # more items omitted
}

Then reload Nginx:

sudo service nginx reload

We'll see that http://192.168.22.14.xip.io still works in the browser. There's only one site defined in Nginx, after all!

A New Virtual Host

Let's create a new virtual host configuration for Nginx, so there is two defined. We'll copy the default site and work off of it.

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/newsite
vim /etc/nginx/sites-available/newsite

Make it look like this:

server {
    listen 80;

    root /var/www;
    index index.html index.html;

    server_name www.192.168.22.14.xip.io;

    location / {
        try_files $uri $uri/ =404;
    }
}

Then enable this by symlinking it to the sites-enabled directory and reloading Nginx.

sudo ln -s /etc/nginx/sites-available/newsite /etc/nginx/sites-enabled/newsite

# Ensure configuration works with configtest
sudo service nginx configtest
sudo service nginx reload

You can create an index.html page in /var/www if it doesn't exist:

echo "Hello, www!" | sudo tee /var/www/index.html

Then try out http://www.192.168.22.14.xip.io vs http://192.168.22.14.xip.io in your browser, and you'll see you are being served separate sites (as they have separate document roots).

Wildcard Subdomains

We'll edit the newsite configuration to use wildcard subdomains and map that to a document root directory.

# Make project directories with index.html files
sudo mkdir /var/www/projecta
echo "projecta" > sudo tee /var/www/projecta/index.html

sudo mkdir /var/www/projectb
echo "projectb" > sudo tee /var/www/projectb/index.html

# Edit the Nginx configuration
sudo vim /etc/nginx/sites-available/newsite

Make it look like this:

server {
    listen 80;

    index index.html index.html;

    # Regex to capture subdomain
    server_name ~^(.*)192\.168\.22\.14\.xip\.io$;

    # Set subdomain to a variable
    set $file_path $1;

    root /var/www/$file_path;

    location / {
        try_files $uri $uri/ =404;
    }
}

Then reload Nginx:

sudo service nginx reload

Then head to http://projecta.192.168.22.14.xip.io and http://projectb.192.168.22.14.xip.io and see how they map automatically to our separate project web roots!