Configure NGINX to host both Backend and Frontend servers in one AWS EC2 instance and can be extendable to multiple use cases.

My problem: I want to build a website with Wordpress as the content management system. However, I don’t want to make use of its frontend template, instead, I will expose REST api from Wordpress and have a dedicated Frontend WebApp using Nextjs.

Below is the diagram:

Prerequisites:

• Basic knowledge of SSH into an EC2 server (or any other VPS) and Ubuntu commands, or ability to read documentation for ubuntu commands.
• I have a domain name mydomain.com
• I purchased a wildcard SSL certificate for my domain: *.mydomain.com
• I already setup SSL for my domain: *.mydomain.com
• I created manually an AWS EC2 instance.
• I have a Wordpress backend service to serve REST API at port 8000
• I also have a Wordpress CMS app running at port 8000
• I have a frontend app running at port 3001

*Please note that you’re freely to choose the port number.

I choose to use Nginx as a reverse proxy server to configure the domain.