Path-Based Routing with Reverse Proxy: Serving Multiple Websites from One Domain

Hey developers 👋 In our development journey, we've all experimented with domains, subdomains, routes, reverse proxies, and numerous DNS records. However, there's an intriguing issue: what if you'd like a distinct website to display at a particular path of your existing domain? Imagine I have a pastry business called My Pastries 🍰.

My principal website is located at mypastries.com, which is built with Next.js for server-side rendering, outstanding performance, robust SEO, and ample flexibility to customize everything. Everything is going smoothly. Then, I decide to establish a blog. Not only is this because everyone constantly says content is king, but also because I wish to publish useful content, establish topical authority, attract organic traffic, and provide the website with additional reasons to exist beyond merely showcasing our cakes. So, I deploy this blog separately. My infrastructure now resembles:

172.1.0.1 → Main Next.js website

172.1.0.2 → WordPress/CMS blog

But here's the interesting part. I don't want users to visit blog.mypastries.com; instead, I want them to visit mypastries.com/blog. If they open an article, like mypastries.com/blog/how-to-make-the-perfect-croissant, I want the second server to manage that request. Yet, I still want the browser to display mypastries.com/blog/how-to-make-the-perfect-croissant without any redirects, separate domains, or making users aware of the blog's actual hosting location.

This is where reverse proxies and path-based routing come into play. Here's how to serve two completely different servers as one website using reverse proxies and path-based routing.