I have a scenario where I have a client and a server hosted in two Docker containers on the same EC2 instance. The client is developed using React.js and runs on container port 3000 with host port 3000, while the server is built with Node.js and runs on container port 8000 with host port 8000.
Both the client and server images are stored in Amazon Elastic Container Registry (ECR), and they are hosted in an Amazon Elastic Container Service (ECS) cluster managed by task definitions.
For the existing users, I've configured Route 53 and an Application Load Balancer (ALB) to ensure that both frontend and backend requests are sent to the correct target groups. The React app communicates with the Node.js server through requests to x.com/api/. This is achieved through an ALB listener rule that listens for the "Host Header" as x.com and includes a route path of */api.
I want to implement Blue/Green Deployment, which means I need to have two identical apps (both frontend and backend) running. After testing the new version, I can switch the traffic from the old version to the new version. So users will keep using x.com without noticing a downtime.
Therefore, I need to deploy a new version of my application, which involves code changes in both the client and server components. To do this, I created a new EC2 instance with the new versions of the client and server, both running on the same ports (3000 for React.js and 8000 for Node.js).
After adding new target groups for both the new frontend and backend on the ALB, any API requests made by the new React app on the new EC2 instance still go to the previous server. This happens because the requests are sent to x.com/api, which is controlled by the existing ALB listener rule that listens for the "Host Header" as x.com with a route path of */api.
In the frontend, there is a baseUrl environment variable that can control the api traffic. Now it is hardcoded as x.com, and it is deployed within the ECR Docker Image. I don't think it is a good idea to change it to something else and change it back before deploying to production.
What steps should I take to enable the new frontend to communicate with the new backend? I want to ensure that the new versions of both my client and server can work together effectively.
I think what you're looking for is "weighted" target groups for the backends; blue/green deployments being one of the apparent reasons behind their introduction. This might help:
https://aws.amazon.com/blogs/aws/new-application-load-balancer-simplifies-deployment-with-weighted-target-groups/