CICD với CircleCI và NextJS sử dụng docker

npx create-next-app@latest --example with-jest with-jest-app

# Sử dụng Node.js 18 làm image cơ sở
FROM node:18-alpine AS base

# Thiết lập thư mục làm việc trong container
WORKDIR /app

# Bước 1: Tạo layer chứa dependencies để tối ưu build
FROM base AS dependencies

# Copy file package.json và package-lock.json vào container
COPY package.json package-lock.json* ./ 

# Cài đặt dependencies
RUN npm install --frozen-lockfile

# Bước 2: Build ứng dụng Next.js
FROM dependencies AS builder

# Copy toàn bộ mã nguồn vào container
COPY . .

# Build ứng dụng Next.js
RUN npm run build

# Bước 3: Chuẩn bị container chạy ứng dụng
FROM base AS runner

# Đặt biến môi trường NODE_ENV là production
ENV NODE_ENV=production

# Copy files cần thiết từ bước build
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/next.config.mjs ./

# Cài đặt production dependencies
RUN npm install --only=production --frozen-lockfile

# Expose cổng để container nhận request
EXPOSE 3000

ENV PORT=3000

# Command mặc định để khởi chạy ứng dụng
CMD ["npm", "start"]

#Build và chạy image Docker

docker build -t my-personal-blog .
docker run -p 3000:3000 my-personal-blog

docker login

docker tag my-personal-blog <your-dockerhub-username>/my-personal-blog

docker push <your-dockerhub-username>/my-personal-blog

version: '3.8'

services:
  client:
    image: phianhdev/my-personal-blog:latest
    container_name: Blog-FE
    build: .
    environment:
      - TZ=Asia/Ho_Chi_Minh
    restart: unless-stopped

# Cau hinh nginx neu muon
  # nginx:
  #   container_name: Blog-Nginx-Client
  #   build: ./nginx
  #   ports:
  #     - 3001:80
  #   environment:
  #     - TZ=Asia/Ho_Chi_Minh
  #   restart: unless-stopped
  #   labels:
  #     io.portainer.accesscontrol.users: admin
  #   depends_on:
  #     - client

#!/bin/bash

# Dừng tất cả các container đang chạy
docker compose stop

# Xóa các container đã dừng (không giữ lại bất kỳ container nào cũ)
docker compose rm -f

# Tải các image mới nhất từ Docker registry
docker compose pull

# Tạo và khởi chạy các container mới trong chế độ chạy nền (detached mode)
docker compose up -d

version: 2.1

# Import các orbs tái sử dụng
orbs:
  node: circleci/node@3.0.0   # Orb cho Node.js (cài đặt môi trường Node.js)
  docker: circleci/docker@1.4.0 # Orb hỗ trợ làm việc với Docker (build, push image)

jobs:
  # Job build và push Docker image
  build-and-push: 
    docker:
      - image: cimg/node:18.20.5 # Chọn image Docker để chạy môi trường Node.js
    environment: 
      DOCKER_IMAGE: phianhdev/my-personal-blog # Tên Docker image sẽ build
      DOCKER_TAG: latest # Tag của Docker image
    executor: docker/docker # Dùng executor Docker từ orb
    steps:
      - setup_remote_docker # Thiết lập môi trường Docker từ xa để build image
      - checkout # Clone source code của bạn từ repository
      - node/install-packages # Cài đặt các package cần thiết từ `package.json`
      - run:
          name: Run tests # Chạy test để kiểm tra ứng dụng
          command: |
            npm run test # Lệnh jest test trong package.json
      - docker/check: # Kiểm tra xem Docker đã sẵn sàng chưa
          docker-username: DOCKER_USER # Username Docker (Có thể cấu hình env trong circle setting env)
          docker-password: DOCKER_PASSWORD # Password Docker 
      - docker/build: # Build Docker image
          image: $DOCKER_IMAGE
          tag: $DOCKER_TAG
      - docker/push: # Push Docker image lên Docker Hub
          digest-path: /tmp/digest.txt # Lưu digest của image vào file tạm
          image: $DOCKER_IMAGE
          tag: $DOCKER_TAG
      - run:
          command: |
            echo "Digest is: $(</tmp/digest.txt)" # In ra digest của image

  # Job deploy ứng dụng lên VPS
  deploy:
    executor: docker/docker # Dùng executor Docker từ orb
    steps:
      - add_ssh_keys: # Thêm SSH key để kết nối tới server
          fingerprints:
            - FINGER_PRINT # Dùng fingerprint của SSH key để nhận diện 
            # Mình sẽ hướng dẫn ở bước sau
      - run:
          name: Debug Environment Variables # Debug các biến môi trường
          command: |
            echo "USERNAME: $USERNAME"
            echo "IP_ADDRESS: $IP_ADDRESS"
      - run:
          name: Deploy to VPS # Deploy ứng dụng lên VPS
          command: ssh -oStrictHostKeyChecking=no $USERNAME@$IP_ADDRESS "cd projects/blog-fe && bash -x deploy.sh"
			#Chạy lệnh ssh với oStrictHostKeyCheck và trỏ đến project của bạn trong VPS, run file deploy.sh

# Định nghĩa workflows để chạy các jobs
workflows:
  my-pipeline: # Tên workflows
    jobs:
      - build-and-push: # Chạy job build-and-push
          filters: # Lọc nhánh để chỉ chạy trên nhánh develop
            branches:
              only:
                - develop
      - deploy: # Chạy job deploy
          requires: # Chỉ chạy sau khi job build-and-push thành công
            - build-and-push