# ================================ # MC Panel Frontend - Multi-Stage Dockerfile # ================================ # Stage 1: Build Stage FROM node:20-alpine AS builder # Метаданные LABEL maintainer="MC Panel Team" \ version="2.0.0" \ description="MC Panel Frontend - React Build Stage" \ component="frontend" # Устанавливаем зависимости для сборки RUN apk add --no-cache git python3 make g++ # Создаем рабочую директорию WORKDIR /app # Копируем package files для кеширования зависимостей COPY package*.json ./ # Устанавливаем зависимости RUN npm ci --silent # Копируем исходный код COPY . ./ # Собираем приложение для production RUN npm run build # Проверяем размер сборки RUN du -sh dist/ && \ echo "Build completed successfully" # ================================ # Stage 2: Production Stage (Nginx) # ================================ FROM nginx:alpine AS production # Метаданные LABEL maintainer="MC Panel Team" \ version="2.0.0" \ description="MC Panel Frontend - Nginx Production Server" \ component="frontend" # Устанавливаем дополнительные пакеты RUN apk add --no-cache curl tini # Создаем пользователя nginx если его нет RUN addgroup -g 1000 -S mcpanel && \ adduser -u 1000 -D -S -G mcpanel mcpanel # Копируем собранное приложение из builder stage COPY --from=builder /app/dist /usr/share/nginx/html # Создаем кастомную конфигурацию Nginx RUN cat > /etc/nginx/conf.d/default.conf << 'EOF' server { listen 80; listen [::]:80; server_name _; root /usr/share/nginx/html; index index.html; # Gzip compression gzip on; gzip_vary on; gzip_min_length 1024; gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json; # Security headers add_header X-Frame-Options "SAMEORIGIN" always; add_header X-Content-Type-Options "nosniff" always; add_header X-XSS-Protection "1; mode=block" always; add_header Referrer-Policy "no-referrer-when-downgrade" always; # Cache static assets location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 1y; add_header Cache-Control "public, immutable"; } # Handle React Router (SPA) location / { try_files $uri $uri/ /index.html; } # API proxy (если нужно) location /api/ { proxy_pass http://backend:8000/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # WebSocket proxy (если нужно) location /ws/ { proxy_pass http://backend:8000/ws/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # Health check endpoint location /health { access_log off; return 200 "healthy\n"; add_header Content-Type text/plain; } } EOF # Создаем кастомную конфигурацию nginx.conf RUN cat > /etc/nginx/nginx.conf << 'EOF' user nginx; worker_processes auto; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid; events { worker_connections 1024; use epoll; multi_accept on; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; client_max_body_size 100M; include /etc/nginx/conf.d/*.conf; } EOF # Health check HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \ CMD curl -f http://localhost/health || exit 1 # Expose порт EXPOSE 80 # Используем tini как init процесс ENTRYPOINT ["/sbin/tini", "--"] # Команда запуска CMD ["nginx", "-g", "daemon off;"] # ================================ # Stage 3: Development Stage # ================================ FROM node:20-alpine AS development # Метаданные LABEL maintainer="MC Panel Team" \ version="2.0.0" \ description="MC Panel Frontend - Development Server" \ component="frontend" # Устанавливаем зависимости для разработки RUN apk add --no-cache git python3 make g++ # Создаем пользователя для разработки RUN addgroup -g 1000 -S mcpanel && \ adduser -u 1000 -D -S -G mcpanel mcpanel # Создаем рабочую директорию WORKDIR /app # Меняем владельца директории RUN chown mcpanel:mcpanel /app # Переключаемся на пользователя USER mcpanel # Копируем package files COPY --chown=mcpanel:mcpanel package*.json ./ # Устанавливаем зависимости RUN npm ci # Копируем исходный код COPY --chown=mcpanel:mcpanel . ./ # Expose порт для dev сервера EXPOSE 5173 # Команда для разработки CMD ["npm", "run", "dev"]