Merge pull request #66 from UTSC-CSCC01-Software-Engineering-I/feat/deployment

Feat/deployment

Author: shubhmgrg

.github/deploy-docker.yml

@@ -0,0 +1,36 @@
+name: Deploy App and Test
+on:
+  workflow_run:
+    workflows: ["Publish Project Backend to Dockerhub", "Publish Project Frontend to Dockerhub"]
+    types:
+      - completed
+  workflow_dispatch:
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    env:
+      GIT_TAG: ${{ github.ref_name }}
+    steps:
+    - name: SSH into VM and deploy
+      uses: appleboy/ssh-action@v1
+      with:
+        host: "15.222.16.78"
+        username: ubuntu
+        key: ${{ secrets.KEY }}
+        port: 22
+        envs: GIT_TAG
+        script: |
+          cd epiready
+          git fetch --tags
+          TAG_NO_V=${GIT_TAG#v}
+          export TAG_NO_V
+          echo "Deploying version: $TAG_NO_V"
+          git checkout $GIT_TAG || true
+          docker compose pull
+          docker compose up -d
+          echo "Running Cypress tests in Cypress container..."
+          docker compose run --rm cypress
+          echo "Running performance test on deployed website..."
+          sudo apt-get update && sudo apt-get install -y apache2-utils
+          ab -n 100 -c 10 https://epiready.taggit.tech/

.github/workflows/deploy-docker.yml

@@ -0,0 +1,126 @@
+# 🧱 CI/CD System Design Document
+
+**Project**: **Epiready**
+**Date**: 2025-07-28
+**Target Environment**: AWS Lightsail Ubuntu 24.04
+**Version**: 1.0
+
+
+---
+
+## 1. 🔍 Overview
+
+The CI/CD pipeline roughly performs 6 major steps:
+
+* Uses NGINX as reverse proxy to serve website through HTTPS
+* Uses PostgreSQL container with named volume to keep data stored in the VM
+* Uses docker compose to run the docker containers in an isolated environment
+* Uses GitHub Actions for CI/CD automation(tests, building images, deployment)
+* Image hosting on DockerHub
+* Post-deployment E2E testing with Cypress
+
+
+---
+
+## 2. Services Used
+
+* **Web Hosting:** AWS Lightsail
+* **SSL Cetificate**: Let's Encrypt, Certbot(for renewing and getting SSL certificate from Let's Encrypt)
+* **Storing Images**: Dockerhub
+* **Reverse Proxy**: NGINX
+* **Database**: PostgreSQL
+* **e2e Testing**: Cypress
+* **CI/CD Automation**: Github Actions
+* **Performance Testing**: ApacheBench
+* **Container Management**: Docker compose
+
+
+---
+
+## 3. 🧹 Components
+
+### 3.1 Frontend
+
+* Built using vite build through Dockerfile and pulled from Dockerhub
+* Serves static assets via NGINX
+* Communicates with backend over HTTPS
+
+### 3.2 Backend
+
+* Exposes RESTful API (HTTPS only)
+* Connects to PostgreSQL database
+* Secured via environment variables and CORS policies
+
+**Dependecies:** PostgreSQL
+
+### 3.3 Database
+
+* PostgreSQL 14 (Docker)
+* Persistent volume for no data loss between deployments
+
+### 3.4 NGINX
+
+* Acts as reverse proxy
+* Handles HTTPS using Let's Encrypt or self-managed certs
+
+**Dependencies:** Frontend, Backend
+
+
+---
+
+## 4. 🔒 Security
+
+* All secrets (SSH key, DockerHub credentials) stored in GitHub Secrets
+* HTTPS enforced via NGINX with certbot and Let's Encrypt
+* CSRF & CORS handled by backend
+* No direct ports exposed
+* All the keys for backend are stored in the epiready-backend/.env file in the vm for adding multiple keys easily
+* Using Github Secrets for injecting the frontend secrets at build time
+
+
+---
+
+## 5. 🧚️‍♂️ Testing Strategy
+
+All the tests are run via Github Actions, post-deployment tests are run after ssh-ing into the vm and then running tests.
+
+* **Lint Tests**: Checks basic syntax using a linter to ensure the website doesn't have any breaking issues.
+* **Unit Tests**: Using Jest for frontend and Pytest for backend and running the tests on Pull Requests and Push to make sure no uncaught bugs are pushed into prod.
+* **End-to-End Tests**: End to end tests done via Cypress after the website is deployed to test functionality.
+* **Performance Tests**: Runs ApacheBench to do a basic load testing to test responsiveness of the website.
+
+
+---
+
+## 6. 🚀 Architecture Diagram
+
+<img width="530" height="420" alt="image" src="https://github.com/user-attachments/assets/3aeab0e5-1e6f-447d-a311-300f10e4b4f9" />
+
+
+---
+
+## 7. Deployment Strategy
+
+Using Recreate deployment pattern for deployment giving around 10 seconds of downtime per release. Recreate Deployment is used for cost and performance efficiency as  two containers deplete the resources of the VM.
+
+
+---
+
+## 8. Performance
+
+Serving static files for more responsive frontend and doing basic performance testing, the deployment is able to handle 100 concurrent requests within 75 ms.
+
+
+---
+
+## 9. 📌 Future Improvements
+
+* Adding more containers and load balancer for horizontal scaling
+* Add alerting with Slack/email on deploy failure
+* Blue-green deployment for lower downtime
+* DB backup container & monitoring tools
+
+
+---
+
+

