Cloudflare: No Maintenance Mode Still a Maintainace Mode
There are many cases where the website should be temporarily brought down like Moving server, reboot, software upgrade that requires an outage, you name it. It would be natural and logical if Maintenance Mode could be turned on for the customer visiting the website should display a static landing page to all users trying to access the website.Cloudflare by default do not provide any maintainace mode.
But we can create our own maintenance mode easily with help of CloudFlare workers feature.
In Feb 2018 Cloudflare announced the general availability of Cloudflare Workers, a new feature which compliments the existing Cloudflare product which permit the execution of JS(JavaScript) at the edge of Cloudflare’s CDN prior to the request hitting your own web server.Basically, Cloudflare Workers provides a lightweight JavaScript execution environment that allows developers to augment existing applications or create entirely new ones without configuring or maintaining infrastructure.
Let see how Cloudlare workers could be used to respond any request during maintaince period , and display a static maintainance page while a website has been taken offline for some Maintenance work.
For CF workers to work we need to create a simple rule which intercept the request, if the contents of the cloudflare’s connecting ip header is a trusted IP address then allow them to website for testing purposes and if not then show the static Maintenance page. (replace XXX.XXX.XXX.XXX with your trusted ip and mail@example.com with your mail id. )
addEventListener("fetch", event => {
event.respondWith(fetchAndReplace(event.request))
})
async function fetchAndReplace(request) {
let modifiedHeaders = new Headers()
modifiedHeaders.set('Content-Type', 'text/html')
modifiedHeaders.append('Pragma', 'no-cache')
//Return maint page if you're not calling from a trusted IP
if (request.headers.get("cf-connecting-ip") !== "xxx.xxx.xxx.xxx")
{
// Return modified response.
return new Response(maintPage, {
headers: modifiedHeaders
})
}
else //Allow users from trusted into site
{
//Fire all other requests directly to our WebServers
return fetch(request)
}
}
let maintPage = `
<!doctype html>
<title>Site Maintenance</title>
<style>
body { text-align: center; padding: 150px; }
h1 { font-size: 50px; }
body { font: 20px Helvetica, sans-serif; color: #333; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
a { color: #dc8100; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
</style>
<article>
<h1>We'll be back soon!</h1>
<div>
<p>Sorry for the inconvenience but we're performing some maintenance at the moment. If you need to you can always <a href="mail@example.com">contact us</a>, otherwise we'll be back online shortly!</p>
<p>- The Team</p>
</div>
</article>
`;Steps :
- From Cloudflare admin dashboard select Workers. Once open, Select Launch Editor.
2. Add the above rule into the script body and save.
3. Select the Routes tab and individually add the routes you want to display the maintenance page. (Note: We can also create exceptions as wild card entry)
The Maintenance page will display to everyone accessing website , while you are still able to access due to your white-listed ip address.
Now you can only have to toggle route button to enable Maintenance page whenever required.
