How To Migrate From VV to VVV

About a week or so ago Google came out with an update to Chrome where they require HSTS on .dev domains. This forces Chrome to require all .dev domains to be accessed via HTTPS.

The reason this really stunk is that I had set up my local sites using VV (Variable VVV) which was a shell script that made building local WordPress sites using VVV a breeze. Unfortunately, VV has not been updated in almost a year. Since then VVV 2.0 has come out and now Google has made the default .dev domains basically useless on Chrome. It’s safe to say that as of this post, VV has been abandoned in favor of just using VVV 2.0.

On top of all this, there is no easy way to port the VV sites over to a VVV 2.0 setup because VV talked directly to the Vagrant/Nginx server instead. In addition, the help docs out there have been pretty unhelpful for me. So I wrote this guide for myself in case I forget how it is all set up in the future. Hopefully, this can be of some use to someone else as well.

EMERGENCY FIX

If you need your sites back RIGHT NOW. Use this. The downside to this method is that when you reload vagrant to add a site later on, these changes will be overwritten. But at least you’ll be able to get your site up now.

Update Server Configuration Files

Go to your www vagrant folder. For me, that’s ~/vagrant-local/www. Then ssh into the server.

vagrant ssh

Then navigate to the nginx folder and then into the custom-sites folder:

cd /etc/nginx/custom-sites

There you’ll be able to see where VV has created configuration files for the server to use. Choose the site you want to edit and edit using nano or vim.

sudo nano 1903studios.conf

There you’ll get something like this:

server {
    # Determines the port number that nginx will listen to for this
    # server configuration. 80 is the default http port.
    listen       80;

    # Listen for HTTPS requests as well
    listen       443 ssl;

    # Tells nginx what domain name should trigger this configuration. If
    # you would like multiple domains or subdomains, they can be space
    # delimited here. See http://nginx.org/en/docs/http/server_names.html
    server_name  1903studios.dev ~^1903studios\.\d+\.\d+\.\d+\.\d+\.xip\.io$;

    # Tells nginx which directory the files for this domain are located
    root         /srv/www/1903studios/htdocs;

    # Includes a basic WordPress configuration to help with the common
    # rules needed by a web server to deal with WordPress properly.
    include /etc/nginx/nginx-wp-common.conf;
}

Change the TLD in the server_name to .test (or whatever TLD you want) and then exit and save.

Then restart the nginx server:

sudo service nginx reload

Now when you visit 1903studios.test it will load. If Chrome redirects you to a search add a forward slash to the url like 1903studios.test/ and that should do the trick.

Permanent Fix – Update to .test from VV

WARNING. Running vagrant destroy will delete your databases unless you have them backed up.

Uninstall VV

Once you make the move away from VV, you’re not going to want to go back unless the authors make a major update to it. Yes, it made things super easy, but in the end, it didn’t do it in a way that was compatible with core VVV. That makes it not dependable. In the near future, I’m planning on making a shell script that mimicks VV’s setup process but uses VVV 2.0 and methods that are in line with how VVV seems to be trending. I’ll share that with everyone and put a link here and at the bottom of this post when it’s complete. In the meantime, you’ll need to use raw VVV (which really isn’t too bad once you understand it) or another method such as composer. Check out the VVV website for more info on other methods you can use.

To uninstall VV run:

brew remove vv

and then

brew untap bradp/vv

Delete vvv-hosts

VVV uses two methods to determine what domain to use. Before VVV 2.0, you could use a file named vvv-hosts that has one line in it that tells the server what domain to use. This was automatically created by VV. Delete it.

Yes, VVV 2.0 is backward compatible with vvv-hosts so this step is technically optional. But we’re going to use the new method to keep things clean and simple as vvv-hosts is deprecated. If you decide to leave the vvv-hosts file then make sure you edit it to the new domain you want (ex: 1903studios.dev -> 1903studios.test).

Create A Provision Folder and Create Files

When VV created sites for you, it created them in the correct place, but it used a different naming convention within Nginx than VVV 2.0 uses. So you can either try update that file locally or just create a new one. I opted to create a new one with VVV 2.0. To do that you’ll need to create a folder names provision inside each of your site’s folders.

cd ~/vagrant-local/www/1903studios
mkdir provision

Then you’ll need to make a vvv-init.sh file and a vvv-nginx.conf file.

touch vvv-init.sh
touch vvv-nginx.conf

VVV-Init.sh File

