Hosting multiple sites on MAMP

I’m currently hosting my OwnCloud instance on my MacBook Air that is running 24/7 at home connected to external drives (http://jaecloud.com) so I can backup my personal files from my iPhone. I’ve also started doing some development work for side projects I’m working on and wanted to host a test server where I could run cron jobs and have unlimited storage.

So I reused a domain name I had registered and pointed it to my home server. I thought it would be as simple as putting in some new variables into the .conf file, but I ran into some difficulties and was discouraged at all the posts on the internet spewing the same information, I saw at least 10 posts that had the SAME EXACT information.

So I decided to make my own post to highlight the issues I ran into and how I solved them.

1) Edit the httpd.conf file in MAMP – the file should be located in /Applications/MAMP/conf/Apache/. I opened the file and found the section that read;

# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

And removed the “#” before the Include to enable this feature.

2) Edit the httpd-vhosts.conf file – the file should be located in /Applications/MAMP/conf/apache/extra/. I removed the “#” from the following line;

#NameVirtualHost *:80

The file contained 2 sample <VirtualHost> entries, so I uncommented them and reused them.

<VirtualHost *:80>
ServerAdmin admin@jaecloud.com
DocumentRoot "/Applications/MAMP/htdocs/"
ServerName jaecloud.com
ServerAlias www.jaecloud.com
<Directory "/Applications/MAMP/htdocs/">
Options Indexes FollowSymLinks
AllowOverride None
</Directory>
</VirtualHost>

<VirtualHost*:80>
ServerAdmin admin@jaepaik.me
DocumentRoot "/Applications/MAMP/jaepaikme/"
ServerName jaepaik.me
ServerAlias www.jaepaik.me
<Directory "/Applications/MAMP/jaepaikme/">
</Directory>
</VirtualHost>

3) Change the ports on MAMP to the default ports instead of the local ports that are used. The default port for Apache should be 80 and the default for MySQL should be 3306.

4) Save both the httpd.conf and the httpd-vhosts.conf file and restart both the Apache Server and the MySQL Server.

Now, your MAMP instance should be serving both websites. You can put in some test files into the document root and try to access them via the browser.

Hope this helps someone that was in the same situation as I was last night.

OwnCloud Solutions

I’ve been using Dropbox for my personal files and at work for quite awhile now. I’ve also been using Google Storage to store all my photos. I’ve also have iCloud for my iPhone backups, CloudApp for Mac and a few other “Cloud” based storage solutions.

I have to admit, that Dropbox has the cleanest integration into MacOSX, with the neat menu icon.
dropbox-menuI’ve also like the integration into GMail which I use for personal and work email so I can easily send links to large files by browsing my Dropbox directories.

gmail-integration

 

But all this comes at a cost.

Dropbox gives you 2GB to start for free and up to 18GB (500MB per referral = 32 referrals to get 16GB). If you need more, it’s $100/100GB per year.

CloudApp no longer has a free option, but they have a monthly charge of $5 for unlimited files/day, 250MB file size limit and the option to use your own domain.

Google recently changed their storage options. Long ago, I upgraded my Google Storage to 20GB for $5/year. That was a great deal a few years ago. At the most recent Google I/O conference, they announced that they were giving everyone 15GB to share across Gmail, Google+, and Drive. So now I’d be paying for $5/5GB per year. Not such a great deal anymore.

So I was beginning to think about reconciling all my data that I have in various cloud storage solutions and in external hard drives at home. I have a 1TB external drive plugged into my Mac at home with about 400GB free, and I have Verizon FIOS which gives me 50Mbps/25Mbps speeds, and I have experience setting up servers.

Owncloud
Owncloud to save the day. I’ll admit, this solution isn’t as elegant as Dropbox, but I’m going to try and develop all the integration points I have come to rely on.

If you’ve had experience setting up a simple IIS server or MAMP server, you’ll be able to navigate your way through setting up an instance of Owncloud. You could also setup an instance of Owncloud on Amazon AWS using a BitNami package for a turn key solution, but you’ll end up paying for the AWS hosting.

I was able to download the Owncloud source code and set it up on my instance of MAMP in under 5 minutes. I also purchased a domain name and set it up to point to my server.

jaecloud

I’ll be posting a Part 2 to this post to highlight some of the challenges I ran into when setting up Owncloud to fit my personal needs.

Why you should use Google Chrome – part 1

Google’s Chrome browser has some pretty awesome features that I’ve come to find very useful not only on the desktop version, but for mobile devices as well.

Advanced Sync
This feature is awesome because it lets you open sites from across all your devices. So now I can open a browser I was viewing from my laptop that might be in my office, while I’m at a meeting offsite.

Google Chrome on iOS
Google Chrome on iOS

Here I’ve selected a new tab on Google Chrome on my iPhone5. Now I can see all the tabs that I have open on my work laptop, iPad and my Samsung Galaxy S3.

Setting up Advanced Sync on Desktop
First open up Chrome on your desktop and go to Preferences and sign in to your Google account and click on the Advanced Sync Settings button.

