Building Wordpress sites in the cloud

As part of the new features that we launched two weeks in Cloud9 IDE we've added support for Python, Ruby and PHP as server side languages besides node.js. That's not just it, because users have full freedom over the VM that we run your code on so they can install any platform they like (C++ development in the cloud f.e.). The cool thing is that it's now possible to bring all sorts of already existing applications into Cloud9, without relying on third parties to do the actual Apache hosting etc. because you'll just get an Openshift server. In this post I'll show a step by step demo of how to use Cloud9 to build a Wordpress application without leaving the browser.

If you want to see the quickest demo possible, sign up for Cloud9 at c9.io, log in via GitHub and create an index.php file:

<?php
echo 'Hello world'

When you now click the 'Debug' button we spawn a shell version of PHP that echoes 'Hello world' back to you. To run it via Apache go to the run panel, select 'Apache+PHP' and re-click 'Debug'.

Installing wordpress
To install wordpress, we'll download the latest .zip file, unzip it. Then right click on the root folder in your tree and select 'Upload files' and choose the wordpress folder. Because the folder upload the files are in a seperate subfolder under root. Drag them to root and remove the 'wordpress' folder. Rename the 'wp-config-sample.php' to 'wp-config.php'.

Or do it via the terminal (CMD+T, CTRL+T)

$ wget http://wordpress.org/latest.tar.gz
$ tar xzfv latest.tar.gz
$ cp -r wordpress/* .
$ rm latest.tar.gz
$ rm -rf wordpress

Running wordpress
When you now click 'Debug' and open the site, an error is thrown that no database connection could be made. That's correct, because we don't have a database server running on this machine. To make this fun we'll run Wordpress with PostgreSQL instead of MySQL. To get that to work we'll need to install the pg4wp plugin first. Follow the steps in the installation page to add the driver. We still have no connection, because no database was installed on the virtual machine in Cloud9 but now we've got something to get started with. Let's install Postgres first!

Installing PostgreSQL
Cloud9 comes with a fully functional shell, that can be opened via 'View'->'Terminals'->'New Terminal'. This is just a SSH connection that you'd normally have to servers in your data center. That means that you have a limitless environment where you can install stuff (yes even vi!).



First we'll need to have the Postgres sources, then configure it, and finally make, install and start the server (and yes, this might take a while!).

$ cd ..
$ mkdir pgsource
$ cd pgsource            # go into new directory

$ wget http://ftp.postgresql.org/pub/source/v9.1.4/postgresql-9.1.4.tar.gz        # grab source code

$ tar xzfv postgresql-9.1.4.tar.gz         # untar it

$ cd postgresql-9.1.4
$ ./configure --without-readline --prefix=$PWD/../postgres         # configure

$ make
$ make install
# now to start it

$ cd ~/pgsource/postgres/bin
$ ./initdb -D ../data
$ ./pg_ctl -D ../data -l logfile start
$ ./createdb wp

With a running postgres instance (you can add the bin/ folder to your path if you like) which can be verified by running ./psql, and a created database we can now configure Wordpress to use this database. In 'wp-config.php' change the database settings to (don't have to restart debugging, changes are immediate!):

<?php
define('DB_NAME', 'wp');
define('DB_USER', '');
define('DB_PASSWORD', '');
define('DB_HOST', 'localhost:5432');
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');
?>

A running wordpress install, that you can use, modify and edit live from cloud9.

A hosted database solution (also for free users)
Because a local database won't hold when deploying this to a cloud service, we'll use the hosted postgres solution that Heroku offers. Select the dev plan (which is free) and create a database. Click on your new database to get the connection settings (hostname, username, password, etc.). To use this from within Cloud9 we can now load different configurations per environment, because on C9 the 'C9_PROJECT' environment variable is present.

<?php
if (getenv("C9_PROJECT")) {
    define('DB_NAME', 'wp');
    define('DB_USER', '');
    define('DB_PASSWORD', '');
    define('DB_HOST', 'localhost:5432');
}
else {
    define('DB_NAME', 'HEROKUDBNAME');
    define('DB_USER', 'HEROKUUSER');
    define('DB_PASSWORD', 'HEROKUPWD');
    define('DB_HOST', 'HEROKUHOST.compute-1.amazonaws.com:5432');
}
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');
?>

If you want to migrate data from local -> hosted database, you can use the normal postgres tooling like pg_dump.

Deploying the application to Heroku
Now time to deploy this application to Heroku's hosted applications solution. Go to the 'Deploy' tab in Cloud9 (fourth tab with the balloon) and choose '+'.



Choose Heroku, log in with your fresh credentials and create a new app. Give it any name you like and click 'Add'. Because Cloud9 enforces a Procfile which is not required for PHP apps at the moment, we now need to manually push instead of via the UI. In the console (SHIFT+ESC) type:

$ git remote add heroku git@heroku.com:APPNAME.git
$ git add .
$ git commit -m "Initial commit"
$ git push heroku master

And now your application has been deployed to the URL mentioned in the console message. For example: here is my brand new blog!

Updating the site
In case you want to edit the PHP files, just edit them in Cloud9; test them via the built in Apache process, and when you're ready do a 'git add' for the files you edited, commit them and push to heroku. Easy as that!

Like Cloud9?
We're open source, so if you have cool improvements that you'd like to contribute, see the GitHub page. The VMs terminal stuff are only available on the hosted version, but you can roll your own by install c9 on your own cloud VM (f.e. on Amazon).

Happy coding!