For the vvv-init.sh file sudo nano in and make it copy this:

 #!/bin/bash # Init script for WordPress trunk site echo "Commencing WordPress trunk Setup" # Make a database, if we don't already have one echo "Creating database (if it's not already there)" mysql -u root --password=root -e "CREATE DATABASE IF NOT EXISTS ${VVV_SITE_NAME}" mysql -u root --password=root -e "GRANT ALL PRIVILEGES ON ${VVV_SITE_NAME}.* TO wp@localhost IDENTIFIED BY 'wp';" # Check for the presence of a `htdocs` folder. if [ ! -d htdocs ] then # Nginx Logs mkdir -p ${VVV_PATH_TO_SITE}/log touch ${VVV_PATH_TO_SITE}/log/error.log touch ${VVV_PATH_TO_SITE}/log/access.log echo "Checking out WordPress SVN" # If `htdocs` folder doesn't exist, check out WordPress # as that folder svn checkout http://svn.automattic.com/wordpress/trunk/ htdocs # Change into the `htdocs` folder we've checked SVN out into cd htdocs # Use WP CLI to create a `wp-config.php` file wp core config --dbname="${VVV_SITE_NAME}" --dbuser=wp --dbpass=wp --dbhost="localhost" --allow-root # Use WP CLI to install WordPress #wp core install --url=${VVV_SITE_NAME}.test --title="${VVV_SITE_NAME}" --admin_user=admin --admin_password=password --admin_email=admin@${VVV_SITE_NAME$ # Change folder to the parent folder of `htdocs` cd .. else echo "Updating WordPress SVN" # If the `htdocs` folder exists, then run SVN update svn up htdocs fi # The Vagrant site setup script will restart Nginx for us # Let the user know the good news echo "WordPress trunk site now installed"; 

VVV-Init.sh File

Lastly, copy the following to your vvv-nginx.conf file.

server {
    # Determines the port number that nginx will listen to for this
    # server configuration. 80 is the default http port.
    listen       80;

    # Listen for HTTPS requests as well
    listen       443 ssl;

    # Tells nginx what domain name should trigger this configuration. If
    # you would like multiple domains or subdomains, they can be space
    # delimited here. See http://nginx.org/en/docs/http/server_names.html
    server_name  1903studios.test ~^1903studios\.\d+\.\d+\.\d+\.\d+\.xip\.io$;

    # Tells nginx which directory the files for this domain are located
    root         /srv/www/1903studios/htdocs;

    # Includes a basic WordPress configuration to help with the common
    # rules needed by a web server to deal with WordPress properly.
    include /etc/nginx/nginx-wp-common.conf;
}

Change 1903studios.dev to 1903studios.test (or whatever TLD you wish).

 

Create a vvv-custom.yml

In your root vagrant folder, create folder named vvv-custom.yml by copying vvv-config.yml. Think of this as the control file for where your sites now live. When you want to add a new site, you’ll do that here.

Now, this next part is extremely basic. I recommend heading over to the VVV website for more info, but this is enough to get you off the ground. You can do more fancy things when creating news sites that we’ll go over later.

sites:
  1903studios:
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    hosts:
      - 1903studios.test
  abc-site:
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    hosts:
      - abcsite.test

Note that the indentation above is in spaces. If you use tabs, it will fail.

Also, after making any changes to this file you’ll need to run:

  vagrant reload --provision

This tells vagrant to reload the box and provision any new sites or changes. BIG NOTE: if you read a guide that says that maybe your vagrant server is corrupt and to run vagrant destroy and then rebuild it, be very wary of doing this. That should be the absolute last thing you try. Running destroy will destroy your databases. While you’ll still have your theme files you’ll have to set your sites back up from scratch (add pages, posts, activate/setup plugins).

Possible Issues

You might run into a few issues while doing this. Below is a list of the issues I ran into and what I did to fix them.

White Screen of Death / Blank Screen

If you get this, then you’ve got some issues that are going to be rough to debug. If you listen to everyone else, they’re going to tell you to run:

vagrant reload --provision

and see if that works. If it doesn’t, then they’ll say to run:

vagrant halt
vagrant destroy
vagrant up --provision

WARNING: If you do this without a backup of your databases then you’ll lose your pages, posts, media and any other local data store there. That can be a huge pain for some people so please proceed with caution.

If that doesn’t work, then what’s likely happening is that there’s a misconfiguration in your vvv-custom.yml file or your vvv-nginx.conf file.

Error Establishing A Database

If you get this, then that’s awesome. It means the VM is running and that there’s just something wrong with the database of the wp-config.php file. For me, it was the wp-config.php file. I had some miscellaneous code there from some previous debugging that was interfering with things. Some notes here are that all vagrant databases have a username of “wp” with a password of “wp”. That’s generated in the vvv-init.sh file we created above.

This could also mean that your MySQL (called MariaDB) hasn’t started for some reason when you ran vagrant up last. You can run this to reset MySQL:

vagrant ssh -c "sudo service mysql start

If that doesn’t do the trick, then it’s more than likely a configuration problem with your wp-config.php and your database. Go back and make sure that the credentials being created in vvv-init.sh match what is in your local wp-config.php and what is on the server using:

vagrant ssh
cd /srv/www/1903studios/htdocs

If that doesn’t work you can try deleting the database backups and starting from scratch. Once again, be forewarned that you’ll lose everything if you do this.

vagrant shh
cd /srv/database
rm -r database

I really don’t recommend this though. So use it as a last resort.

Website or marketing got you down? We can help!
Learn More About 1903 Studios

0 Comments

Please keep your comments respectful and adhere to our community guidlines.

Leave a Reply

Be the First to Comment!

Notify of
avatar