Successful launch of a website doesn’t mean the work is all done. But it should constantly evolve to reflect improvements and new ideas. One of the main concerns when doing some considerable upgrades to a live website is how to test the upgrades on the live environment before the launch.
We also need to consider the visitors, as they don’t want to see what is going on behind the scenes. Also if they are allowed access to the main site, we are opening a wide security issue there. So we need to show them a maintenance page. The below solutions applies to webservers that supports mod_rewrite using .htaccess files.
Option 1
We will start with a simple technique to show a maintenance page. To redirect all users to a simple maintenance.html page place this snippet in the .htaccess file. Put both these files in the same folder.
# Redirect the all users to maintenance.html
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/maintenance.html$ [NC]
RewriteRule ^(.*)$ /maintenance.html [R=302,L] Here the rewrite engine is enabled and all the requests are redirected to the maintenance.html page. But you may notice the “!” symbol in the “!^/maintenance.html$“, which specifies, redirect to the maintenance page, only if the actual request is NOT to the maintenance.html. This is to avoid the request to fall in to an infinite request loop. Please note that we are using a 302 redirect, to mark it as a temporary redirect. We may also use 307 instead of 302.
Option 2
Option 1 is useful only if the maintenance page is a simple page with basic styles. But in case if we need a bit more control over the maintenance page including usage of custom style sheets and images etc., it would be nice to place those in a separate folder, instead of mixing with our actual assets. The below code in the .htaccess file will allow us to do that.
# Redirect the all users to /maintenance/index.html
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/maintenance/(.)*$ [NC]
RewriteRule ^(.*)$ /maintenance/index.html [R=302,L] Here all the requests will be redirected to the /maintenance/index.html. We may place all the assets to use in the maintenance page in this folder, like the style-sheets, images etc. This will guarantee that all the code related to the maintenance page is placed in a separate folder. Obviously the .htacces file needs to be placed in the parent or root folder where we place the maintenance folder. In addition to this, if you need access to the main asset files like the images and style-sheets, we may use
# Redirect the all users to /maintenance/index.html
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/maintenance/(.)*$ [NC]
RewriteCond %{REQUEST_URI} !.(css|gif|jpe?g?|png|ico) [NC]
RewriteRule ^(.*)$ /maintenance/index.html [R=302,L] Option 3
Both the above options will redirect all the requests to the maintenance page. But our aim is to test the upgrades and modifications on the live environment while all the visitors are redirected to the maintenance page. This is implemented through IP restrictions.
# Redirect the all users to /maintenance/index.html, except the ones from the specified IP address.
RewriteEngine On
RewriteCond %{REMOTE_ADDR} !^111.222.333.444
RewriteCond %{REQUEST_URI} !^/maintenance/(.)*$ [NC]
RewriteRule ^(.*)$ /maintenance/index.html [R=302,L] Here all the requests, except the those from the specified IP address will be redirected to the /maintenance/index.html. If we replace the above IP address with yours, we will be able to test the updates on the live environment.
But there are occasions where we need more than one IP address to access the website, for example the client might need to have a look into the new additions. We can add these IP addresses like this:
RewriteEngine On
RewriteCond %{REMOTE_ADDR} !^111.222.333.444
RewriteCond %{REMOTE_ADDR} !^112.222.333.444
RewriteCond %{REQUEST_URI} !^/maintenance/(.)*$ [NC] What if the actual website uses some rewrite rules? No problem, just stick those under the above rules.
RewriteEngine On
RewriteCond %{REMOTE_ADDR} !^111.222.333.444
RewriteCond %{REMOTE_ADDR} !^112.222.333.444
RewriteCond %{REQUEST_URI} !^/maintenance/(.)*$ [NC]
RewriteRule ^(.*)$ /maintenance/index.html [R=302,L]
# Place the actual rewrite rules here As always, take a backup copy or rename the actual htaccess file. Then once the site is ready to go live, simply overwrite or rename it.
Happy coding!
