feat: add CI/CD pipeline and Docker configuration for deploying Budget Tracker FE to EC2

Author: Dilusha-Ranasingha

.github/workflows/cicd.yml

@@ -0,0 +1,40 @@
+# .github/workflows/cicd.yml
+
+name: Deploy Budget Tracker FE to EC2
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Login to Docker Hub
+        run: docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build Docker Image
+        run: |
+          docker build \
+            --build-arg VITE_EC2_BACKEND_URL=${{ secrets.VITE_EC2_BACKEND_URL }} \
+            -t dilusharanasinghe/budget-tracker-fe:latest .
+
+      - name: Push Docker Image
+        run: docker push dilusharanasinghe/budget-tracker-fe:latest
+
+  deploy:
+    needs: build
+    runs-on: [aws-EC2-budget-tracker-frontend]
+    steps:
+      - name: Pull Docker image
+        run: docker pull dilusharanasinghe/budget-tracker-fe:latest
+
+      - name: Remove old container if exists
+        run: docker rm -f budget-tracker-fe-container || true
+
+      - name: Run container on port 3000
+        run: docker run -d -p 3000:80 --name budget-tracker-fe-container dilusharanasinghe/budget-tracker-fe:latest

Dockerfile

@@ -0,0 +1,25 @@
+# Dockerfile
+
+# Step 1: Build the React app
+FROM node:20 AS build
+
+WORKDIR /app
+
+# Copy project files
+COPY . .
+
+# Pass environment variable at build time
+ARG VITE_EC2_BACKEND_URL
+ENV VITE_EC2_BACKEND_URL=$VITE_EC2_BACKEND_URL
+
+# Install dependencies and build
+RUN npm install && npm run build
+
+# Step 2: Serve with NGINX
+FROM nginx:alpine
+
+# Copy build output to nginx html folder
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Replace default nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf

@@ -0,0 +1,13 @@
+# nginx.conf
+
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html index.htm;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+}