Vagrant and Custom Domains with WordPress

Last week we looked at installing Vagrant with WordPress using Varrying Vagrant Vagrants. Now that left us with the default configurations and domains for our projects. Certainly fine to start out with, but really we want to use custom domains that match our client live or development domains.

So today we will add a custom domain to our Vagrant install as well as a new WordPress install for that custom domain.

If you haven’t watched the first screencast or read the post go do it and if you’re just here for the screencast, jump to the bottom.

Starting Out

The first thing we need to do is to open up terminal and switch to whatever folder you want to use for all your web development sites. For me that means typing cd ~/Dropbox/Sites/.

Next we need to clone the Varrying Vagrant Vagrants repository.

git clone git@github.com:10up/varying-vagrant-vagrants.git fancy-domain

That will put the repository files in a folder call ‘fancy-domain’. Now we need to dig in to the project and make some changes to the Vagrant configuration files.

Create a Database

Our first customization will be to create a new database for our custom site to live in. Navigate to ‘fancy-domain/database/’. Now we need to copy the file called ‘init-custom.sql.sample’ and we will call it ‘init-custom.sql’. We can do this directly from Terminal by typing cp init-custom.sql.sample init-custom.sql which will copy the file and name it ‘init-custom.sql’.

Now open ‘init-custom.sql’.

001-create-db

In here we see some basic SQL that will create a new database and a new user with priviledges on the database. Since this is a local testing environment, I don’t bother getting fancy I make the database name, user, password match the client. So in our demo case here they would all be fancydomain. Once you’ve made the changes save the file.

Add to the nginx configuration

Now we need to make some changes to the configuration of nginx so that it knows about our new custom domain location. Navigate to ‘/fancy-domain/config/sites’. Here we see a few files, but the one we are interested in is the one called local-nginx-example.conf-sample. Again we want to copy this file with a new name, but this time we want the name to match our custom site. So type cp local-nginx-example.conf-sample local.fancy-domain.com.conf. Now open the new file.

002-nginx-config

Here we just need to make a few changes. On line 28 we need to change testserver.com to ‘local.fancy-domain.com’ and on line 31 we need to change /srv/www/wordpress-local; to /srv/www/fancy-domain. All we did was tell nginx to listen for local.fancy-domain.com and send requests for that domain to the folder found at /srv/www/fancy-domain.

Final Setup Step

Now we need to edit the hosts file on our computer. In Mountain Lion you can find it by typing ‘sudo vim /private/etc/hosts’ which will prompt you for a password then open the file in Vim. Just like when we set up our basic Vagrant site, we need to tell our computer to send web browser requests for local.fancy-domain.com to our local IP.

If you have done the previous tutorial as well, then you should already have a line that looks something like this.

192.168.50.4 local.wordpress.dev local.wordpress-trunk.dev

To the end of that line we need to add our new custom domain as you see below.

192.168.50.4 local.wordpress.dev local.wordpress-trunk.dev local.fancy-domain.com

Now we need to start up the server by typing vagrant up inside our fancy-domain folder. Remember this is the first time we have started this server so we need to wait a few minutes while it downloads 300mb of stuff.

Create Your WordPress Install

Now that we have booted up the server you can navigate to ‘fancy-domain/www’ and you will see a folder called ‘wordpress-default’. Duplicate the folder then rename it to ‘fancy-domain’. Then go inside and remove the wp-config.php file.

That’s about it, navigate in your web browser to local.fancy-domain.com/wp-admin and you should see the stock WordPress
install screen. Remember we named the database, user, and password fancydomain. Keep it set to localhost. Then install WordPress and you’re rocking custom domain inside Vagrant for your client.

Screencast

Curtis McHale

Posts Twitter

Curtis is a web designer/developer specialized in WordPress eCommerce development on WooCommerce. You can get in touch with him about projects on SFNdesign.
My Blog is 4 Times Faster Than Your Blog

7 responses to Vagrant and Custom Domains with WordPress

  1. I would not recommend creating a new Vagrant install for each additional site you need to support—that will just create a lot of overhead and could potentially result in a number of duplicate virtual machines being created, which would eat up space quickly. Varying Vagrant Vagrants already includes the ability to support multiple custom domains right out of the box.

    Instead of cloning the Varying Vagrants repository in the “Starting Out” step, just make a new directory inside of the www/ folder, such as www/local.fancy-domain.com/ — Then, create a new configuration file to /config/nginx-config/sites/ (see https://github.com/10up/varying-vagrant-vagrants/blob/master/config/nginx-config/sites/local-nginx-example.conf-sample for the template) called local.fancy-domain.com.conf that points to the new site’s directory. Add a database entry using the template at /database/init-custom.sql.sample (rename to init-custom.sql), unzip WordPress to your new directory, and you’re good to go! Same result, much less mess left behind on your development machine.

    Happy Vagrant’ing,
    -KA

  2. Thanks this was super helpful to see someone do. I think the VVV installation process is well documented at this point by several people, but actually setting up WP sites inside VVV hasn’t been covered.

    Hopefully most people are creating multiple sites within a single VM and hopefully if not yet, then soon some will walk through the process manually and then using a script (grunt or something).

    • Yeah I run many WordPress sites on one VM since they don’t need custom configuration and I should show how I do that at some point.

  3. Came back to this and think I finally get it all, yay!

    One thing I noticed was you edit /etc/hosts directly. With VVV and vagrant-hostsupdater though you can add the record to the vvv-hosts file in your vagrant directory and have adding/removing it managed by VVV. That way when you ‘vagrant halt’ it’s removed and ‘vagrant up’ it’s put back in.

    • Yeah I’ve been told that twice now and simply haven’t had a chance to dig in with a new project that needs configuration yet.

      Once I’ve had a chance I’ll update with a new screencast.

Trackbacks and Pingbacks:

  1. Add a new domain to an existing VVV (Vagrant) box - December 19, 2013

    […] Vagrant and Custom Domains with WordPress […]

  2. SFNdesignWe love to use Vagrant » SFNdesign - April 15, 2014

    […] Vagrant and Custom Domains with WordPress […]

Leave a Reply

*

Text formatting is available via select HTML.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>