Deploying a Scalable, Secure Web App on AWS with Full CI/CD & Observability Part 1

Project Goal (Why It Matters to a Business):

Use AWS, GitHub Actions, Docker, and Terraform to create a scalable, production grade web application that demonstrates how DevOps enhances user experience, security, cost effectiveness, and deployment speed.

Project Setup:

• Frontend and backend clones and Dockerization
• Create AWS infrastructure (EC2, ECR, IAM) using Terraform.
• Move the application from CI/CD to EC2.
• Use GitHub Actions to set up a CI/CD pipeline.

• Establish cost controls and logging.

• Step 1
  Clone the Repo & Open in VS Code
  Run this command:
  cd ~
  git clone https://gitlab.com/cloud-devops-assignments/spring-boot-react-example.git
  cd spring-boot-react-example
  code .
  

• Step 2
  I will create the backend and frontend directories now.
  

• Step 3
  I’ll be organizing the project by placing each file and directory into the appropriate backend or frontend folder. Additionally, I’ll create separate Dockerfiles for both the backend and frontend to ensure each part of the application can be containerized effectively.

I accidentally deleted the backend folder while organizing files and setting up the Dockerfile. Thankfully, I hadn’t committed the changes yet, so I can either recover it or start fresh. In this case, I’ve decided to start over by deleting the spring-boot-react-example folder and re-cloning the project. Just close VS Code, open Git Bash, and run the commands shown in the image below.

Now I’ll go ahead and manually open the project folder in VS Code and follow the initial setup steps:

• File → Open Folder → spring-boot-react-example Everything is now set up. Just a heads-up, you might run into a few errors as you go, and some may require you to create extra files. Don’t worry, I’ll walk you through what each file does, why it’s needed, and how it fits into the project.

-Step 4
Remember I created the dockerfiles for both the backend and frontend. And also the docker compose yaml file as well as shown below.



While everything is being set up, Make sure your Docker Desktop is running.

• Step 5: Run these commands docker-compose build frontend docker-compose up Oops! We got an error while running: Docker-compose up. The Reason Why This Occurs:
• My backend and the frontend maven-plugin is used by the Spring Boot application, which automatically:
• Node.js + npm is downloaded within the Docker container.
• The React frontend is then attempted to be built as part of the MVC clean package procedure.

However, the npm.tar.gz file is either corrupted or incomplete (most likely as a result of Docker's sluggish or unreliable network).

What should we do?
Build the frontend manually (before backend build).

Now for backend build commands:

Oops! We ran into another error. This one’s related to Node.js being run inside Maven it doesn’t allow the --openssl-legacy-provider flag, which causes the build to fail. Since the frontend is now decoupled and handled separately, I removed all the frontend related plugin blocks from the pom.xml, keeping only the necessary configurations for the Spring Boot backend. This helps streamline the build and avoid unnecessary errors.

• Step 6
  Run this command: docker-compose build
  
  Both Frontend and Backend are built successfully.

• Step 7
  Run this command: docker-compose up
  
  This is an error port, Port 8080 on my host machine is already in use. We need to free up port 8080.
  
  What this means is the frontend is working fine but the backend containing is not running. Most like because Docker couldn't bind port 8080, which is probably already used by something else on your system.
  Check What's Using Port 8080 (on Windows)
  Open PowerShell or CMD and run:
  
  That last number is the PID (process ID) using the port.
  Now find the program:
  
  Then force stop it (if safe):
  

• Step 8
  
  Both the frontend and backend are working.

Access the Backend
Open your browser and go to: http://localhost:8080/login

A Spring Boot welcome Login page

Access the Frontend
Since your frontend container maps port 3000 → 80, open:

Connect frontend to backend by adding a proxy in frontend/package.json: proxy: http://backend:8080
This works inside Docker Compose if the service name is backend.

• Final Step: Push the Docker Images to Docker Hub First, you’ll need the Docker images, which contain all the necessary components. You can see the details in the image provided:
• Next you are ready to push to dockerhub so everyone can see your repo. Repeat the same command for the backend as well. Proceed to your dockerhub where you are logged in and check the images are in your repo. Great job! This is a big step.

Next we will Deploy to the Cloud (AWS ECS or EC2)

Stick around more to come in the next update!.

Summary:
I started by cloning a Spring Boot + React project and restructuring it into frontend/ and backend/ directories. I made docker-compose.yml to run the entire application locally and wrote unique Dockerfiles for both, optimizing them with multi-stage builds. I encountered usual DevOps challenges along the road, such as permission failures, out-of-date Babel settings, JSX build problems, and missing dependencies. I resolved each of them by adjusting configuration files, upgrading dependencies, and clearing out Maven plugins. I tagged and submitted the images (busadev/react-frontend and busadev/react-backend) to my Docker Hub once both services were operating without a hitch in Docker. I learned a lot about debugging, improved my containerization skills, and gained practical experience in organizing a DevOps process thanks to this project. It's a modest but significant step in the direction of developing cloud-deployable, production-ready apps.