feat(deploy): Add Docker configuration for containerization

Docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3.8'
+
+services:
+  music-app-frontend:
+    # Build the Docker image from the Dockerfile in the current directory (.)
+    build: .
+    # A friendly name for the container
+    container_name: music_app_container
+    ports:
+      # Map port 8080 on the host machine to port 80 in the container
+      - "8080:80"
+    # Restart the container automatically unless it is manually stopped
+    restart: unless-stopped

Dockerfile

@@ -0,0 +1,38 @@
+# Stage 1: Build the Vite application
+FROM node:20-alpine AS builder
+
+# Set the working directory
+WORKDIR /app
+
+# Install pnpm globally
+RUN npm install -g pnpm
+
+# Copy package and lock files
+COPY package.json pnpm-lock.yaml ./
+
+# Install dependencies using pnpm
+RUN pnpm install
+
+# Copy the rest of the application source code
+COPY . .
+
+# Build the application for production
+# This creates a 'dist' folder with the static files
+RUN pnpm run build
+
+
+# Stage 2: Serve the application with Nginx
+FROM nginx:stable-alpine AS final
+
+# Copy the built static files from the 'builder' stage to the Nginx html directory
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy the custom Nginx configuration file
+# This is crucial for handling Single Page Application (SPA) routing
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port 80 to the outside world
+EXPOSE 80
+
+# The default command for the nginx image is to start the server,
+# so we don't need to specify a CMD.

nginx.conf

@@ -0,0 +1,20 @@
+# Nginx configuration for a Vite Single Page Application (SPA)
+
+server {
+  # Listen on port 80, the standard HTTP port
+  listen 80;
+
+  # The root directory where our static files are located
+  root /usr/share/nginx/html;
+
+  # The default file to serve
+  index index.html;
+
+  # This block is key for SPA routing (like with React Router)
+  location / {
+    # Try to serve the requested file ($uri), then a directory ($uri/),
+    # and if neither is found, fall back to serving index.html.
+    # This allows the client-side router to handle the URL.
+    try_files $uri $uri/ /index.html;
+  }
+}