h1

Unifying your Web Applications with a common look through Apache Server Side Includes (SSI)

October 17, 2011

Most larger organizations have a set of web applications exposed to their customers. Some of those applications are grown in-house, some have been purchased. Each application has it’s own release cycle and therefore it becomes quite a bit of a problem to make common changes to all applications. Say your company has a new logo or is adding one more application to the top and bottom navigation of all sites, you end up having to touch each application and make the required modification in the header and footer, go through a testing cycle and redeploy all applications at the same time in order to make sure the site looks consistent.

In the fast moving world where your main website is in a content management system and the header and footer of the site can be modified by the content team at any given time the approach above seems a bit out of date and cumbersome. There are a couple of different solutions pro work around this problem. I’d like to present one that has a minimal impact on all the systems in question and provides the ability to quickly change the header and footer of your site:

The following image illustrates a common environment that can be found in an enterprise:

or a deployment where the CMS is the master and adds all other applications on the fly:

The common header and footer is served from each application individually. To modify the common look, all applications have to be touched and reloaded

The solution proposed here is to use Apache Server Side Includes in order to inject the header and footer from the CMS directly into all applications. Each Application returns an SSI statement instead of the actual header:

the HTML returned would look something like this:

<html>
<head>
</head>
<body>
<!--#include virtual="/header.html"-->
... normal code
<!--#include virtual="/footer.html"-->
</html>

By enabling SSI includes for the proxied application through a change in the apache httpd.conf such as the following

ProxyRequests Off
ProxyPass /shop http://shop:8080/shop
ProxyPassReverse /shop http://shop:8080/shop
<Proxy *>
SetOutputFilter INCLUDES
</Proxy>

the request from the apache server will be sent and processed by the 3rd party application and after it is returned the apache server will then use mod_includes to inject the contents of /header.html and /footer.html into the returned page. The header.html and footer.html file can also be created by the CMS and allow instant updates to the header and footer throughout the unified site to take place without any changes to the other applications.

Note: SSI can also be turned on in Apache Tomcat to run the individual applications for test purposes without the full chain of servers as in the final deployment. If SSI is enabled in tomcat then the include will happen directly on the Tomcat side of things. This however should be turned of for any test/dev/production environement where the full chain of servers is available to avoid the SSI statements to be executed on the wrong machines and introducing additional load on the application servers.

Due to the SSI includes, the Apache server is not able to figure out the content length nor the expiration date of the page – it may be necessary to use mod_expire in Apache to enable caching control.

Conclusion

The approach to use Apache Server Side Includes (SSI) to handle the unification of the appearance of your web properties is simple. It does not introduce an additional single point of failure due to the fact that the includes are injected on the existing Apache servers in the infrastructure. A caching mechanism for header/footer.html can be employed to make sure the CMS serving those files does not become a single point of failure.

As always, I’d be happy to hear your comments

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: