DEV Community

Cover image for Article 3: Docker + GitHub Actions
Woulf
Woulf

Posted on • Edited on

Article 3: Docker + GitHub Actions

#docker #githubactions #cicd #devops

Automating the Docker build of my portfolio with GitHub Actions, publishing to Docker Hub, and seamless redeployment on Kubernetes.

Automating the build and push of a Node.js app

In this third step, I tackle the containerization of my Next.js application (personal portfolio), and the creation of a CI/CD pipeline to automate the Docker image build, its push to Docker Hub, and the automatic redeployment to Kubernetes.

CI/CD: Building the Docker image

The goal is to:

  • Produce a lightweight, optimized Docker image
  • Automatically publish it to Docker Hub
  • Restart the deployment on the cluster with zero downtime

Everything is defined in a GitHub Actions pipeline located in the application repository, under .github/workflows/deploy.yml.

Building the Docker image

Here is the Dockerfile used:

# Step 1: Base image for build and run
FROM node:23-alpine AS base
WORKDIR /app
ENV NEXT_TELEMETRY_DISABLED=1

# Step 2: Install dependencies
FROM base AS deps
COPY package.json package-lock.json ./
RUN npm ci

# Step 3: Build and fetch Dev.to articles securely
FROM base AS builder
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_PUBLIC_URL=https://woulf.fr
ENV NEXT_PUBLIC_EMAIL=corentinboucardpro@gmail.com

# Secure token injection via BuildKit
RUN --mount=type=secret,id=devto_token \\
  DEVTO_API_KEY=\$(cat /run/secrets/devto_token) node scripts/fetchDevtoArticles.js && npm run build

# Step 4: Final runtime image
FROM base AS runner
ENV NODE_ENV=production
ENV PORT=3000

# Create non-root user
RUN addgroup -S nodejs -g 1001 && \\
    adduser -S nextjs -u 1001 -G nodejs && \\
    mkdir .next && chown nextjs:nodejs .next

WORKDIR /app

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs
EXPOSE 3000
CMD ["node", "server.js"]
Enter fullscreen mode Exit fullscreen mode

🧠 Notes on the Dockerfile:

  • Multi-stage build: separates base, dependencies, build, and runtime phases results in a clean and minimal image.
  • Alpine base (node:23-alpine): lightweight, fast to pull, smaller attack surface (more secure).
  • Copying package*.json first: leverages Docker cache when dependencies don’t change → drastically speeds up builds.
  • Using npm ci: ensures a clean install based on package-lock.json without re-resolving versions.
  • Secure token injection via BuildKit: avoids exposing secrets in the image or logs. Token is available only during the build.
  • Dev.to article fetching during build: keeps content updated without committing it to the repo.
  • Non-root user (nextjs): improves runtime security.
  • Copying only required folders (.next/standalone, .next/static): recommended by Next.js for Docker deployments.
  • EXPOSE 3000: informative for docs and some tools.

🔐 Result: a lightweight, secure, fast-to-build Docker image ready for production.

Pipeline in the application repository

The deploy.yml pipeline contains two jobs:

  1. Build & push the image
  2. Redeploy to the Kubernetes cluster 
name: Deploy Website

on:
  push:
    branches:
      - main

jobs:
  docker:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up QEMU
        uses: docker/setup-qemu-action@v3

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

      - name: Login to Docker Hub
        uses: docker/login-action@v3
        with:
          username: \${{ secrets.DOCKER_USERNAME }}
          password: \${{ secrets.DOCKER_PASSWORD }}

      - name: Build and push
        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
          tags: woulf/portfolio:latest
          secrets: |
            "devto_token=\${{ secrets.DEVTO_TOKEN }}"

  rollout_k8s:
    runs-on: ubuntu-latest
    needs: docker
    steps:
      - name: Set up Kubernetes context
        uses: azure/k8s-set-context@v3
        with:
          kubeconfig: \${{ secrets.KUBECONFIG }}

      - name: Restart Deployment
        run: |
          kubectl rollout restart deployment/portfolio -n default
          kubectl rollout status deployment/portfolio -n default
Enter fullscreen mode Exit fullscreen mode

🧠 Notes on the pipeline:

  • Auto-trigger on push to main: deploys automatically on merge, great for rolling releases.
  • Modular workflow: two isolated jobs (docker, rollout_k8s) for clarity and maintainability.
  • Official Docker action with BuildKit: handles cache, secrets, multi-platform builds.
  • Secrets via secrets.*: no credentials in code, tokens injected at build time only.
  • --mount=type=secret: ensures temporary use of secrets without exposing them in the final image.
  • Pushes to Docker Hub (woulf/portfolio:latest): versioned and publicly accessible.
  • Kubernetes redeploy with zero downtime: kubectl rollout restart updates the pod smoothly.
  • Deployment status check: prevents continuing if deployment fails.
  • needs: docker: guarantees the image is pushed before attempting redeploy.

🔄 Result: a robust, fully automated CI/CD pipeline that updates content, rebuilds your Docker image, and redeploys to Kubernetes, all from a single push.

Secret management

No credentials are hardcoded. Everything is securely stored via GitHub Secrets:

  • DOCKER_USERNAME / DOCKER_PASSWORD → for Docker Hub
  • KUBECONFIG → to connect to the MicroK8s cluster remotely
  • DEVTO_TOKEN → to fetch Dev.to articles automatically during build

Result

✅ On every push:

  • Dev.to articles are fetched
  • Docker image is rebuilt and pushed
  • App is redeployed with no interruption

💡 Next steps:

  • Add Trivy scan
  • Add a HEALTHCHECK
  • Reduce production dependencies

➡️ In the next article, I’ll explain how I versioned the Kubernetes infrastructure in a separate repository and set up a GitOps pipeline to keep the cluster in sync.

Top comments (0)