สำหรับ Next.js

การลดขนาด Image Docker สำหรับ Next.js

เรื่องราว

เรื่องนี้เกิดขึ้นจากการ build image ด้วย Docker แล้วพบว่า ขนาด Image สูงมาก ประมาณ 1.2-1.7 GB

ก็เลยสงสัยว่า มันหนักอะไรตรงไหน ก็เลยไปดู Layer ที่ Build

ปรากฏว่า ไปเยอะเอาตอนที่ copy node_modules ก็เลยอยากรู้ว่าเป็นที่ Project ไหม

โดยเริ่มต้นจากการ setup ขึ้นมาใหม่

เริ่ม setup project ใหม่

npx create-next-app@latest

แล้วก็ setup ประมาณนี้

✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … Yes
✔ Would you like to customize the import alias (`@/*` by default)? … Yes
✔ What import alias would you like configured? … @/*

การ setup Dockerfile และ dockerignore

ก่อนอื่นเราก็ต้องมาตั้ง dockerignore ก่อนที่จะ build

โดยผมจะใส่แค่ node_modules อันเดียวเพื่อทดสอบ

node_modules

ต่อไปก็ Dockerfile

ของผมจะเริ่มจากการ ทำ Build ง่ายๆ ก่อน

FROM node:22-alpine AS build

WORKDIR /app

COPY package.json ./

RUN npm install

COPY . .

RUN npm run build

EXPOSE 3000

CMD [ "npm", "start" ]

เริ่มทดสอบ Build ด้วย Docker

docker build . -t next-app

ตรวจสอบ Layer ของ image

โดยการตรวจสอบ layer ของ image สามารถทำได้ 2 วิธี หลักๆ คือ command line และ docker desktop ที่แท็บ image แล้วเลือก image ของเรา

ตัวอย่างการใช้ ดู Layer ของ image ด้วย command line (กรณีไม่ได้ใช้ docker desktop)

docker history <ชื่อ image>

ของผม ชื่อ image จะใช้เป็น next-app

docker history next-app

ตัวอย่างการใช้ Docker Desktop เพื่อดู Layer ของ image

1. เปิด Docker Desktop

2. เลือก image จากแท็บ ฝั่งซ้าย

3. ค้นหาด้วยชื่อของ image

4. เลือก image ที่จะดู

5. ตรวจสอบ layer

ก็จะได้หน้าตาประมาณนี้

เริ่มต้นหาสาเหตุ

จากขั้นตอนก่อนหน้านี้ พบว่าการรันคำสั่ง npm install นั้น ใช้งาน size อยู่ที่ 773.62MB (สูงที่สุด)

ซึ่ง นี่คือ project ที่ setup มาใหม่

ลองเพิ่ม Multi-stage builds + omit=dev

Dockerfile อันนี้จะเพิ่ม stage เข้ามา เป็นการ แยก build​ กับ runtime ออกจากกัน

และ npm install --omit=dev ที่ runtime stage เพื่อ ลดขนาดของ folder node_modules

FROM node:22-alpine AS build

WORKDIR /app

COPY package.json ./

RUN npm install

COPY . .

RUN npm run build

FROM node:22-alpine AS runtime

WORKDIR /app

COPY --from=build /app/package.json /app/package.json

COPY --from=build /app/.next /app/.next

COPY --from=build /app/public /app/public

RUN npm install --omit=dev

EXPOSE 3000

CMD [ "npm", "start" ]

ผลลัพธ์

จะเห็นได้ว่าคำสั่ง npm install --omit=dev ทำให้ขนาดลดลงเหลือ 684.35MB จาก 773.62MB

ซึ่งลดไปแค่ 54.62MB (น้อยมาก) ซึ่งนั่นยังไม่พอสำหรับเรา

เปลี่ยน Next Output เป็น standalone

การทำงานของ Next.js Standalone Mode

ปกติแล้ว เมื่อเราสร้างแอป Next.js และทำการ build (next build), Next.js จะสร้างไฟล์ทั้งหมดภายใน .next

ซึ่งรวมถึงไฟล์ที่ใช้ในระหว่างการพัฒนา แต่ถ้าเราใช้โหมด Standalone

Next.js จะ แยกเฉพาะไฟล์ที่จำเป็น สำหรับการรัน production ออกมา

ซึ่งโครงสร้าง folder ของ build stand alone จะมี 2 ส่วนหลักๆคือ

.next/standalone กับ .next/static

แก้ไขไฟล์ next.config

ให้เพิ่ม output เป็น standalone

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: 'standalone'
};

export default nextConfig;

และ แก้ Dockerfile เป็น

FROM node:22-alpine AS build

WORKDIR /app

COPY package.json ./

RUN npm install

COPY . .

RUN npm run build

FROM node:22-alpine AS runtime

WORKDIR /app

COPY --from=build /app/.next/standalone /app

COPY --from=build /app/.next/static /app/.next/static

COPY --from=build /app/public /app/public

EXPOSE 3000

CMD ["node", "server.js"]

หลังจากนั้น ลอง build ใหม่

จะเห็นได้ว่า ขนาดของ image ลดลงไปเหลือ 204.56MB

เพียงเท่านี้ขนาดของ image docker สำหรับ Next.js ก็ลดลงแล้ว