Deploy Aplikasi Next.js ke VPS Menggunakan Docker

4 min read

Mendeploy aplikasi Next.js ke VPS bisa jadi menantang bagi sebagian orang, apalagi jika belum pernah menyentuh Docker atau server sebelumnya. Artikel ini akan membimbing kamu langkah demi langkah untuk men-setup aplikasi Next.js di VPS menggunakan Docker, agar website kamu bisa diakses secara online dengan aman, stabil, dan bisa diskalakan ke depannya.

Apa yang Akan Kita Bangun?

Kita akan men-deploy satu aplikasi Next.js ke VPS dengan struktur sebagai berikut:

VPS dengan sistem operasi Ubuntu (bisa DigitalOcean, Linode, dll)
Docker dan Docker Compose sebagai alat utama deployment
Reverse proxy menggunakan Traefik (jika kamu ingin banyak aplikasi, tapi bagian ini bisa dilewati untuk setup sederhana). Kamu juga bisa baca setup dengan traefik di postingan sebelumnya Set up Traefik
Domain pribadi (misalnya: myportfolio.com)
SSL (HTTPS) otomatis dengan Let's Encrypt
Tidak ada database (untuk aplikasi statis atau frontend-only)

Prasyarat

Sebelum mulai, pastikan:

Kamu sudah punya VPS aktif dengan akses SSH
Domain yang bisa kamu arahkan ke IP VPS
Aplikasi Next.js sudah siap dideploy
Sudah install docker dan docker-compose di VPS

Jika belum, jalankan perintah berikut di VPS:

sudo apt update && sudo apt upgrade -y
curl -fsSL https://get.docker.com | sh
sudo apt install docker-compose-plugin
docker -v
docker compose version

Struktur Direktori

/var/www/
└── my-nextjs-app/
    ├── docker-compose.yml
    ├── .env
    └── app/

1. Persiapkan Source Code Next.js

Jika belum punya, buat project baru:

npx create-next-app@latest app

Upload ke VPS:

scp -r app/ root@your-vps-ip:/var/www/my-nextjs-app/app

2. Buat Dockerfile

Di /var/www/my-nextjs-app/app:

FROM node:18-alpine AS builder
WORKDIR /app
COPY package.json package-lock.json* ./
RUN npm install
COPY . .
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["npm", "start"]

3. Buat `docker-compose.yml`

version: '3.8'

services:
  nextjs:
    container_name: my-nextjs-app
    build:
      context: ./app
      dockerfile: Dockerfile
    restart: always
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=production
    networks:
      - default

4. Jalankan Aplikasi

cd /var/www/my-nextjs-app
docker compose up -d --build

Akses: http://your-vps-ip:3000

5. Arahkan Domain

Atur DNS:

A   @   your-vps-ip

6. (Opsional) Tambahkan Reverse Proxy dan SSL dengan Traefik

a. Struktur

/var/www/traefik/
├── traefik.yml
├── docker-compose.yml
└── acme.json

b. File `traefik.yml`

api:
  dashboard: true
entryPoints:
  web:
    address: ':80'
  websecure:
    address: ':443'
certificatesResolvers:
  letsencrypt:
    acme:
      email: you@example.com
      storage: acme.json
      httpChallenge:
        entryPoint: web

c. File `docker-compose.yml`

version: '3.8'

services:
  traefik:
    image: traefik:v3.0
    container_name: traefik
    command:
      - --configFile=/etc/traefik/traefik.yml
    ports:
      - '80:80'
      - '443:443'
    volumes:
      - ./traefik.yml:/etc/traefik/traefik.yml
      - ./acme.json:/acme.json
      - /var/run/docker.sock:/var/run/docker.sock
    networks:
      - proxy

networks:
  proxy:
    external: true

d. Jalankan Traefik

touch acme.json
chmod 600 acme.json
docker compose up -d

e. Tambahkan label pada `docker-compose.yml` Next.js

labels:
  - 'traefik.enable=true'
  - 'traefik.http.routers.my-nextjs-app.rule=Host(`mydomain.com`)'
  - 'traefik.http.routers.my-nextjs-app.entrypoints=websecure'
  - 'traefik.http.routers.my-nextjs-app.tls.certresolver=letsencrypt'

7. Restart dan Akses via Domain

docker compose up -d --build

Coba buka: https://mydomain.com

Dengan setup ini, kamu sudah punya sistem deployment yang rapi, bisa diulang, dan siap digunakan untuk banyak project ke depan.