Advanced Sync Settings
Advanced Sync Settings

You can sync multiple things, but in order to see the Open Tabs across all your devices, select the Open Tabs checkbox. You’ll need to sign into the same Google account across the devices you want to enable this feature as well.

WordPress Dashboard Plugins to help with SEO and Performance

Now that we have a WordPress site running on Amazon AWS, let’s take a look at some plugins to help maintain the performance of the site and to help with SEO and other development tasks.

Jetpack – http://wordpress.org/extend/plugins/jetpack/
Is a free plugin created by the WordPress team that gives you enhanced features such as site stats and monitoring.  You’ll need a WordPress.com account which is free to connect this to your site.

Here are a list of Jetpack features I use.

  • WordPress.com Stats – this is a great addition.  Although I also run Google Analytics to be able to get more insight into analytics, this is a great secondary tool and gives you a nice chart on the dashboard.
  • Notifications – When you are logged into your WP site, you’ll see a dark grey navigation bar with drop down menu items.  On the right side, you’ll see a comment bubble, which shows you notifications from your site such as recent comments.
  • Sharing – this integrates popular sharing widgets into your WordPress site.  Easy social media integration!
  • Custom CSS – this is a great add-on that lets you make CSS edits to your site without having to  modify the core CSS of your theme.  Less errors!
  • Mobile Theme – easy way to get a mobile friendly site without having to use a custom theme or third party service such as Mobify.com.
  • Shortcode Embeds – very useful for embedding YouTube clips into your post without having to copy and paste long embed codes.
  • Infinite Scroll – although I don’t use this feature, I use a similar one through a 3rd party plugin called Lazy Load.  Using JQuery, it dynamically loads images as a visitor scrolls through my site, thereby lowering the initial load time of the site.
  • Enhanced Distribution – search engine notifications so they know when you post new content.
  • Mobile Push Notifications – download the WordPress App on your iOS device and manage your site on the go!

Google Analytics – http://www.google.com/analytics/
Free analytics?  Sign me up!  Seriously though, you can’t get any better than paying $0 for Google Analytics.  I’ve used multiple different analytics tools, but for the ease of setup, low cost of ownership and basic reporting, you can’t beat GA.

Download the Google Analytics Dashboard plugin http://www.ioncannon.net/projects/google-analytics-dashboard-wordpress-widget/ and set it up via OAuth.

Google Analytics Dashboard Widget
Google Analytics Dashboard Widget

If you want a simple way to integrate the GA tag on your WP site, use this plugin called Google Analytics for WordPress at http://yoast.com/wordpress/google-analytics/#utm_source=wordpress&utm_medium=plugin&utm_campaign=wpgaplugin&utm_content=v420

Another great plugin for WordPress Development is the WordPress SEO plugin http://yoast.com/wordpress/seo/#utm_source=wpadmin&utm_medium=plugin&utm_campaign=wpseoplugin It integrates with your posts and allows you to edit the SEO properties of a post to get optimal results with search engines.

WordPress SEO plugin
WordPress SEO plugin
WordPress SEO Plugin within a post
WordPress SEO Plugin within a post

The Debug Bar plugin provides you with a debug drop down in the WordPress top navigation.  It is very useful for debugging when viewing your site.

Debug Bar plugin on WordPress
Debug Bar plugin on WordPress

The W3 Total Cache plugin we installed earlier also has a useful dashboard widget that leverages the Google Page Speed API.

W3 Total Cache Google Page Speed Widget on dashboard
W3 Total Cache Google Page Speed Widget on dashboard
W3 Total Cache Google Page Speed Report
W3 Total Cache Google Page Speed Report

That’s it for the initial round of development plugins for WordPress.

 

Optimizing your WordPress site with W3 Total Cache to handle traffic

In my previous post, I walked you through setting up WordPress on Amazon Web Services (AWS), using an EC2 micro instance with Ubuntu and NGINX with a separate RDS micro instance running MySQL.

Recall the AWS Architecture image I created that showed how we were going to setup the WordPress site?

AWS Architecture
Proposed AWS Architecture

Each zone consists of an EC2, RDS, and S3 instance.  So let’s spin up an S3 instance in the Oregon zone to complete the package.  Create a new bucket and call it whatever you want, but it needs to be something that someone else in that zone hasn’t used.

S3 Instance
S3 Instance with a unique bucket

Now, there are multiple ways to utilizing S3 with WordPress, but we’re going to use the W3 Total Cache plugin to handle multiple things.  Before we can use the plugin, we’re going to have to make sure that everything on the server is setup to support it.

Before we begin though, let’s take a quick break and do a quick load test on the server, but we can’t test load on a blank WordPress site, so lets get some test blog posts.  I used this websites test posts and supplemented lots of images.  You can download my test post file here.  After you have imported the test posts and images, let’s head over to http://loadimpact.com and run a test on our server.  After the load impact test is finished, you can also run a test on http://blitz.io.

