Ci/add dockerfile dockercompose file for lab2

code/Readme.md

@@ -1 +1,144 @@
+# GetActive Project Docker Environment Configuration
+
 This folder contains all source code and test code.
+This document provides detailed instructions for the Docker environment configuration and usage of the GetActive project. The project uses Docker Compose to manage multiple services, including frontend, backend, and database services.
+
+## Service Architecture
+
+The project consists of three main services:
+
+1. **Database Service (db)**
+   - Uses MySQL 8.0
+   - Port mapping: 3306:3306
+   - Data persistence: Uses Docker volume (mysql_data)
+   - Health check: Checks database connection status every 10 seconds
+
+2. **Backend Service (backend)**
+   - Based on Spring Boot 3.x
+   - Port mapping: 3232:3232
+   - Dependencies: Requires database service to be healthy
+   - Health check: Checks API health status every 10 seconds
+
+3. **Frontend Service (frontend)**
+   - Based on Node.js and React
+   - Port mapping: 80:80
+   - Uses Nginx as web server
+   - Dependencies: Requires backend service to be healthy
+
+## Quick Start
+
+### Prerequisites
+
+- Install [Docker](https://docs.docker.com/get-docker/)
+- Install [Docker Compose](https://docs.docker.com/compose/install/)
+
+### Starting Services
+
+1. After cloning the project, navigate to the project root directory:
+   ```bash
+   cd code
+   ```
+
+2. Start all services using Docker Compose:
+   ```bash
+   docker-compose up -d
+   ```
+
+3. Check service status:
+   ```bash
+   docker-compose ps
+   ```
+
+### Accessing Services
+
+- Frontend application: http://localhost
+- Backend API: http://localhost:3232/v1
+- Database: localhost:3306
+
+## Environment Configuration
+
+### Database Configuration
+- Database name: getactive
+- Username: root
+- Password: password
+- Port: 3306
+
+### Backend Configuration
+- Service port: 3232
+- Health check endpoint: /v1/health
+- Database connection configuration in application.properties
+
+### Frontend Configuration
+- Web server port: 80
+- API proxy configuration in nginx.conf
+
+## Development Guide
+
+### Rebuilding Services
+
+When code changes are made, services need to be rebuilt:
+
+```bash
+# Rebuild all services
+docker-compose build
+
+# Rebuild specific service
+docker-compose build [service_name]  # Example: docker-compose build backend
+```
+
+### Viewing Logs
+
+```bash
+# View logs for all services
+docker-compose logs
+
+# View logs for specific service
+docker-compose logs [service_name]  # Example: docker-compose logs backend
+
+# View logs in real-time
+docker-compose logs -f
+```
+
+### Stopping Services
+
+```bash
+# Stop all services
+docker-compose down
+
+# Stop services and remove volumes
+docker-compose down -v
+```
+
+## Troubleshooting
+
+1. **Port Conflicts**
+   - Ensure ports 80, 3232, and 3306 are not in use by other services
+   - Use `lsof -i :[port]` to check port usage
+
+2. **Service Startup Issues**
+   - Check Docker logs: `docker-compose logs [service_name]`
+   - Ensure all dependent services are running properly
+   - Verify environment variables and configuration files
+
+3. **Database Connection Issues**
+   - Ensure database container is running
+   - Check database connection configuration
+   - Verify database user permissions
+
+4. **Frontend Access Issues**
+   - Check Nginx configuration
+   - Ensure backend API is accessible
+   - Check browser console for error messages
+
+## Important Notes
+
+1. This configuration is for development environment only, not recommended for production use
+2. Database data is persisted through Docker volume, data won't be lost when containers are removed
+3. Services need to be rebuilt after code changes
+4. Ensure Docker and Docker Compose versions are compatible
+
+## Contribution Guidelines
+
+1. Test Docker configuration changes locally before committing
+2. Update this documentation when configuration changes are made
+3. Ensure all services can start and run properly before submitting code

code/backend/Dockerfile

@@ -11,6 +11,7 @@ RUN ./gradlew --no-daemon bootJar || return 0  # build fails if no source yet
 
 # Copy source
 COPY getactivecore/src /app/src
+COPY getactivecore/application.properties /app/application.properties
 
 # Build the application
 RUN ./gradlew clean bootJar --no-daemon
@@ -23,7 +24,7 @@ WORKDIR /app
 
 # Copy the built JAR from the builder
 COPY --from=builder /app/build/libs/*.jar app.jar
-
+COPY --from=builder /app/application.properties application.properties
 # Port the server listens at
 EXPOSE 3232
 

code/docker-compose.yml

@@ -0,0 +1,70 @@
+version: '3.8'
+
+services:
+
+  db:
+    build:
+      context: ./database
+      dockerfile: Dockerfile
+    container_name: getactive-db
+    ports:
+      - "3306:3306"
+    volumes:
+      - mysql_data:/var/lib/mysql
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "root", "-ppassword"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - backend-network
+
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: getactive-backend
+    depends_on:
+      db:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3232/v1/health"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    networks:
+      - backend-network
+      - frontend-network
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      args:
+        - NODE_ENV=production
+    image: getactive-frontend:latest
+    restart: "no"
+    depends_on:
+      - backend
+
+  nginx:
+    build:
+      context: ./nginx
+      dockerfile: Dockerfile
+    container_name: getactive-nginx
+    depends_on:
+      - frontend
+      - backend
+    ports:
+      - "80:80"
+    networks:
+      - frontend-network
+
+networks:
+  frontend-network:
+    driver: bridge
+  backend-network:
+    driver: bridge
+
+volumes:
+  mysql_data: 

code/frontend/.dockerignore

@@ -0,0 +1,26 @@
+node_modules
+npm-debug.log
+
+dist
+build
+
+.git
+.gitignore
+
+.vscode
+.idea
+*.swp
+*.swo
+
+.env
+.env.local
+.env.*.local
+
+coverage
+.nyc_output
+
+.DS_Store
+README.md
+docker-compose*.yml
+Dockerfile*
+.dockerignore 

code/frontend/.env.development

@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=http://localhost:3232/v1
+VITE_NODE_ENV=development 

code/frontend/.env.production

@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=/v1
+VITE_NODE_ENV=production 

code/frontend/Dockerfile

@@ -0,0 +1,25 @@
+FROM node:18-alpine as builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Output stage - this stage is just for copying the build output
+FROM alpine:latest
+
+# Create a directory for the build output
+WORKDIR /build-output
+
+# Copy only the built files from the builder stage
+COPY --from=builder /app/dist ./dist
+
+# This image doesn't need to run anything
+# It's just a way to pass the build output to other images

code/frontend/src/services/api.js

@@ -3,7 +3,7 @@ import axios from 'axios';
 import { jwtUtils } from '../utils/jwt';
 
 const api = axios.create({
-  baseURL: 'http://localhost:8080',
+  baseURL: import.meta.env.VITE_API_BASE_URL,
   timeout: 5000,
 });
 

code/nginx/Dockerfile

@@ -0,0 +1,22 @@
+# Use the frontend build output
+FROM getactive-frontend:latest as frontend
+
+# Nginx stage
+FROM nginx:alpine
+
+# Install curl for healthcheck
+RUN apk add --no-cache curl
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy built frontend files from the frontend image
+COPY --from=frontend /build-output/dist /usr/share/nginx/html
+
+# Health check
+HEALTHCHECK --interval=10s --timeout=5s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost/ || exit 1
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"] 

code/nginx/nginx.conf

@@ -0,0 +1,31 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /v1/ {
+        allow 172.16.0.0/12;  # Docker internal network
+        allow 192.168.0.0/16; # Docker internal network
+        deny all;             # Deny all other access
+
+        proxy_pass http://backend:3232/v1/;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}