dockerize

2025-05-31 22:08:46 +09:00 · 2025-05-31 22:08:46 +09:00 · 2eac055306
commit 2eac055306
parent 565a0f47f6
8 changed files with 572 additions and 12 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1,55 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js
+.next/
+out/
+
+# Production
+build/
+dist/
+
+# Environment files
+.env*
+!.env.example
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Docker
+Dockerfile*
+docker-compose*
+.dockerignore
+
+# Testing
+coverage/
+.nyc_output
+
+# Misc
+README.md
+.editorconfig
+.eslintrc*
+.prettierrc*
+
+# Claude Code
+.claude/
+CLAUDE.md
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -0,0 +1,53 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a Next.js chess application that implements both classic chess and a variant called "Ghost Chess". The app features a complete chess interface with piece movement, game state management, and different game modes.
+
+## Key Commands
+
+- `npm run dev` - Start development server with Turbo mode
+- `npm run build` - Build production application  
+- `npm run lint` - Run ESLint checks
+- `npm start` - Start production server
+
+## Architecture
+
+### Core Game Logic (lib/)
+- `chess-types.ts` - Core type definitions, enums (PieceType, PieceColor, GameMode), and board initialization
+- `chess-rules.ts` - Game logic including move validation, check/checkmate detection, and Ghost Chess rules
+- `chess-utils.ts` - Utility functions for board manipulation and calculations
+
+### Components Structure
+- `chess-game.tsx` - Main game orchestrator with state management and game loop
+- `chess-board.tsx` - Board rendering and square interaction
+- `chess-square.tsx` - Individual square component with piece rendering
+- `game-controls.tsx` - Game control buttons and mode selection
+- `game-info.tsx` - Game status, move history, and captured pieces display
+
+### Game Modes
+- **Classic Chess**: Standard chess rules with check, checkmate, and stalemate
+- **Ghost Chess**: Special variant with forced captures and different win conditions (capture all pieces)
+
+### Key Features
+- Full chess piece movement and validation
+- Castling and pawn promotion (auto-promotes to queen)
+- Visual move highlighting for valid moves
+- Move history tracking with algebraic notation
+- Captured pieces tracking
+- Game state management (check, checkmate, stalemate, ongoing)
+
+### Technology Stack
+- Next.js 15 with App Router
+- React 19 with TypeScript
+- Tailwind CSS for styling  
+- Radix UI components (tabs, slots)
+- Lucide React for icons
+
+### File Organization
+- Uses `@/*` path alias for imports
+- Components follow React functional component patterns with hooks
+- Game state managed through useState with proper effect handling
+- Board represented as 8x8 array of ChessPiece | null
--- a/57
+++ b/57
@ -0,0 +1,57 @@
+# Multi-stage build for Next.js
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci --only=production
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD ["node", "server.js"]
--- a/README.md
+++ b/README.md
@ -1,6 +1,21 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Ghost Chess

-## Getting Started
+A Next.js chess application that implements both classic chess and a special variant called "Ghost Chess". Features a complete chess interface with piece movement, game state management, and different game modes.
+
+## 🎮 Game Features
+
+- **Classic Chess**: Standard chess rules with check, checkmate, and stalemate
+- **Ghost Chess**: Special variant with forced captures and elimination-based win conditions
+- Full chess piece movement and validation
+- Castling and pawn promotion (auto-promotes to queen)
+- Visual move highlighting for valid moves
+- Move history tracking with algebraic notation
+- Captured pieces tracking
+- Game state management
+
+## 🚀 Development
+
+### Getting Started

 First, run the development server:

@ -18,19 +33,164 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the

 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+### Available Scripts

-## Learn More
+- `npm run dev` - Start development server with Turbo mode
+- `npm run build` - Build production application  
+- `npm run lint` - Run ESLint checks
+- `npm start` - Start production server

-To learn more about Next.js, take a look at the following resources:
+## 🐳 Docker Deployment

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### Prerequisites

