Update I am no longer using this setup for local development. Instead I am using Local by Flywheel, which I find to be a more polished experience.
I’ve made the jump from MAMP to Varying Vagrant Vagrants (VVV) on my Mac and I wanted to document the process. Specifically, I want to address the changes I made so I can load the websites from other machines on my network. I’ve got all the gory details below, you can see the modifications I made in:
- My VVV Customfile that augments the Vagrant file
- vagrant-hostsupdater – by running
vagrant plugin install vagrant-hostsupdaterafter vagrant is installed
- vagrant-triggers – by running
vagrant plugin install vagrant-triggersafter vagrant is installed
Make sure you have the requirements listed above, then use the following lines on the command line.
$ git clone https://github.com/bradp/vv ~/vv $ git clone https://github.com/Varying-Vagrant-Vagrants/VVV.git ~/vagrant-local $ cd ~/vagrant-local $ curl -O https://gist.githubusercontent.com/salcode/da45f09ca0c319a108db/raw/Customfile $ vagrant up
Alternate Long Version with Explanation
From your home directory run
git clone https://github.com/Varying-Vagrant-Vagrants/VVV.git ~/vagrant-local (this installs the project in ~/vagrant-local, which is the default installation location – use this location, it makes thing easier)
The official VVV first vagrant up instructions are worth reading on this topic.
Default IP Address 192.168.50.4
By default, VVV runs on IP address 192.168.50.4, which is only available on your machine. I’m coming from MAMP, where I could use my machine’s Local IP address from other devices on my network (e.g. my iPhone), which allowed me to test the site on these other devices. The ability to test on other devices is critical to the work I do.
VVV on Local IP Address
We can modify the network settings in the Vagrantfile, in the root of vagrant-local, by uncommenting the line
config.vm.network "forwarded_port", guest: 80, host: 8080
and adding the line
config.vm.network "forwarded_port", guest: 443, host: 8443
Rather than modify our Vagrantfile (and thus complicating future updates), we’re going to place this in Customfile which overrides settings in Vagrantfile. See my full VVV Custom File below.
This allows our guest machine (the vagrant machine running within our host machine) to run on our local IP address on port 8080. You can use find your local IP address instructions to determine your local IP address, mine is 10.0.1.6. Now I can load the vagrant machine from http://localhost/:8080, http://127.0.0.1/:8080, or http://10.0.1.6/:8080).
There remain two problems.
1. We want to run on port 80 (not port 8080) however vagrant will not allow us to use a host port less than 1025.
2. We need nginx to respond with the correct website, when we connect from another machine on the network.
VVV on Local IP Address Port 80
Port 80 is the default port for websites. We want to run on that port, which we can do with port forwarding on our host machine (remember our host machine is already listening on port 8080).
Update 20141105: I’ve moved my notes to a separate post on Mac pfctl Port Forwarding.
VVV on Local IP Address Port 443
Added 20150331: Port 443 is the default port for websites over https. We want to run on that port, which we can do with port forwarding on our host machine (our host machine is already listening on port 8443 by default).
These port forwarding rules are added to our VVV Custom File. Assuming you have vagrant-triggers installed, the port forwarding rules will be automatically applied on vagrant up (and automatically removed on vagrant suspend, halt, destroy).
My Vagrant Customfile
|# you can put this file in place by|
|# navigating to your VVV directory (e.g. `cd ~/vagrant-local`)|
|# and running|
|# curl -O https://gist.githubusercontent.com/salcode/da45f09ca0c319a108db/raw/Customfile|
|# set port forwarding from host 8080 to guest 80|
|# set port forwarding from host 8443 to guest 443|
|config.vm.network "forwarded_port", guest: 80, host: 8080|
|config.vm.network "forwarded_port", guest: 443, host: 8443|
|if defined? VagrantPlugins::Triggers|
|# port forwarding setup and removal for running on your host primary IP address|
|config.trigger.after [:up, :reload, :provision], :stdout => true do|
|rdr pass inet proto tcp from any to any port 80 -> 127.0.0.1 port 8080|
|rdr pass inet proto tcp from any to any port 443 -> 127.0.0.1 port 8443|
|" | sudo pfctl -ef - >/dev/null 2>&1; echo "Add Port Forwarding (80 => 8080)\nAdd Port Forwarding (443 => 8443)"')|
|config.trigger.after [:halt, :suspend, :destroy], :stdout => true do|
|system('sudo pfctl -F all -f /etc/pf.conf >/dev/null 2>&1; echo "Removing Port Forwarding (80 => 8080)\nRemove Port Forwarding (443 => 8443)"')|
Nginx Wildcard Rules and xip.io
xip.io is an amazing free service that takes a URL and resolves it to the IP address that appears in the URL. For example, test.10.0.1.6.xip.io, example.10.0.1.6.xip.io, and salferrarello.10.0.1.6.xip.io all resolve to 10.0.1.6.
To make VVV resolve websites based on the xip.io URLs the nginx-config had to be modified. These changes have been accepted in VVV core and you can view the changes to make xip.io URLs work on the default VVV sites.
Changing site_url on the Fly
The problem with changing the url of the website every time you get a new local IP (e.g. you move to a new network) is you need to go update your site_url and home_url. I’ve found the Dynamic Hostname plugin that solves this issue.
Nginx Wildcard Rules and xip.io for future sites
Using this tool if you setup a new site called, testsite and it is available at testsite.dev, it will also be accessible via xip.io. For example, if you IP address is 10.0.1.6, testsite will be available at testsite.10.0.1.6.xip.io.
Default VVV Installs New Addresses
After these modifications, the default VVV installs will continue to be available at their original URLs but they’ll also be available at new xip.io URLs.
For example: If you IP address is 10.0.1.6,
- http://vvv.dev/ is also at http://10.0.1.6/
- http://local.wordpress.dev/ is also at http://local.wordpress.10.0.1.6.xip.io/
- http://local.wordpress-trunk.dev/ is also at http://local.wordpress-trunk.10.0.1.6.xip.io/
- http://src.wordpress-develop.dev/ is also at http://src.wordpress-develop.10.0.1.6.xip.io/
- http://build.wordpress-develop.dev/ is also at http://build.wordpress-develop.10.0.1.6.xip.io/