ci: add Docker build and GitHub Container Registry workflow

Add complete Docker containerization and CI/CD setup:

Docker Configuration:
- Multi-stage Dockerfile with 3 stages (deps, builder, runner)
- Stage 1: Install dependencies with pnpm in Alpine
- Stage 2: Build Next.js static export
- Stage 3: Serve static files with nginx:alpine
- Health check endpoint on /health
- Optimized for production with layer caching

Nginx Configuration:
- Custom nginx.conf for static file serving
- Gzip compression enabled
- Security headers (X-Frame-Options, X-Content-Type-Options, etc.)
- Static asset caching with 1-year expiry
- Client-side routing support (try_files)
- Health check endpoint for container orchestration
- Error page handling

GitHub Workflow (docker-build-push.yml):
- Triggers on push to main, tags, and pull requests
- Multi-platform builds (linux/amd64, linux/arm64)
- Pushes to GitHub Container Registry (ghcr.io)
- Automatic tagging: latest, semver, sha, branch
- Uses GitHub Actions cache for faster builds
- Requires only GITHUB_TOKEN (no secrets needed)

.dockerignore:
- Excludes node_modules, .next, build artifacts
- Excludes dev files, logs, and IDE configs
- Keeps Docker image size minimal

Image will be available at:
ghcr.io/valknarness/units-ui:latest

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-08 09:32:42 +01:00
parent bd3a9a49d1
commit 365b8ed328
4 changed files with 233 additions and 0 deletions

53
.dockerignore Normal file
View File

@@ -0,0 +1,53 @@
# Dependencies
node_modules
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Next.js
.next
out
# Production
build
dist
# Misc
.DS_Store
*.pem
# Debug
*.log
# Local env files
.env*.local
.env
# Vercel
.vercel
# TypeScript
*.tsbuildinfo
next-env.d.ts
# Git
.git
.gitignore
# IDE
.vscode
.idea
*.swp
*.swo
# Testing
coverage
.nyc_output
# Turbopack
.turbo
# Documentation
README.md
IMPLEMENTATION_PLAN.md

64
.github/workflows/docker-build-push.yml vendored Normal file
View File

@@ -0,0 +1,64 @@
name: Build and Push Docker Image
on:
push:
branches:
- main
tags:
- 'v*'
pull_request:
branches:
- main
env:
REGISTRY: ghcr.io
IMAGE_NAME: ${{ github.repository }}
jobs:
build-and-push:
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Log in to GitHub Container Registry
uses: docker/login-action@v3
with:
registry: ${{ env.REGISTRY }}
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Extract metadata (tags, labels) for Docker
id: meta
uses: docker/metadata-action@v5
with:
images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
tags: |
type=ref,event=branch
type=ref,event=pr
type=semver,pattern={{version}}
type=semver,pattern={{major}}.{{minor}}
type=semver,pattern={{major}}
type=sha,prefix={{branch}}-
type=raw,value=latest,enable={{is_default_branch}}
- name: Build and push Docker image
uses: docker/build-push-action@v5
with:
context: .
push: ${{ github.event_name != 'pull_request' }}
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
cache-from: type=gha
cache-to: type=gha,mode=max
platforms: linux/amd64,linux/arm64
- name: Image digest
run: echo ${{ steps.meta.outputs.digest }}

50
Dockerfile Normal file
View File

@@ -0,0 +1,50 @@
# Multi-stage Dockerfile for Next.js 16 static export
# Stage 1: Dependencies
FROM node:22-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
# Install pnpm
RUN corepack enable && corepack prepare pnpm@latest --activate
# Copy package files
COPY package.json pnpm-lock.yaml ./
# Install dependencies
RUN pnpm install --frozen-lockfile
# Stage 2: Builder
FROM node:22-alpine AS builder
WORKDIR /app
# Install pnpm
RUN corepack enable && corepack prepare pnpm@latest --activate
# Copy dependencies from deps stage
COPY --from=deps /app/node_modules ./node_modules
# Copy source code
COPY . .
# Build the application (static export)
RUN pnpm build
# Stage 3: Runner (serve static files)
FROM nginx:alpine AS runner
# Copy custom nginx config
COPY --from=builder /app/nginx.conf /etc/nginx/nginx.conf
# Copy static files from build
COPY --from=builder /app/out /usr/share/nginx/html
# Expose port 80
EXPOSE 80
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD wget --no-verbose --tries=1 --spider http://localhost/ || exit 1
# Start nginx
CMD ["nginx", "-g", "daemon off;"]

66
nginx.conf Normal file
View File

@@ -0,0 +1,66 @@
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Logging
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
# Performance
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# Gzip compression
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript;
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# 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";
}
# Next.js static files
location /_next/static/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# Handle client-side routing
location / {
try_files $uri $uri.html $uri/ /index.html;
}
# Health check endpoint
location /health {
access_log off;
return 200 "healthy\n";
add_header Content-Type text/plain;
}
# Error pages
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
}
}