การ Deploy Next.js ด้วย Docker

การ Deploy Application ที่พัฒนาขึ้นมาด้วย Next.js นั้นมีหลายวิธี ซึ่งวิธีที่น่าจะมีผู้ใช้งานเยอะที่สุดคือการ Deploy โดยใช้ Container ซึ่งในบทความนี้เราจะพาคุณไป Deploy Next.js ลงบน Docker แบบ Step by Step โดยเริ่มจาก

ขั้นตอนการ Deploy Next.js

ขั้นตอนที่ 1. สร้าง Dockerfile

สร้าง Dockerfile ไว้ใน Root directory หลังจากนั้นให้เขียนแบบนี้

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

FROM node:23-alpine AS builder
WORKDIR /app

# Copy package.json เข้าไปใน Container เพื่อติดตั้ง Package ต่างๆ
COPY package.json ./

# ติดตั้ง Package ต่างๆที่ต้องใช้
RUN npm install

# Copy code ส่วนที่เหลือเช้าไปใน Container
COPY . .

# Build Next application
RUN npm run build

# เราควรจะใช้ Base Image ตัวเดียวกับ Builder ตัวก่อนหน้าเพื่อไม่ให้มีปัญหาเรื่อง Version
FROM node:23-alpine AS runner
WORKDIR /app

# ติดตั้ง Next CLI
RUN npm install -g next

# กำหนด Environment เป็น Production
ENV NODE_ENV=production

# Copy output และ dependencies จาก Builder
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/node_modules ./node_modules

EXPOSE 3000
# Start Next application
CMD ["npm", "run", "start"]

การทำงานของ Dockerfile นี้จะเป็นการทำงานแบบ Multi-Stages Build ซึ่งจะแบ่งออกเป็น 2 ขั้นตอนหลักๆ คือเราจะ Build ด้วย node:23-alpine ที่ตั้งชื่อว่า Builder หลังจากนั้นจะ Copy ผลลัพธ์ใน Builder ไป Run ในด้วย node:23-alpine ที่ตั้งชื่อว่า Runner

ขั้นตอนที่ 2. สร้าง .dockerignore

เอาไฟล์ที่ไม่ได้ใช้ออกจาก Container ด้วย .dockerignore สำหรับ Next.js แล้วเราจะเอา node_modules, npm-debug.log, file ของ git และ .next/cache ออก

node_modules
npm-debug.log
.next/cache
.git
.gitignore

ขั้นตอนที่ 3. Build Docker Image

หลังจากนั้นสร้าง Image ขึ้นมาด้วยคำสั่ง docker build ใน path ที่มี Dockerfile

$ docker build -t nextjs-app .

ในกรณีที่เกิด Error และต้องการ Build ซ้ำใหม่ตั้งแต่ต้นให้ใช้

$ docker build -t nextjs-app --no-cache .

ขั้นตอนที่ 4. Run Next.js

สุดท้ายเราจะนำ Image ที่ได้ในขั้นตอนก่อนหน้ามาสร้างเป็น Container ด้วยคำสั่ง docker run

$ docker run -p 3000:3000 nextjs-app

สุดท้ายเราจะได้ Next.js ที่ Run อยู่ใน Docker container แล้วโดยเข้าไปทดสอบ Application ที่ http://localhost:3000

ใช้ Docker Compose แทน Docker

ในการทำงานจริงเราจะต้องทำงานร่วมกับ Database หรือ Log server ที่อาจ Run อยู่ใน Container อื่นๆเราจึงจำเป็นต้องใช้ Docker Compose แทน Docker ธรรมดา โดยเราจะสร้างไฟล์ docker-compose.yml โดยมีเนื้อหาดังนี้

services:
  nextjs:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production

และ Run Docker Compose ด้วยคำส่ัง

$ docker-compose up -d

นำขึ้น Container Registry

อีกทางเลือกนึงคือการนำ Image ที่ได้นี้ไปใช้บน Cloud หรือ Kubernetes เราจึงต้อง Push Docker Image ที่ได้มาจากขั้นตอนต่างๆก่อนหน้านี้ขึ้นไปยัง Container Registry โดยในตัวอย่างนี้เราจะ Push Image ขึ้นไปยัง Docker Hub โดยมีขั้นตอนต่างๆ ดังนี้

ขั้นตอนที่ 1. เปลี่ยนชื่อ Image ใหม่

เราจะต้องใช้คำสั่ง docker tag เพื่อเปลี่ยนชื่อ Image เป็น username/image-name

$ docker tag nextjs-app dockerhub-username/nextjs-app

ขั้นตอนที่ 2. Push Image ขึ้นไปยัง Container Registry

หลังจากนั้นให้ Push ขึ้น Docker Hub ด้วยคำสั่ง

$ docker push dockerhub-username/nextjs-app

ขั้นตอนที่ 3. Pull Image ลงมาใช้งาน

ในขั้นตอนนี้จะเป็นการตรวจสอบผลลัพธ์ที่ได้จากขั้นตอนที่ 2 โดยเราจะทดสอบ Pull Image จาก Container Registry ลงมาใช้งานด้วยคำสั่ง Pull

$ docker pull dockerhub-username/nextjs-app

ถ้าต้องการทดสอบ Application เราต้อง Run Container ขึ้นมาด้วยคำสั่ง

$ docker run -p 3000:3000 dockerhub-username/nextjs-app