NuxtJS #

Nuxt.js adalah framework Vue yang opinionated dan full‑stack, menyediakan SSR, SSG, ISR, hingga server API (Nitro) dalam satu ekosistem. Kekuatan ini sering kali dibarengi dengan kompleksitas environment di local development:

• Perbedaan versi Node.js antar developer
• Masalah dependency native
• Environment variable yang tidak konsisten
• Perbedaan perilaku SSR antara mesin lokal

Docker membantu menstandardisasi semua itu. Artikel ini membahas secara mendetail dan rinci bagaimana menyusun Dockerfile dan Docker Compose untuk aplikasi Nuxt.js dalam konteks local development, dengan fokus pada DX (Developer Experience), bukan sekadar menjalankan container.

Prinsip Docker Nuxt.js #

Sebelum masuk ke teknis, kita perlu meluruskan prinsipnya:

• Fokus pada hot reload & DX, bukan image terkecil
• Source code di‑edit di host, dieksekusi di container
• Mendukung Nuxt Dev Server (Vite-based)
• Tidak mencampur concern production ke local dev

Docker untuk local dev adalah alat kolaborasi tim, bukan optimasi runtime.

Struktur Project Nuxt.js #

nuxt-app/
├── app.vue
├── components/
├── pages/
├── server/
├── public/
├── nuxt.config.ts
├── package.json
├── package-lock.json
├── Dockerfile
├── docker-compose.yml
├── .dockerignore
└── .env

Struktur ini membuat Docker menjadi bagian eksplisit dari workflow developer.

.dockerignore: Wajib #

node_modules
.nuxt
.output
.git
.gitignore
Dockerfile
.dockerignore
npm-debug.log

Tanpa .dockerignore:

• Build akan lambat
• Image membengkak
• Cache Docker tidak efektif

Kesalahan kecil ini sering luput, padahal dampaknya besar.

Dockerfile untuk Nuxt.js #

FROM node:20-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "run", "dev"]

Penjelasan Dockerfile #

1. Base Image #

node:20-alpine dipilih karena:

• Node.js LTS modern
• Image relatif kecil
• Cukup untuk local development Nuxt

Untuk production, pemilihan base image biasanya berbeda.

2. WORKDIR #

Menetapkan /app sebagai direktori kerja container agar semua path konsisten.

3. Copy package.json #

Teknik klasik Docker layer caching:

• Dependency tidak di‑install ulang setiap perubahan kode
• Iterasi development jauh lebih cepat

4. npm install (bukan npm ci) #

Untuk local development:

• Lebih fleksibel
• Lebih toleran terhadap perubahan dependency

npm ci lebih cocok untuk CI atau production image.

5. COPY source code #

Source code dicopy setelah dependency agar cache Docker tetap optimal.

6. CMD dev mode #

Menjalankan Nuxt Dev Server (Vite + Nitro) dengan hot reload.

Script npm #

"scripts": {
  "dev": "nuxt dev",
  "build": "nuxt build",
  "start": "node .output/server/index.mjs"
}

Script dev akan digunakan oleh Docker Compose.

Docker Compose Nuxt.js #

version: '3.9'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: nuxt-dev
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      NODE_ENV: development
    command: npm run dev
    depends_on:
      - db

  db:
    image: postgres:16-alpine
    container_name: nuxt-db
    environment:
      POSTGRES_USER: nuxt
      POSTGRES_PASSWORD: nuxt
      POSTGRES_DB: nuxt_dev
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

Penjelasan Docker Compose #

Service web #

• build: membangun image dari Dockerfile lokal

• ports: expose Nuxt dev server

• volumes:

  • .:/app → sinkronisasi source code
  • /app/node_modules → mencegah konflik dependency

• environment: memastikan Nuxt berjalan di mode development

• command: override CMD untuk dev server

Service Database #

Nuxt sering digunakan bersama:

• Prisma
• Drizzle
• API server Nitro

Database dimasukkan ke Compose untuk mensimulasikan environment nyata.

Environment Variable #

Gunakan:

• .env atau .env.local
• .env.example untuk dokumentasi

Hindari hardcode environment variable di Dockerfile.

Workflow Developer #

1. Jalankan:

   docker compose up --build
   

2. Akses aplikasi di http://localhost:3000

3. Edit file di pages/ atau components/

4. Hot reload langsung berjalan

5. Tidak perlu install Node.js di host

Kapan Docker Masuk Akal? #

Docker sangat masuk akal jika:

• Tim > 1 orang
• Ada SSR + database
• Butuh environment konsisten

Docker kurang masuk akal jika:

• Prototyping cepat
• Solo developer dengan setup sederhana

Engineering selalu soal konteks.

Anti‑Pattern #

• ❌ Menggunakan image production untuk local dev
• ❌ Menyimpan .nuxt di volume host
• ❌ Tidak memisahkan node_modules
• ❌ Terlalu banyak logic di Dockerfile
• ❌ Menganggap Docker selalu wajib

Best Practice #

• ✅ Gunakan volume bind mount
• ✅ Pisahkan Dockerfile dev & prod
• ✅ Jangan commit .nuxt dan .output
• ✅ Gunakan .env.example
• ✅ Jaga Dockerfile tetap sederhana

Penutup #

Dockerfile dan Docker Compose untuk Nuxt.js local development bukan tentang kompleksitas, tapi tentang keteraturan dan konsistensi tim.

Dengan setup yang tepat:

• Hot reload tetap cepat
• Onboarding developer lebih singkat
• Bug environment berkurang drastis