🚀 Portfolio Next.js – Sẵn sàng cho DevOps

Dự án portfolio cá nhân của tôi được xây dựng trên Next.js, sử dụng Docker để container hóa, triển khai trên AWS EC2 (Free Tier) và tự động hóa với GitHub Actions CI/CD cùng với Terraform cho Infrastructure as Code.

Dự án này không chỉ thể hiện kỹ năng frontend (React/Next.js) mà còn tích hợp các thực hành DevOps (CI/CD, Docker, Cloud, IaC).

⚡ Quy trình làm việc

Quy trình DevOps

📑 Mục lục

• ✨ Tính năng nổi bật
• 🛠️ Công nghệ sử dụng
• 📂 Cấu trúc dự án
• ⚡ Quy trình làm việc
• 💻 Chạy ứng dụng cục bộ
• 📦 Cài đặt Docker
• ☁️ Triển khai trên AWS EC2
• 🤖 GitHub Actions CI/CD
• 🧩 Terraform cho Infrastructure
• 📸 Ảnh chụp màn hình
• 👨‍💻 Tác giả

✨ Tính năng nổi bật

• ⚛️ Portfolio hiện đại được xây dựng với Next.js (SSR + React 18).
• 📱 Thiết kế responsive cho cả desktop và mobile.
• 🐳 Hoàn toàn Docker hóa (xây dựng đa giai đoạn, tối ưu cho sản xuất).
• ☁️ Triển khai trên AWS EC2 Free Tier.
• 🔄 Tự động hóa pipeline CI/CD với GitHub Actions:
  • Chạy kiểm tra (npm run build).
  • Xây dựng và đẩy hình ảnh Docker lên DockerHub.
  • SSH vào EC2 và tự động triển khai lại.
• 📜 Hạ tầng được tự động hóa bằng Terraform.

🛠️ Công nghệ sử dụng

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

📂 Cấu trúc dự án

Cấu trúc thư mục của dự án như sau:

portfolio/
├── .github/
│   └── workflows/
│       └── main.yml
├── public/
├── src/
│   ├── components/
│   ├── pages/
│   └── styles/
├── Dockerfile
└── package.json

💻 Chạy ứng dụng cục bộ

Để chạy dự án này trên máy cục bộ, bạn có thể làm theo các bước sau:

1. Clone kho lưu trữ:

   Copy

   git clone git@github.com:ritesh355/portfolio.git
   cd portfolio

2. Cài đặt các phụ thuộc:

   Copy

   npm install

3. Chạy máy chủ phát triển:

   Copy

   npm run dev

4. Truy cập vào http://localhost:3000 để xem ứng dụng.

📦 Cài đặt Docker

Để xây dựng hình ảnh Docker cho ứng dụng của bạn:

1. Xây dựng hình ảnh:

   Copy

   docker build -t ritesh355/nextjs-portfolio:latest .

2. Chạy container:

   Copy

   docker run -d -p 3000:3000 ritesh355/nextjs-portfolio:latest

3. Truy cập vào http://localhost:3000 để xem ứng dụng đang chạy trong Docker.

☁️ Triển khai trên AWS EC2

Để triển khai ứng dụng lên AWS EC2, bạn làm theo các bước sau:

1. Khởi động một phiên bản Ubuntu EC2 Free Tier.

2. Sau khi kết nối với EC2, cài đặt Docker:

   Copy

   sudo apt update && sudo apt install -y docker.io
   sudo usermod -aG docker ubuntu

3. Kéo và chạy hình ảnh:

   Copy

   docker pull ritesh355/nextjs-portfolio:latest
   docker run -d -p 80:3000 ritesh355/nextjs-portfolio:latest

4. Truy cập vào http://EC2-Public-IP để xem ứng dụng đã triển khai.

🤖 GitHub Actions CI/CD

Tập tin workflow được đặt trong .github/workflows/main.yml. Dưới đây là quy trình làm việc:

1. Chạy kiểm tra (npm run build).

2. Xây dựng và đẩy hình ảnh lên DockerHub.

3. SSH vào EC2, kéo hình ảnh mới và khởi động lại container.

Ví dụ về 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

👨‍💻 Tác giả

Ritesh Singh

🌐 LinkedIn
|
📝 Hashnode
|
💻 GitHub

⚡ Xây dựng với ❤️ bằng Next.js + Docker + AWS + DevOps