Using Cloudfront as a reverse proxy
Author
Date
Dec 25, 2023
Tags
Engineering
Houston (ChatGPT), we have a problem.
I have three websites. I need to host them. On the same domain. What do I do?
ChatGPT responds, DNS you idiot. Thats not a problem.
”Ah”, I say totally forgetting that I can have subdomains. One subdomain per website. I open Cloudflare, navigate to the DNS tab, Add CNAME for my subdomains and link them to the correct websites and hit save.
“Time to test.“, I say. I navigate to the sites and guess what! INVALID CERTIFICATE.
Whoops. Did someone forget that SSL is a thing, and it needs the correct certificate for the correct domain? Yes, I sheepishly respond to my mind cursing at myself. I generate the certificate. Go ahead and update them in the correct locations. Ensure its correctly setup and then test again. It works. I breathe a sigh of relief. Finally, its done. I ping the team, Hey folks, “Its done”.
Team replies back, “Umm, that's not what we had said. We said three websites on same domain. No subdomains.”. “Hmm”, I say with an indifferent face with mental agony that the task that I had done is not done and now I need to spend more time to get it done while the other things are piling up.
“Welp, time to google”.
What can I do to solve this. I need to serve my homepage on /. Serve my blogs on /blog and then serve a very special website on @. Something appears in the periphery of my eye while I navigate the maze of search engine cached response hoping to find a one stop quick solution to my agony. I read Reverse Proxy.
What is a Reverse Proxy?
I’ll let the pros answer it. Here’s the link. In simple terms, a reverse proxy is a server that will sit in between your actual server and the client. What I needed to do was to implement a server that gets all the requests and then forwards them to the correct website.
Do I really need to?
Lol no. Cloudflare IS a reverse proxy. I navigate to the DNS tab again and open the record for my domain. I select Proxy through Cloudflare and hit save. Then I navigate to Workers and add workers. These workers would intercept my requests. I would then make API calls to the different websites and return the responses back. This is pretty easy. I smile. Finally, the task is done.
90 days later.
I get an alert on Slack. Sire, our website is down. Shaken at 6:00 am, I sheepishly open the website to be greeted with Error 526. Invalid SSL certificate.
I cry. I open my website hosting service. I go through the docs. I research and find
OK. Now what do I do? From what it looks like, when Cloudflare starts proxying, it caches the SSL certificate while sending requests to the origin server. Webflow, our hosting service refreshes their SSL certificates just before they expire. This doesn't get updated at Cloudflare. That means every 90 days, I will end up at Error 526. Fine, I say. I switch the proxy off. Make a call to the website. Switch it back on. There you go. Problem skipped for 90 more days. I set up a calendar event for the coming 90th day mark to switch off and switch it back on. The age-old solution to everything.
89 days 11 hours and some minutes later
Alert, website is down. I am pissed. This is 12 hours before my calendar event. This is not going to work. I need to find a better solution. One that does not involve me getting alerts at random hours of the night and possibly eliminates my calendar event. I switch off and switch on and continue ahead with my day hoping that in future I might solve this.
Cloudfront and a random thought.
I am now working on serving videos on our platform. I am not a madman (hopefully). So, I am using a CDN. Cloudfront is serving my videos to ensure lower latencies and wait times. How does a CDN do that? Cache. Caches at edge locations closer to the user will serve the content quicker and then over time refresh with newer data. This will ensure my servers and hosting don’t suffer a heavy load that will take my entire application down. (Foreshadowing for a totally different event that I dont plan to share)
I get the alert that blows my fuse off. Website is down. However, this time around I had a Eureka moment. What if my CDN is my reverse proxy?
What exactly is a CDN?
As Cloudflare describes
A content delivery network (CDN) is a geographically distributed group of servers that caches content close to end users. A CDN allows for the quick transfer of assets needed for loading Internet content, including HTML pages, JavaScript files, stylesheets, images, and videos.
If you think about it, a CDN gets the request. Checks its cache. Fires a request at the actual server. Gets the data, caches it, sends it to the client. A CDN can connect to multiple origin servers. Its a means to protect your server from high repetitive loads that it doesnt need to handle while also improving load times.
If you think more about it, thats exactly the role of a Reverse Proxy. So, what if I use my cloudfront distribution and figure out a way to redirect traffic to the actual servers and later on serve my cached response. This way I wouldnt have to configure my origin servers with any SSL certificate at all. I can just keep on using my CDN to serve everything. All configurations will be handled at my CDN.
Well then, how would I set up Cloudfront as my reverse proxy?
Step 1: Create a Cloudfront distribution
Navigate to Cloudfront on AWS console and create a distribution.
In the creation form, Add the URL of your first website in the origin domain field. This is the website that would be loaded if no other website path matched.
Once you have added the “Origin”, configure the cache behaviour. In most of the cases, you’d want your content to be cached.
For custom domains, you will want to generate and assign a custom SSL certificate.
Add a CNAME record in your DNS service to point to the Cloudfront Distribution. For example
Deploy your distribution
Step 2: Add more origins
Open your distribution and add more origins.
This will open up a similar menu to when you created the distribution. Add your second and third site one by one and hit save
Step 3: Add behaviour
Now its time to add the rules. We need to decide which origin needs to be called for which route.
For example, /blogs should reach site A, rest should reach site B.
Navigate to create behaviour and add one
Path pattern governs which paths should follow this behaviour.
Origin is a dropdown allowing you to select one of the previously added origins.
Configure your second and third website accordingly with its appropriate caching behaviour and hit save. This should trigger a redeployment of your distribution.
Step 5: Dance
Test your distribution once and once you have confirmed that its working, its the time to
Is it a good solution though?
Honestly, I dont know. It came as a random thought to fix a unique issue I was facing. In most of such cases, you might not need this. It is a really interesting feature though that Cloudfront being a CDN has. It might help you, it might not.