As my forum, LotusElan.net, has grown and gone international, I have had to focus on performance. This is especially true for image attachments and avatars. My forum is an automotive forum and it is not unusual for us to have topics with 10 to 15 image attachments. For example here is a typical posting: What Does Your Elan Look Like?
I had looked at a variety of items, but kept coming back to a CDN. After investigating the cost and complexity, I decided to install Amazon’s CloudFront.
Why CloudFront?
- Inexpensive (Costs about $2/month for a million images served)
- Nice footprint of servers around the globe.
- Uses a Server of Origin for loading assets
The use of a Server of Origin is what makes this work. No more manual loading or sending files to Amazon S3. Just point CloudFront at a server and it will get the files and load them into the CDN as it needs the files.
Overview of the Change
We will be pointing all image attachments and avatars to CloudFront. We point CloudFront at the phpBB forums. When a page needs to load up images attachments, it calls CloudFront. If CloudFront has the image in cache, it serves it up. If the image is not in cache, it goes to the server of origin, your phpBB forum, and pulls the image, serves it up and caches the image for future use.
One of the drawbacks of phpBB is the use of a file.php and query strings for all images and avatars. This approach prevents CDNs and browsers from caching the files. It also hinders SEO and easy implementation of image gallery tools like colorbox and fancybox. This mod will convert all image attachement files to standard image names and hides the file.php?id=12312312&mode=view&t=0 from the user.
We will create a new file format for all the images. The format will be:
http://{your cloudfront domain name}/amaz-cdn-image/{attachment_id}/{thumb or large size}/{file_name}
The html variables are:
- Your cloudfront domain: domain name setup by Cloudfront.
- attachment_id: this is the file ID assigned to all images by phpBB
- thumb or large size: The thumb or large size is controlled by having a 1 or 0 in the [thumb or large size] option. A zero will show a large image. A 1 will show the thumbnail of the image.
This resulting image file will like:
http://1234abc1234.cloudfront.net/amaz-cdn-image/21898/1/myimage.jpg
We will use .htaccess rewrite rules to convert this file format to the traditional download/file.php? format.
Installation
Attached are the mod files. Please pay attention to the notes section. This is not a complicated installed, but does require you to enter your CloudFront domain name in the code in several places and to setup .htaccess rules to point to your phpBB install location. If you miss this, it will not work.
Download Files
To See It In Action:
Here are the various URLs used by my website:
Original File Name:
http://www.lotuselan.net/forums/download/file.php?id=27195&mode=view&t=1
.htaccess change only filename:
http://www.lotuselan.net/lel/27195/1/DSC_0045.JPG
CDN change with .htaccess:
http://d3tegsogbimb9n.cloudfront.net/lel/27195/1/DSC_0045.JPG
I use a cname with my CDN and here is my final:
http://images.lotuselan.net/lel/27195/1/DSC_0045.JPG
Here is the same name with the thumb indicator changed to a 0 for full size.
http://images.lotuselan.net/lel/27195/0/DSC_0045.JPG
For any questions or support please use the phpBB support forum.
No Comments