Initial Load Impact test on WordPress on AWS/NGINX
Initial Load Impact test on WordPress on AWS/NGINX
Blitz.io test on WordPress running on AWS/NGINX
Blitz.io test on WordPress running on AWS/NGINX

What do these tests tell us?  The first one from Load Impact shows us that even with 50 concurrent users on the site, the load time of the site remains consistently at around 400ms.  The Blitz IO test shows us the WordPress site can handle approximately 127k hits/day or about 1 user/sec.

Pingdom.com is also a very useful site.  In addition to their alerts, they have a great waterfall tool that shows all the elements on a page and how long each one takes.  http://pingdom.com.

Pingdom Waterfall on WordPress AWS/NGINX
Pingdom Waterfall on WordPress AWS/NGINX

Results for the WordPress site straight out of the box aren’t that bad.  We’ll run these tests again after we make some modifications to the site and see how they improve.

Step 1 – W3 Total Cache Plugin for WordPress

Login to your WordPress site by going to http://YOUR_EC2_ELASTIC_IP/wp-admin and click on Plugins from the left navigation.  Then click on “Add New” from the upper left of main screen and in the search plugins box, type in W3 Total Cache.  It should be listed as the first search result, go ahead and install the plugin and activate it.

Now, you’ll notice that on the left hand navigation, you’ll have a “Performance” section at the bottom.  This is the W3 Total Cache Plugin settings tab, so click on it and let’s configure it.

1) Page Cache – click on “enable” and select APC since we’ve enabled it on our servers.
2) Minify – click on “enable” and then for Minify mode, select Manual so we can specify the S3 bucket for a CDN.  For the Minify Cache Method, select APC once again since our server is configured for it. For HTML minifier, leave it at default and choose default for JS and CSS.
3) Database Cache – click on “enable” and select APC.
4) Object Cache – same as above.
5) Browser Cache – same as above.
6) CDN – click on “enable” and select “Amazon Simple Storage Server”
7) Under Miscellaneous – leave everything as default, but you might want to take advantage of using the Google Page Speed dashboard widget.  You’ll have to enable it on your Google account. Click on the APIs Console link from the plugin page and you’ll be taken to your Google account, find the Google Page Speed API and enable it.  Then copy the API key and paste it into the field.

When you hit save all settings, the page will refresh and you’ll see notices at the top.

W3 Total Cache Plugin notices
W3 Total Cache Plugin notices

The red one says that you must provide the Access Key, Secret Key and Bucket for the CDN.  So lets go back to your AWS Console to get that information.  When you are at your AWS Console, click on your name in the upper right and select Security Credentials.  Scroll down a little on the page and you’ll see the Access Credentials.

AWS Access Credentials
AWS Access Credentials

Back on your WordPress blog, click on the CDN link under the Performance section of your navigation.  Now fill in the Access Key ID, Secret Key, and Bucket Name.  I’ve selected to always use HTTP to reduce the SSL latency.  Now click on “Test S3 upload” and you should see a Test Passed message.

CDN Credentials
CDN Credentials

Click on Save all Settings and now let’s clean it up.

At the top of your W3 Total Cache page, you’ll see a bunch of notices.  Let’s take a look at these.

1) Export the Media Library – this will move all your images and media files that you uploaded to the new S3 bucket.  Click on it and new window pops up and you’ll see how many files are in your media library.  I had 8.

Media Library export
Media Library export

2) WP-Includes – go ahead and click on that button to generate a new pop-up window.  I have 298 files to move to the S3 bucket.

WP-Includes files export
WP-Includes files export

3) Click on Theme files and export those.  Click on Custom files, but you shouldn’t have any of those yet.  After you are done, you can hide the message.

4) Deploy – Click on this to make all the changes on your production site.  All links to images and external files will be modified in your post to reflect the S3 location.

Let’s do a sanity check by loading your website and viewing the properties of an image file.

Verifying the S3
Verifying the S3

Now, lets re-run those 3 tests.

1) http://loadimpact.com – the updated report shows that the W3 settings helped improve the response rate of the site when it was loaded with 50 concurrent users.  The response rate from 400ms after the initial install to 100ms.  A very good improvement in regards to the effort put in.

Load Impact test after installing W3 Total Cache
Load Impact test after installing W3 Total Cache

2) http://blitz.io – the updated report from Blitz.io shows the site is a bit more responsive and is able to handle about 157k hits/day, up from 128k hits/day before installing and configuring W3 Total Cache.

Blitz.io testing after W3 Total Cache
Blitz.io testing after W3 Total Cache

3) http://pingdom.com – the updated waterfall report shows that the site load time went from 1.16s to 2.01s.  This is due to the latency from S3 on the initial requests of the image and media files.  There is a trade off here, of the site being ultra responsive versus being resilient.

Pingdom Waterfall report after W3 Total Cache
Pingdom Waterfall report after W3 Total Cache

So by installing a simple WordPress plugin, we were able to optimize the site to handle more traffic and be a bit more resilient.  Next up, let’s take a look at enhancing the WordPress dashboard to make monitoring the site easier.