-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+- Docker and Docker Compose installed
+- Oracle A1 instance or any Linux server
+- Open ports: 80 (HTTP), 443 (HTTPS), 3000 (direct app access)

-## Deploy on Vercel
+### 1. Server Setup (Oracle A1 Instance)

-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+```bash
+# Update system
+sudo apt update && sudo apt upgrade -y

-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+# Install Docker
+sudo apt install -y docker.io docker-compose
+
+# Start and enable Docker
+sudo systemctl start docker
+sudo systemctl enable docker
+
+# Add user to docker group
+sudo usermod -aG docker $USER
+
+# Log out and back in for group changes to take effect
+```
+
+### 2. Deploy the Application
+
+Clone the repository and navigate to the project directory:
+
+```bash
+git clone <your-repository-url> ghost-chess
+cd ghost-chess
+```
+
+#### Option A: Simple Deployment (App Only)
+```bash
+# Deploy only the Next.js application on port 3000
+./deploy.sh --no-nginx
+```
+
+#### Option B: Production Deployment with Nginx (Recommended)
+```bash
+# Deploy with Nginx reverse proxy on port 80
+./deploy.sh
+```
+
+#### Option C: SSL/HTTPS Deployment
+```bash
+# First, add your SSL certificates to ./ssl/ directory
+mkdir ssl
+# Copy your cert.pem and key.pem to ./ssl/
+
+# Deploy with HTTPS support
+./deploy.sh --with-ssl
+```
+
+### 3. Deployment Script Options
+
+The `deploy.sh` script supports several options:
+
+- `--build-only`: Only build the Docker images without deploying
+- `--no-nginx`: Deploy without Nginx reverse proxy (port 3000)
+- `--with-ssl`: Deploy with SSL support (requires certificates in ./ssl/)
+- `--help`: Show help message
+
+### 4. Managing the Deployment
+
+```bash
+# Check container status
+docker-compose ps
+
+# View application logs
+docker-compose logs -f ghost-chess
+
+# View all logs
+docker-compose logs -f
+
+# Stop the application
+docker-compose down
+
+# Restart the application
+docker-compose restart
+
+# Update deployment (after code changes)
+git pull
+./deploy.sh
+```
+
+### 5. Access Your Application
+
+After successful deployment:
+
+- **App only**: `http://your-server-ip:3000`
+- **With Nginx**: `http://your-server-ip`
+- **With SSL**: `https://your-server-ip`
+
+### 6. Firewall Configuration (Oracle Cloud)
+
+Make sure to configure your Oracle Cloud security groups to allow:
+
+- **Port 80** (HTTP) - if using Nginx
+- **Port 443** (HTTPS) - if using SSL
+- **Port 3000** - if deploying app only
+
+### 7. SSL Certificate Setup (Optional)
+
+For HTTPS deployment, place your SSL certificates in the `ssl` directory:
+
+```bash
+mkdir ssl
+# Add your certificates:
+# ssl/cert.pem - SSL certificate
+# ssl/key.pem - Private key
+```
+
+You can obtain free SSL certificates from [Let's Encrypt](https://letsencrypt.org/) or use your existing certificates.
+
+### Troubleshooting
+
+#### Common Issues:
+
+1. **Permission denied**: Make sure deploy script is executable
+   ```bash
+   chmod +x deploy.sh
+   ```
+
+2. **Port already in use**: Stop existing services or change ports in docker-compose.yml
+
+3. **SSL certificate errors**: Verify certificate paths and permissions in ssl/ directory
+
+4. **Container build failures**: Check Docker logs
+   ```bash
+   docker-compose logs ghost-chess
+   ```
+
+## 🛠 Technology Stack
+
+- **Next.js 15** with App Router
+- **React 19** with TypeScript
+- **Tailwind CSS** for styling  
+- **Radix UI** components (tabs, slots)
+- **Lucide React** for icons
+- **Docker** for containerization
+
+## 📚 Learn More
+
+To learn more about the technologies used:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API
+- [React Documentation](https://react.dev/) - learn React
+- [Tailwind CSS](https://tailwindcss.com/) - utility-first CSS framework
+- [Docker Documentation](https://docs.docker.com/) - containerization platform
--- a/deploy.sh
+++ b/deploy.sh
@ -0,0 +1,144 @@
+#!/bin/bash
+
+# Ghost Chess Deployment Script for Oracle A1 Instance
+# Usage: ./deploy.sh [OPTIONS]
+# Options:
+#   --build-only    Only build the Docker image
+#   --no-nginx     Deploy without nginx reverse proxy
+#   --with-ssl     Deploy with SSL (requires SSL certificates)
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Default settings
+BUILD_ONLY=false
+USE_NGINX=true
+WITH_SSL=false
+
+# Parse command line arguments
+while [[ $# -gt 0 ]]; do
+  case $1 in
+    --build-only)
+      BUILD_ONLY=true
+      shift
+      ;;
+    --no-nginx)
+      USE_NGINX=false
+      shift
+      ;;
+    --with-ssl)
+      WITH_SSL=true
+      shift
+      ;;
+    -h|--help)
+      echo "Usage: $0 [OPTIONS]"
+      echo "Options:"
+      echo "  --build-only    Only build the Docker image"
+      echo "  --no-nginx     Deploy without nginx reverse proxy"
+      echo "  --with-ssl     Deploy with SSL (requires SSL certificates)"
+      echo "  -h, --help     Show this help message"
+      exit 0
+      ;;
+    *)
+      echo -e "${RED}Unknown option: $1${NC}"
+      exit 1
+      ;;
+  esac
+done
+
+echo -e "${GREEN}🚀 Starting Ghost Chess deployment...${NC}"
+
+# Check if Docker is installed and running
+if ! command -v docker &> /dev/null; then
+    echo -e "${RED}❌ Docker is not installed. Please install Docker first.${NC}"
+    exit 1
+fi
+
+if ! docker info &> /dev/null; then
+    echo -e "${RED}❌ Docker is not running. Please start Docker first.${NC}"
+    exit 1
+fi
+
+# Check if docker-compose is available
+if ! command -v docker-compose &> /dev/null && ! docker compose version &> /dev/null; then
+    echo -e "${RED}❌ Docker Compose is not available. Please install Docker Compose.${NC}"
+    exit 1
+fi
+
+# Use docker compose or docker-compose based on availability
+COMPOSE_CMD="docker compose"
+if ! docker compose version &> /dev/null; then
+    COMPOSE_CMD="docker-compose"
+fi
+
+echo -e "${YELLOW}📦 Building Docker images...${NC}"
+
+# Build the application
+if [ "$USE_NGINX" = true ]; then
+    if [ "$WITH_SSL" = true ]; then
+        echo -e "${YELLOW}🔒 Building with SSL support...${NC}"
+        $COMPOSE_CMD --profile production build
+    else
+        echo -e "${YELLOW}🌐 Building with nginx (HTTP only)...${NC}"
+        $COMPOSE_CMD --profile production build
+    fi
+else
+    echo -e "${YELLOW}📱 Building application only...${NC}"
+    $COMPOSE_CMD build ghost-chess
+fi
+
+if [ "$BUILD_ONLY" = true ]; then
+    echo -e "${GREEN}✅ Build completed successfully!${NC}"
+    echo -e "${YELLOW}To deploy, run: $0${NC}"
+    exit 0
+fi
+
+echo -e "${YELLOW}🔧 Stopping existing containers...${NC}"
+$COMPOSE_CMD down --remove-orphans
+
+echo -e "${YELLOW}🚀 Starting deployment...${NC}"
+
+# Deploy based on configuration
+if [ "$USE_NGINX" = true ]; then
+    if [ "$WITH_SSL" = true ]; then
+        # Check if SSL certificates exist
+        if [ ! -d "./ssl" ] || [ ! -f "./ssl/cert.pem" ] || [ ! -f "./ssl/key.pem" ]; then
+            echo -e "${RED}❌ SSL certificates not found in ./ssl/ directory${NC}"
+            echo -e "${YELLOW}Please provide cert.pem and key.pem in ./ssl/ directory${NC}"
+            exit 1
+        fi
+        echo -e "${GREEN}🔒 Deploying with SSL...${NC}"
+        $COMPOSE_CMD --profile production up -d
+    else
+        echo -e "${GREEN}🌐 Deploying with nginx (HTTP only)...${NC}"
+        $COMPOSE_CMD --profile production up -d
+    fi
+    
+    echo -e "${GREEN}✅ Deployment completed!${NC}"
+    echo -e "${YELLOW}📝 Application URLs:${NC}"
+    echo -e "   - HTTP: http://$(curl -s ifconfig.me):80"
+    if [ "$WITH_SSL" = true ]; then
+        echo -e "   - HTTPS: https://$(curl -s ifconfig.me):443"
+    fi
+else
+    echo -e "${GREEN}📱 Deploying application only...${NC}"
+    $COMPOSE_CMD up -d ghost-chess
+    echo -e "${GREEN}✅ Deployment completed!${NC}"
+    echo -e "${YELLOW}📝 Application URL: http://$(curl -s ifconfig.me):3000${NC}"
+fi
+
+echo ""
+echo -e "${GREEN}🎉 Ghost Chess is now running!${NC}"
+echo -e "${YELLOW}📊 To check status: $COMPOSE_CMD ps${NC}"
+echo -e "${YELLOW}📋 To view logs: $COMPOSE_CMD logs -f${NC}"
+echo -e "${YELLOW}🛑 To stop: $COMPOSE_CMD down${NC}"
+
+# Show running containers
+echo ""
+echo -e "${YELLOW}📋 Container Status:${NC}"
+$COMPOSE_CMD ps
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,28 @@
+version: '3.8'
+
+services:
+  ghost-chess:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - NEXT_TELEMETRY_DISABLED=1
+    restart: unless-stopped
+    container_name: ghost-chess-app
+
+  # Optional: Nginx reverse proxy for production
+  nginx:
+    image: nginx:alpine
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+      - ./ssl:/etc/ssl/certs:ro  # SSL certificates if needed
+    depends_on:
+      - ghost-chess
+    restart: unless-stopped
+    container_name: ghost-chess-nginx
+    profiles:
+      - production
--- a/next.config.ts
+++ b/next.config.ts
@ -1,7 +1,7 @@
 import type { NextConfig } from "next";

 const nextConfig: NextConfig = {
-  /* config options here */
+  output: 'standalone',
 };

 export default nextConfig;
--- a/nginx.conf
+++ b/nginx.conf
@ -0,0 +1,63 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    upstream ghost-chess {
+        server ghost-chess:3000;
+    }
+
+    # Rate limiting
+    limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;
+
+    server {
+        listen 80;
+        server_name _;
+
+        # Optional: Redirect to HTTPS
+        # return 301 https://$server_name$request_uri;
+
+        location / {
+            proxy_pass http://ghost-chess;
+            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;
+            proxy_cache_bypass $http_upgrade;
+            
+            # Rate limiting
+            limit_req zone=api burst=20 nodelay;
+        }
+
+        # Health check endpoint
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+    }
+
+    # HTTPS configuration (uncomment if using SSL)
+    # server {
+    #     listen 443 ssl;
+    #     server_name your-domain.com;
+    #
+    #     ssl_certificate /etc/ssl/certs/cert.pem;
+    #     ssl_certificate_key /etc/ssl/certs/key.pem;
+    #
+    #     location / {
+    #         proxy_pass http://ghost-chess;
+    #         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;
+    #         proxy_cache_bypass $http_upgrade;
+    #     }
+    # }
+}