CICD/A2 CI-CD.md

@@ -0,0 +1,37 @@
+# Stage 1: Build the React application
+FROM node:20-alpine AS builder
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json (or yarn.lock)
+COPY package*.json ./
+
+
+ARG VITE_BACKEND_URL
+ENV VITE_BACKEND_URL=$VITE_BACKEND_URL
+
+ARG VITE_MAPS_KEY
+ENV VITE_MAPS_KEY=$VITE_MAPS_KEY
+
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application source code
+COPY . .
+
+# Build the application for production
+RUN npm run build
+
+# Stage 2: Serve the application using a production-ready web server
+FROM nginx:stable-alpine
+
+# Copy the built files from the builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Expose port 80 to the outside world
+EXPOSE 80
+
+# Nginx will start automatically when the container starts
+CMD ["nginx", "-g", "daemon off;"]

CICD/Backend-Dockerfile

@@ -0,0 +1,140 @@
+# 🚀 Deployment Process Documentation
+
+This document outlines the CI/CD deployment pipeline for the application, including how testing, Docker image management, deployment to the virtual machine (VM), and post-deployment checks are handled.
+
+---
+
+## 📦 Pre-Deployment Steps (CI)
+
+### 1. **Linting and Unit Tests**
+
+All code changes undergo automated testing using GitHub Actions:
+
+### **Frontend**
+---
+
+**Filename**: lint.yml
+
+  * **Linter:** Runs using ESLint.
+  * **Unit Tests:** Run using **Jest**.
+
+### **Backend**
+---
+
+**Filename**: backend-lint.yml
+
+  * **Linter:** Runs using flake8
+  * **Unit Tests:** Run using **pytest**.
+
+### 2. **Build and Push Docker Images**
+
+Triggered only when a Git **tag is pushed** (e.g., `v1.0.0`).
+
+* **Frontend Image:**
+
+  * Dockerfile in `epiready-frontend/`
+  * Built and tagged as `epiready-frontend:<git-tag>`
+
+* **Backend Image:**
+
+  * Dockerfile in `epiready-backend/`
+  * Built and tagged as `epiready-backend:<git-tag>`
+
+* **Push:** Images are pushed to DockerHub using GitHub Actions.
+
+---
+
+## ☁️ Deployment to VM (CD)
+
+### **Triggering Deployment Workflow**
+
+A **workflow file** (`deploy-docker.yml`) is triggered **after build-backend.yml and build-frontend.yml are run succesfully.** This only runs when the other workflow files are run in the main branch, not before it.
+
+### 1. **SSH Into VM**
+
+* The workflow file then uses appleboy/ssh-action@v1 to ssh into the Lightsail VM and then goes to the epiready directory where it uses git pull to update the docker-compose file in case any new containers or modifications were made.
+
+### 2. **Pull Docker Images**
+
+* Uses Docker to pull:
+
+  * `your-dockerhub/frontend:<git-tag>`
+  * `your-dockerhub/backend:<git-tag>`
+
+### 3. **Deploy Using Docker Compose**
+
+* Uses a `docker-compose.yml` file that defines:
+
+  * **Frontend container** (served via **NGINX**) with **Certbot** for HTTPS
+  * **Backend container**
+  * **PostgreSQL** service with a **named volume** for persistent storage
+
+* Executes: `docker compose pull && docker compose up -d`
+
+---
+
+## 🔍 Post-Deployment Testing
+
+### 7. **E2E Testing with Cypress**
+
+* Cypress tests are triggered **after deployment completes**.
+* Run against the live application to simulate real-user flows.
+
+### 8. **Load Testing with Apache Bench (ab)**
+
+* Conducted to verify server performance and concurrency handling.
+* Example: `ab -n 100 -c 10 https://epiready.taggit.tech/`
+
+
+
+## 🗂️ Versioning
+
+* **Git Tags** (e.g., `v1.0.1`) determine image versions.
+* Helps maintain rollback strategy and historical traceability.
+
+---
+
+## 🔐 Secrets and Security
+
+* SSH keys and DockerHub credentials are stored securely in **GitHub Secrets**.
+* Certbot is used to auto-renew SSL certificates for production.
+
+
+
+## 📁 Folder Structure (Simplified)
+
+```
+epiready/
+├── backend/
+│   └── Dockerfile
+├── frontend/
+│   └── Dockerfile
+├── docker-compose.yml
+├── .github/
+│   ├── workflows/
+│   │   ├── backend-lint.yml (backend tests)
+│   │   └── lint.yml (frontend tests)
+│   │   └── docker-deploy.yml (ssh + pull + deploy + post-tests)
+│   │   └── build-backend.yml (build and push backend)
+│   │   └── build-frontend.yml (build and push frontend)
+```
+
+---
+
+## ✅ Summary Checklist
+
+  [x] Run lint and unit tests
+  [x] Build & push tagged Docker images
+  [x] SSH into VM and deploy with docker-compose
+  [x] Serve with NGINX + Certbot
+  [x] PostgreSQL with volume
+  [x] Run Cypress tests
+  [x] Run Apache Bench
+
+---
+
+## 🔄 Future Enhancements (Optional)
+
+* Add rollback automation on test failure
+* Add Slack/Discord notifications post-deploy
+* Enable blue-green deployments for zero downtime