WordPress development servers: almost tastier than a Fluffernutter sandwich

Word Press Development Servers: Part 1 talked about duplicating a WordPress live server installation on a development server. The development server used a name-based virtual host so that the same domain name could be used on both development and live servers. This is a convenient setup because the database, files, and settings are identical on both servers. The major disadvantage is that, with only one URL, it’s not possible to view both live and development server versions at the same time from the same computer. For me, this is a deal breaker because I can’t do side by side comparisons of the two sites. The alternative is to use different domain names on each server. Unfortunately, this adds a bit of extra complexity.

The process is very similar to that outlined in WordPress Development Server: Part 1, so if you’ve already read Part 1, you may want to skip to Step 4.

Development server software:

• Windows 7, 64-bit
• Apache 2.2
• PHP 5.3
• MySQL 5.5 Community Server

Assumptions:

• You have an existing WordPress installation on a live server that you want to duplicate on a development server.
• Your development server is up and running and can serve PHP pages from http://localhost/
• You have a passing fancy for the MySQL command line tool (mysql.exe) and can use it to log in to both development and live servers.

1. Transfer WordPress files:

   Use your favorite FTP client to transfer (copy) all WordPress files from the live server to the development server. Make sure to use the same directory structure. If WordPress files on the live server are stored in htdocs/blog, where htdocs is the web server’s root directory, transfer files to htdocs/blog (backslash for windows) on the development server.

2. Backup the Database:

   Backup the WordPress database on the live server using mysqldump.exe. In this example:

   Parameters required to dump database

   parameters	description
   mysite.ca	domain name of live server
   wp_user	username for WordPress database on live server
   mysecret	password for WordPress database on live server
   wp_db	name of WordPress database on live server
   wp_bak.sql	a file name you create for the dump file that will be saved on the development server

   Create a folder for the backup file, or use an existing one.

   At the Windows command prompt, type:

   C:\>mysqldump -h mysite.ca -u wp_user -pmysecret wp_db > C:\bak\wp_bak.sql

   Press Enter.

   The backup process is not at all confidence inspiring. While the dump is in progress you’ll see a flashing cursor sans command prompt. On completion, the command prompt C:\> returns—and that’s all you’ll get. Open the dump file in notepad to verify that there is actually something in it. Note: this does not use a secure connection.

3. Create a database:

   Create an empty MySQL database and a user on the development server:

   1. Log in to the mysql command line on the development server:

      At the Windows command prompt, type:

      C:\>mysql –h localhost –u root pmyrootpassword

      Press Enter.

   2. Create a database for WordPress using the same name as on the live server:

      At the MySQL command prompt, type:

      mysql> CREATE DATABASE wp_db;

      Press Enter.

   3. Create a user for the database with the same user name and password as on the live server:

      At the MySQL command prompt, type:

      mysql> CREATE USER 'wp_user'@'localhost' IDENTIFIED BY 'mysecret';

      Press Enter.

   4. Grant the user all privileges on the database:

      At the MySQL command prompt, type:

      mysql> GRANT ALL ON wp_db.* TO 'wp_user'@'localhost';

      Press Enter.

      Test your handiwork. Exit the MySQL monitor and log in as the new user:

      At the Windows command prompt, type:

      C:\>mysql –h localhost -u wp_user –pmysecret -D wp_db

      Press Enter.

      At the MySQL command prompt, type:

      mysql> show databases;

      Press Enter.

      If mysql responds with this:

      +--------------------+
      | Database           |
      +--------------------+
      | information_schema |
      | wp_db              |
      +--------------------+
      2 rows in set (0.00 sec)

      pat yourself on the back and exit the command line.

4. Edit the dump file:

   This is where things change a bit. WordPress uses fully qualified URLs to keep track of where everything lives—posts, pages, and media. Since the development server will be using a different domain name than the live server, the dump file from the live server will have to be edited to replace all references to the live server domain name with the development server domain name before it can be used to restore the (currently empty) development server database.

   1. Choose a new and absolutely stunning URL for the development server, e.g. if the live site uses blog.mysite.ca, use a domain name such as blog.mysite.cow for the development server (absolutely bovine, dahling).
   2. Make a copy of the dump file.
   3. Open the copy of the dump file in a text editor. Use find and replace to replace all references to https://blog.mysite.ca with http://blog.mysite.cow, then save the file. Make sure not to inadvertently include an extra space or tab in the replace text. Also, if you’ve included “https://blog.mysite.ca” as text in a post, make sure not to replace it.

5. Restore the database:

   Use the edited dump file to “restore” the empty WordPress database just created on the development server:

   At the Windows command prompt, type:

   C:\>mysql -h localhost -u wp_user -pmysecret –D wp_db < C:\bak\wp_bak.sql

   Press Enter.

6. Create a name-based virtual host:

   Adding a name-based virtual host to Apache’s configuration file allows you to open the test site by typing the totally hep domain name, blog.mysite.cow, into your browser’s address bar.

   1. Open Apache’s configuration file in a text editor:

      C:\Apache2.2\conf\httpd.conf

      Find this line:

      # Include conf/extra/httpd-vhosts.conf

      Uncomment the line by deleting the pound (#) character so it looks like this:

      Include conf/extra/httpd-vhosts.conf

      Save and close the file.

   2. Open Apache’s virtual hosts configuration file in a text editor:

      C:\Apache2.2\conf\extra\httpd-vhosts.conf

      Find this line:

      NameVirtualHost *:80

      Edit it so it looks like this:

      NameVirtualHost 127.0.0.1:80

      Add these lines:

      # WordPress development server for blog.mysite.cow
      <VirtualHost 127.0.0.1:80>
        DocumentRoot C:/Apache2.2/htdocs/blog
        ServerName blog.mysite.cow
      </VirtualHost>

      Save and close the file. Restart Apache.

7. Add entry to hosts file:

   Now that the a name-based virtual host has been added to Apache’s configuration, we need a way to ensure that the browser’s request for blog.mysite.cow, will be sent directly to the development server, and not on a wild goose chase over the internet. Lucky for us, when an operating system receives a request from a browser, it first checks its hosts file to see if there is a matching domain name/IP address entry, so let’s make sure there is:

   Open the Windows hosts file in notepad run as administrator: C:\Windows\System32\drivers\etc\hosts (the hosts file has no file extension).

   Add the following line: 127.0.0.1  blog.mysite.cow

   Save the file and close. This resolves the test site’s domain name with the IP address of the development server. Tip: this process is instant, like coffee, no need for special incantations, or to restart anything. For more information on the hosts file, Lawrence Abrams’ article, The Hosts File and what it can do for you, is quite informative.

   You should now have a local copy of your live WordPress site, running on your development server, using a different (local) domain name.

No comments yet…