Deploy Next.js di Docker (Frontend Only) dengan pnpm
🌟 Apa itu Next.js ?
Next.js adalah framework React yang populer untuk membangun aplikasi web modern. Dengan fitur SSR (Server Side Rendering), ISR (Incremental Static Regeneration), dan static export, Next.js fleksibel dipakai di berbagai kebutuhan. Tapi, masalah sering muncul saat deploy: beda server bisa bikin environment berantakan. 🤯
Di sinilah Docker masuk. Docker mengemas aplikasi ke dalam container yang portable, konsisten, dan mudah di-deploy ke server mana pun. Ditambah pnpm sebagai package manager yang lebih cepat dan hemat disk, proses build & deploy jadi makin efisien. ⚡
Artikel ini akan fokus pada frontend only: cara membungkus project Next.js ke Docker dengan tiga file utama:
Dockerfile🐳.dockerignore🚫docker-compose.yml⚙️
Dengan tiga file ini saja, aplikasi kamu bisa langsung jalan di server. Mari kita mulai! 🚀
📂 Struktur Folder Project
Sebelum lanjut, pastikan struktur project kamu mirip seperti ini:
saas-frontend/
.
├── Dockerfile
├── app
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── app.tsx
├── components
│ ├── auth-page.tsx
│ ├── backup-management.tsx
│ ├── dashboard-page.tsx
│ ├── deployment-page.tsx
│ ├── deployment-source-selector.tsx
│ ├── docker-deployment-form.tsx
│ ├── docker-hub-showcase.tsx
│ ├── existing-app-form.tsx
│ ├── git-deployment-form.tsx
│ ├── manual-payment-page.tsx
│ ├── otp-verification.tsx
│ ├── payment-page.tsx
│ ├── profile-page.tsx
│ ├── ready-apps-showcase.tsx
│ ├── theme-provider.tsx
│ ├── top-up-page.tsx
│ └── ui
│ ├── accordion.tsx
│ ├── alert-dialog.tsx
│ ├── alert.tsx
│ ├── aspect-ratio.tsx
│ ├── avatar.tsx
│ ├── badge.tsx
│ ├── breadcrumb.tsx
│ ├── button.tsx
│ ├── calendar.tsx
│ ├── card.tsx
│ ├── carousel.tsx
│ ├── chart.tsx
│ ├── checkbox.tsx
│ ├── collapsible.tsx
│ ├── command.tsx
│ ├── context-menu.tsx
│ ├── dialog.tsx
│ ├── drawer.tsx
│ ├── dropdown-menu.tsx
│ ├── form.tsx
│ ├── hover-card.tsx
│ ├── input-otp.tsx
│ ├── input.tsx
│ ├── label.tsx
│ ├── menubar.tsx
│ ├── modal.tsx
│ ├── navigation-menu.tsx
│ ├── pagination.tsx
│ ├── popover.tsx
│ ├── progress-bar.tsx
│ ├── progress.tsx
│ ├── radio-group.tsx
│ ├── resizable.tsx
│ ├── scroll-area.tsx
│ ├── select.tsx
│ ├── separator.tsx
│ ├── sheet.tsx
│ ├── sidebar.tsx
│ ├── skeleton.tsx
│ ├── slider.tsx
│ ├── sonner.tsx
│ ├── switch.tsx
│ ├── table.tsx
│ ├── tabs.tsx
│ ├── textarea.tsx
│ ├── theme.tsx
│ ├── toast.tsx
│ ├── toaster.tsx
│ ├── toggle-group.tsx
│ ├── toggle.tsx
│ ├── tooltip.tsx
│ ├── use-mobile.tsx
│ └── use-toast.ts
├── components.json
├── docker-compose.yml
├── hooks
│ ├── use-mobile.ts
│ └── use-toast.ts
├── lib
│ ├── api.ts
│ └── utils.ts
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public
│ ├── placeholder-logo.png
│ ├── placeholder-logo.svg
│ ├── placeholder-user.jpg
│ ├── placeholder.jpg
│ └── placeholder.svg
├── styles
│ └── globals.css
├── tsconfig.json
└── types
└── index.ts
👉 Catatan: Folder Dockerfile, docker-compose.yml, dan .dockerignore berada di root project.
📦 1. Buat Dockerfile
File ini adalah resep bagaimana aplikasi Next.js kamu dibuild & dijalankan di dalam Docker. Kita pakai multi-stage build biar image akhir tetap ramping.
# =============================
# Stage 1: Build Next.js
# =============================
FROM node:18-alpine AS builder
# Install pnpm
RUN npm install -g pnpm
WORKDIR /app
# Copy package.json & lockfile
COPY package.json pnpm-lock.yaml* ./
# Install dependencies (skip frozen lockfile supaya gak error)
RUN pnpm install --no-frozen-lockfile
# Copy semua source code
COPY . .
# Build Next.js
RUN pnpm build
# =============================
# Stage 2: Production Image
# =============================
FROM node:18-alpine AS runner
ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1
WORKDIR /app
# Install pnpm
RUN npm install -g pnpm
# Copy manifest & install prod deps
COPY package.json pnpm-lock.yaml* ./
RUN pnpm install --prod --no-frozen-lockfile
# Copy hasil build
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/next.config.mjs ./
COPY --from=builder /app/package.json ./
EXPOSE 3000
CMD ["pnpm", "start"]
👉 Penjelasan singkat:
Stage builder💻: install deps + build Next.js.Stage runner🏃: hanya ambil hasil build + prod dependencies.- Hasilnya: image lebih kecil & cepat dipakai.
🚫 2. Buat .dockerignore
File ini memastikan folder/file yang nggak penting nggak ikut masuk ke dalam image. Efeknya build lebih cepat & size lebih kecil.
node_modules
.docker
.git
Dockerfile
.dockerignore
npm-debug.log
pnpm-debug.log
⚙️ 3. Buat docker-compose.yml
Dengan docker-compose, kamu bisa jalanin Next.js cuma dengan satu perintah.
services:
frontend:
build: .
container_name: saas-frontend
ports:
- "3000:3000"
environment:
- NODE_ENV=production
restart: always
👉 Penjelasan:
build: .🔨 → build image dari Dockerfile yang ada di root.ports🌐 → map port 3000 container → host.restart: always🔄 → container otomatis nyala ulang kalau mati.
▶️ 4. Jalankan Project
# Build image & run container
docker compose up -d --build
# Cek container jalan
docker compose ps
# Lihat log
docker compose logs -f frontend
Lalu buka 👉 http://localhost:3000 atau IP:3000✨
Berikut tampilan log nya yang bisa kita lihat dibawah ini:
📝 Kesimpulan
Dengan konfigurasi sederhana ini, kamu sudah bisa:
- Membuat Dockerfile 🐳 untuk membangun dan menjalankan aplikasi Next.js dengan pnpm.
- Menggunakan .dockerignore 🚫 agar image tetap ringan dan efisien.
- Menjalankan aplikasi dengan docker-compose.yml ⚙️ hanya dalam satu perintah.
- Memahami struktur folder project sehingga tahu di mana harus meletakkan file Docker terkait.
🔥 Hasil akhirnya: aplikasi Next.js kamu bisa dijalankan di environment apa pun dengan konsisten, cepat dibuild, ringan saat deploy, dan mudah di-maintain. Tinggal tambah reverse proxy (Caddy/Nginx/Traefik) kalau mau dipasang di production dengan domain + SSL. 🎉
Buat kamu yang lagi Deploy aplikasi dengan Next.js dan pengen jalan di Kubernetes dengan domain custom + SSL otomatis, artikel…
DevOps Itu Apa, Sih? 🤝 Bayangkan tim yang bisa merilis fitur cepat tapi tetap stabil. Kuncinya bukan hanya tool, melainkan…