Phát Triển Next.js Version 15 Với Bun Bằng Docker: Hướng Dẫn Chi Tiết Từ A Đến Z

Next.js là một framework mạnh mẽ, phổ biến để xây dựng các ứng dụng React hiện đại. Kết hợp với Docker, bạn có thể đơn giản hóa quá trình phát triển, triển khai và quản lý ứng dụng. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách thiết lập môi trường phát triển Next.js bằng Docker một cách hiệu quả.

1. Tại Sao Nên Sử Dụng Docker Cho Next.js?

Docker giúp bạn:

• Tạo môi trường nhất quán: Tránh xung đột giữa các môi trường trên máy cục bộ và máy chủ.
• Dễ dàng triển khai: Chạy ứng dụng trên mọi máy chủ hỗ trợ Docker.
• Quản lý hiệu quả: Tích hợp CI/CD và mở rộng quy mô dễ dàng.

2. Cài Đặt Docker Và Chuẩn Bị Dự Án Next.js

2.1. Cài Đặt Docker

• Tải và cài đặt Docker Desktop từ Docker.

• Kiểm tra cài đặt bằng lệnh:

docker --version

2.2. Tạo Dự Án Next.js

• Khởi tạo dự án:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

3. Viết Dockerfile Cho Dự Án Next.js

Tạo file Dockerfile trong thư mục gốc dự án:

FROM oven/bun:1 AS base

WORKDIR /usr/src/app

FROM base AS install
RUN mkdir -p /temp/dev
COPY package.json bun.lockb /temp/dev/
RUN cd /temp/dev && bun install

FROM base AS prerelease
COPY --from=install /temp/dev/node_modules node_modules
COPY . .

CMD [ "bun", "run", "dev" ]

4. Tạo File docker-compose.yml

Tạo file docker-compose.yml để dễ dàng quản lý container:

version: '3.9'
services:
  fe-audio-dev:
      image: ${APP_IMAGE}
      container_name: ${APP_CONTAINER}
      restart: always
      build:
          context: ../my-nextjs-app
          dockerfile: Dockerfile
      ports:
          - ${APP_PORT}:3000
      volumes:
          - ../my-nextjs-app:/usr/src/app
          - /usr/src/app/node_modules/
      networks:
        - eco-network
      deploy:
        resources:
          limits:
            cpus: '1.0'
            memory: 1024M
          reservations:
            cpus: '0.5'
            memory: 512M

5. Chạy Ứng Dụng Next.js Với Docker

• Build image:

docker-compose build

• Chạy container:

docker-compose up

Mở trình duyệt và truy cập http://localhost:[APP_PORT] để kiểm tra ứng dụng.

• APP_PORT: Là port chạy trên host của bạn

6. Kết Luận

Docker là công cụ mạnh mẽ giúp đơn giản hóa quy trình phát triển và triển khai ứng dụng Next.js. Bằng cách thiết lập môi trường Docker đúng cách, bạn có thể tăng hiệu suất làm việc và đảm bảo tính nhất quán cho dự án của mình.

Hãy thử áp dụng ngay hôm nay và trải nghiệm sự khác biệt!

Hy vọng bài viết này sẽ giúp ích cho bạn trong hành trình phát triển ứng dụng Next.js chuyên nghiệp. 🚀