DEV Community

Cover image for 🚀 Building & Deploying My Next.js Portfolio with Docker, AWS, and CI/CD"
Ritesh Singh
Ritesh Singh

Posted on

🚀 Building & Deploying My Next.js Portfolio with Docker, AWS, and CI/CD"

#devops #githubactions #aws #docker

🚀 Next.js Portfolio – DevOps Ready

This is my personal portfolio project built with Next.js, containerized with Docker, deployed on AWS EC2 (Free Tier), and automated with GitHub Actions CI/CD + Terraform for Infrastructure as Code.

It demonstrates both frontend skills (React/Next.js) and DevOps practices (CI/CD, Docker, Cloud, IaC).

⚡ Workflow

DevOps Workflow

Workflow Diagram

📸 Screenshots

about

Homepage

skills

Homepage

🚀 CI/CD Status

Build & Auto-Deploy

📑 Table of Contents

✨ Features

  • ⚛️ Modern portfolio built with Next.js (SSR + React 18).
  • 📱 Responsive design for desktop & mobile.
  • 🐳 Fully Dockerized (multi-stage build, production optimized).
  • ☁️ Deployed on AWS EC2 Free Tier.
  • 🔄 Automated CI/CD pipeline with GitHub Actions:
    • Runs tests (npm run build).
    • Builds and pushes Docker image to DockerHub.
    • SSH into EC2 and redeploys automatically.
  • 📜 Infrastructure automated with Terraform.

🛠️ Tech Stack

  • Frontend: Next.js, React, Tailwind CSS
  • Containerization: Docker, DockerHub
  • CI/CD: GitHub Actions
  • Cloud: AWS EC2 (Ubuntu 22.04, Free Tier)
  • IaC: Terraform

📂 Project Structure

Homepage

💻 Run Locally

Clone the repo:

git clone git@github.com:ritesh355/portfolio.git
cd portfolio
Enter fullscreen mode Exit fullscreen mode

Install dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

Run dev server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

then visit http://localhost:3000

📦 Docker Setup

Build the image:

docker build -t ritesh355/nextjs-portfolio:latest .
Enter fullscreen mode Exit fullscreen mode

run the container:

docker run -d -p 3000:3000 ritesh355/nextjs-portfolio:latest
Enter fullscreen mode Exit fullscreen mode

then visit http://localhost:3000

☁️ Deployment on AWS EC2

1.Launch Ubuntu EC2 Free Tier.
Homepage

2.after connetint that ec2 Install Docker:

sudo apt update && sudo apt install -y docker.io
sudo usermod -aG docker ubuntu
Enter fullscreen mode Exit fullscreen mode
  1. Pull and run image: 
  docker pull ritesh355/nextjs-portfolio:latest
docker run -d -p 80:3000 ritesh355/nextjs-portfolio:latest
Enter fullscreen mode Exit fullscreen mode

4.Visit http://EC2-Public-IP

🤖 GitHub Actions CI/CD

Located in .github/workflows/main.yml:

  • Runs tests (npm run build).

  • Builds & pushes image to DockerHub.

  • SSH into EC2, pulls new image, restarts container.

Example Workflow

name: Build, Push & Deploy with Rollback

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    # 1. Checkout repo
    - name: Checkout code
      uses: actions/checkout@v3

    # 2. Setup Node.js
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'

    # 3. Install dependencies
    - name: Install dependencies
      run: npm install --legacy-peer-deps

    # 4. Run build
    - name: Build project
      run: npm run build

    # 5. Log in to Docker Hub
    - name: Log in to Docker Hub
      uses: docker/login-action@v2
      with:
        username: ${{ secrets.DOCKER_USERNAME }}
        password: ${{ secrets.DOCKER_PASSWORD }}

    # 6. Build Docker image
    - name: Build Docker image
      run: |
        docker build -t ritesh355/nextjs-portfolio:latest \
                     -t ritesh355/nextjs-portfolio:v1 \
                     -t ritesh355/nextjs-portfolio:v1.0.0 .

    # 7. Push Docker image
    - name: Push Docker image
      run: |
        docker push ritesh355/nextjs-portfolio:latest
        docker push ritesh355/nextjs-portfolio:v1
        docker push ritesh355/nextjs-portfolio:v1.0.0

    # 8. Deploy to EC2 with rollback
    - name: Deploy to EC2
      uses: appleboy/ssh-action@v0.1.9
      with:
        host: ${{ secrets.EC2_HOST }}
        username: ${{ secrets.EC2_USER }}
        key: ${{ secrets.EC2_SSH_KEY }}
        script: |
          echo "Pulling latest Docker image..."
          docker pull ritesh355/nextjs-portfolio:latest

          # Backup old container if exists
          if docker ps -a --format '{{.Names}}' | grep -Eq "^nextjs-portfolio\$"; then
            echo "Backing up current container..."
            docker rename nextjs-portfolio nextjs-portfolio-backup
          fi

          # Run new container
          echo "Starting new container..."
          docker run -d --name nextjs-portfolio -p 80:3000 ritesh355/nextjs-portfolio:latest

          # Check if container is running
          sleep 5
          if ! docker ps --format '{{.Names}}' | grep -Eq "^nextjs-portfolio\$"; then
            echo "New container failed! Rolling back..."
            docker rm nextjs-portfolio || true
            docker rename nextjs-portfolio-backup nextjs-portfolio || true
            docker start nextjs-portfolio || true
          else
            echo "Deployment successful! Removing backup..."
            docker rm -f nextjs-portfolio-backup || true
          fi
Enter fullscreen mode Exit fullscreen mode

👨‍💻 Author

Ritesh Singh

🌐 LinkedIn
|
📝 Hashnode
|
💻GitHub

⚡ Built with ❤️ using Next.js + Docker + AWS + DevOps

Top comments (0)