Fast and easy “Down for maintenance” pages
Get cracking with Cloudflare Workers and Github Actions
Overview
If you haven’t completely caught up with serverless deployments, there’s a good chance that your website experiences a downtime during scheduled maintenance hours or during the brief time it takes to restart your application server during deployments. YMMV.
Problem Statement
Let’s put up a we’re “down for maintenance” page when the application cannot be served to end users.
So — instead of showing our users this —
Let’s make it feel like we’re in control of the situation by showing something like this —
Let’s make it happen!
We’d be using Cloudflare Workers and Github Actions to make this happen.
Step 1: Setup Cloudflare Worker
Cloudflare workers sit on the edge location and intercept every request before it hits the application server. We’ll make Cloudflare return a static HTML page hosted on the Cloudflare worker when we’re down for maintenance.
We don’t need to setup any new DNS entries for this exercise. Just ensure that the “proxy” mode is enabled on your domains’ Cloudflare DNS entry for this to work.
As a prerequisite, follow the steps mentioned in this fantastic post to deploy a static HTML page on a Cloudflare Worker. We’d be using this as our maintenance page.
Enabling Maintenance Page
If the application runs on emailapi.io change the worker route to emailapi.io/*. This will make Cloudflare Worker intercept all requests to emailapi.io and allow us to respond back with our static HTML maintenance page hosted on the Worker itself.
To disable the maintenance page click Edit again and change the route to any unused subdomain on your DNS.
I’ve used an unused subdomain called away.emailapi.io to point it to the worker. Since there’s no DNS entry for away.emailapi.io, nothing will open when you try to open this subdomain.
Step 2: Setup Github Action
Let’s now set the worker route programmatically using this Github Action (Disclaimer: I’m the author).
Add the following keys as Github project secrets. These are the same keys you grabbed from Step #1—
CF_EMAIL— Your Cloudflare emailCF_API_KEY— Your Cloudflare Global API KeyCF_ZONE_ID— Cloudflare Zone IdCF_ROUTE_ID— Cloudflare Route IdCF_WORKER_NAME— Cloudlare Worker name
Adding them as Github secrets ensures we don’t mistakenly expose these private keys via VCS like Github.
Now Github Actions/workflows will have access to these secrets via {{ secrets. }} variable.
Supply these secrets to the Github action aakashlpin/cloudflare-worker-route-update and simply update the route pattern as desired. The gist below is sample code from EmailAPI’s Github action workflow.
Thanks to Github Actions and Cloudflare we have now programmatically put up a down for maintenance page for free without showing our users that infamous Cloudflare 5xx page. 🎊
Was this helpful? Let me know in comments. Feedback welcome!
On a side note:
I’ve been working on emailapi.io to help ease my email workflows.
EmailAPI enables powerful extensions to your Gmail account with features like:
- Extracting data from the email body and attachments(coming soon) into HTTP endpoints.
- Automatically unlocking emails with password protected PDFs
The code is completely Open Source and I’ve written an exhaustive step by step guide to set it up for yourself. Visit this Github link and get started.
Watch these 2 videos quickly to get a sense of what emailapi is all about —
Thank for reading! Have a good day :)
