feat(frontend): Add Docker containerization support for development and production
Implement complete Docker setup for Next.js 16 frontend with multi-stage builds, hot reload support, and production optimizations. Changes: - Add Dockerfile with multi-stage build (deps, builder, development, production) - Add .dockerignore to exclude unnecessary files from Docker context - Add .env.local.example template for environment configuration - Update next.config.ts with standalone output for production builds - Add Docker convenience scripts to package.json for easy container management - Support hot reload in development with volume mounts - Use Node.js 20 Alpine for smaller image size - Implement security best practices (non-root user in production) Technical Details: - Development stage: Full source mounted with hot reload via Turbopack - Production stage: Standalone build with optimized static assets - Image size: ~1.17GB (development), smaller for production - Port: 3000 (maps to container port 3000) Testing: - Docker build verified for development target - Container startup successful with Next.js 16.0.1 - HTTP 200 response confirmed on localhost:3000 - Hot reload functional with volume mounts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
88
Dockerfile
Normal file
88
Dockerfile
Normal file
@@ -0,0 +1,88 @@
|
||||
# ============================================
|
||||
# Stage 1: Dependencies Installation
|
||||
# ============================================
|
||||
FROM node:20-alpine AS deps
|
||||
WORKDIR /app
|
||||
|
||||
# Install libc6-compat for compatibility
|
||||
RUN apk add --no-cache libc6-compat
|
||||
|
||||
# Copy dependency files
|
||||
COPY package.json package-lock.json* ./
|
||||
|
||||
# Install dependencies with legacy peer deps flag for Next.js 16
|
||||
RUN npm ci --legacy-peer-deps
|
||||
|
||||
# ============================================
|
||||
# Stage 2: Build Stage
|
||||
# ============================================
|
||||
FROM node:20-alpine AS builder
|
||||
WORKDIR /app
|
||||
|
||||
# Copy dependencies from deps stage
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
|
||||
# Copy all source files
|
||||
COPY . .
|
||||
|
||||
# Disable Next.js telemetry
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
# Build the application
|
||||
RUN npm run build
|
||||
|
||||
# ============================================
|
||||
# Stage 3: Development Environment (Default)
|
||||
# ============================================
|
||||
FROM node:20-alpine AS development
|
||||
WORKDIR /app
|
||||
|
||||
# Set environment variables
|
||||
ENV NODE_ENV=development
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
# Install libc6-compat for compatibility
|
||||
RUN apk add --no-cache libc6-compat curl
|
||||
|
||||
# Copy dependencies from deps stage
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
|
||||
# Copy source code (will be overridden by volume mount in docker-compose)
|
||||
COPY . .
|
||||
|
||||
# Expose Next.js default port
|
||||
EXPOSE 3000
|
||||
|
||||
# Use turbo mode for faster development
|
||||
CMD ["npm", "run", "dev"]
|
||||
|
||||
# ============================================
|
||||
# Stage 4: Production Environment
|
||||
# ============================================
|
||||
FROM node:20-alpine AS production
|
||||
WORKDIR /app
|
||||
|
||||
# Set environment variables
|
||||
ENV NODE_ENV=production
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
# Install libc6-compat
|
||||
RUN apk add --no-cache libc6-compat
|
||||
|
||||
# Create non-privileged user for security
|
||||
RUN addgroup --system --gid 1001 nodejs && \
|
||||
adduser --system --uid 1001 nextjs
|
||||
|
||||
# Copy build artifacts from builder stage
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/public ./public
|
||||
|
||||
# Switch to non-privileged user
|
||||
USER nextjs
|
||||
|
||||
# Expose port
|
||||
EXPOSE 3000
|
||||
|
||||
# Start the standalone server
|
||||
CMD ["node", "server.js"]
|
||||
Reference in New Issue
Block a user