Aliasing images to a remote server with .htaccess

When maintaing a website for a customer where there are several gigabtyes of product images that change frequently, it can be annoying to have to keep a local copy of all those images, particularly when bandwidth usage is taken in to consideration. Using .hatccess files on Apache with a clever use of rewrite rules, it is possible to still reference the images files as if they are on the local webserver but they are really served off the remote server. This makes the local development copy of the website look just like the remote one without having to worry about keeping the images in sync. This post looks at how to do this.

mod_rewrite in the Apache web server allows you to rewrite URL requests to either a different local filename, or to a remote address either as a permanent or temporary redirection. Rewriting requests to local files is useful when running everything through a front end controller when using an MVC system, and to remote adress when redirecting from an old domain name to a new one. Remote rewrites are also useful for the above mentioned use where you want to rewrite local requests to a remote server.

Let's say for example that our product images are stored in /product_images/ under the publicly accessible part of the web root, and the remote website address is www.example.com. We could then add the following to the .htaccess file for this virtual host on our local development server:

RewriteEngine On
RewriteRule ^(product_images/.*) http://www.example.com/$1 [L]

The "RewriteEngine On" line switches on the rewrite engine.

The second line tells Apache to redirect all requests for URLs starting with product_images/ and followed by any sequence of characters to http://www.example.com/ and then to append the "product_images/" etc to the end. The [L] flag at the end tells the rewrite engine to stop processing any further rewrite rules that may come after this one.

This redirection process is transparent to the end user looking at the page in their browser as the images will show up as normal; it will just require a double request - 1st to the local server and 2nd to the remote - but for development purposes this is acceptable.

Checking the Apache log files you'll see something like this:

192.168.1.198 - - [14/Apr/2008:13:58:32 +1200] "GET /product_images/example.jpg HTTP/1.1" 302 343 "-" "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506)"

I have bolded the filename that was requested and the 302 response code. A 302 response code indicates a temporary redirect. In the example above, the web browser would first request the image file from the development server, get a 302 response and then request the image from http://www.example.com/product_images/example.jpg

You can add as many extra rules or modify the example above to include additional directories as required. For example, to do the above for both product_images and category_images you could do this:

RewriteEngine On
RewriteRule ^(product_images|category_images/.*) http://www.example.com/$1 [L]

This would then apply the rule for both directories.

Conclusion

It's very easy to add rewrite rules in Apache to serve image files from a remote address even when making the request locally as shown in the examples above. This can be very useful for developing or maintining a website because it means you don't need to be always synchronising your local images directory with those of the remote server.