Phase 4 : Main_Bank_App_Frontend Deployment

Objective

Deploy the frontend service of the Main Bank App using Docker, GitHub Actions (CI/CD), and Argo CD. Ensure environment variables and configurations are securely set, and the app is version-controlled and production-ready.

Prerequisites

Before deploying the frontend, the following items were in place:

Frontend Project Files

The frontend project includes the following critical files/folders:

File/Folder	Purpose
`public/`	Contains the static assets and HTML file for the app
`src/`	Contains React/Vue/Angular components and logic
`.env`	Stores environment-specific variables (API endpoint, etc.)
`.dockerignore`	Excludes unnecessary files from the Docker image
`.gitignore`	Prevents sensitive/unwanted files from being tracked by Git
`Dockerfile`	Instructions for containerizing the frontend app
`package.json`	Lists dependencies, scripts, and metadata
`package-lock.json`	Locks dependency versions

frontend folders.png

🔄 GitHub CI/CD Workflow File

File: .github/workflows/cicd.yaml

Purpose: Automates Docker build, push to ECR, and deployment syncing with Kubernetes via Argo CD
This file :
- Use GitHub Secrets for AWS credentials and ECR repo
- Build the frontend Docker image
- Push the image to AWS ECR
- Clone and edit the Kubernetes manifest repo to update image tag
- Sync with Argo CD (optional step via webhook or manifest change)

Objective

Prerequisites

Frontend Project Files

🔄 GitHub CI/CD Workflow File

📌Deployment

1. Initial Setup: GitHub Repository