Cara Containerize Application Next JS Menggunakan Docker

Siapkan Project NextJS nya terlebih dahulu

pastikan kamu memiliki project Next JS yang sudah siap deploy, jika sudah maka kamu bisa melanjutkan ke step berikutnya.

Memahami Analogi antara Dockerfile dan Docker Compose

1. Dockerfile = Resep Masakan 🍲

Dockerfile adalah seperti sebuah resep individu untuk memasak satu hidangan tertentu. Misalnya, jika ingin membuat "Nasi Goreng Spesial," resep ini akan menjelaskan:

• Bahan yang dibutuhkan (Base image seperti node:18 atau php:8.2)
• Langkah-langkah memasak (Perintah RUN, COPY, CMD)
• Cara menyajikannya (Port yang diekspos, environment variables)

Jadi, Dockerfile hanya bertanggung jawab untuk membangun satu jenis hidangan (container) yang bisa dieksekusi secara mandiri.

2. Docker Compose = Buku Resep 📖

Docker Compose (docker-compose.yml) adalah seperti buku masakan yang berisi beberapa resep yang harus dimasak bersama untuk membuat satu set makanan lengkap.

Misalnya, jika ingin menyajikan "Paket Makan Malam", kita butuh:

1. Nasi Goreng (App Service, dari Dockerfile)
2. Sup Ayam (Database, pakai MySQL)
3. Minuman (Redis untuk caching)

Docker Compose memungkinkan kita menjalankan semua hidangan tersebut dalam satu perintah (docker-compose up), mengatur hubungan antar-container, dan menentukan environment masing-masing.

Buat Dockerfile

Dockerfile merupakah sebuah file yang berisi serangkaian intruksi untuk membangun sebuah docker image, jadi dengan adanya Dockerfile ini kita dapat melakukan otomatisasi pembuatan image berdasarkan aturan aturan yang sudah kita tentukan pada file ini.

dengan adanya Dockerfile maka kedepan nya kita akan mudah sekali melakukan proses deploy kedalam VPS kita. Pada sebuah Dockerfile umumnya dibagun dengan beberapa Section penting sebagai contoh:

Dalam Dockerfile, kita mendefinisikan:

1. Base Image – Sistem operasi atau runtime awal yang digunakan.
2. Dependencies – Library dan paket yang diperlukan.
3. Configurations – Pengaturan seperti environment variables.
4. Commands – Perintah untuk menjalankan aplikasi.

untuk lebih jelasnya kita akan buat sebuah dockerfile dengan tujuan agar project Next JS kita bisa terdeploy dengan baik.

DockerFile

Pada root Project, coba buat file bernama Dockerfile kemudian isi dengan perintah berikut

# Base image
FROM node:18-alpine

# Set working directory
WORKDIR /app

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy project files
COPY . .

# Build the Next.js application
RUN npm run build

# Expose port
EXPOSE 3000

# Start the application
CMD ["npm", "start"]

Buat Docker Compose

Docker Compose adalah alat yang digunakan untuk mendefinisikan dan menjalankan multi-container Docker applications. Dengan menggunakan file docker-compose.yml, kamu dapat mengatur beberapa container, jaringan, dan volume dalam satu file. Docker Compose memungkinkan kamu untuk menjalankan seluruh aplikasi yang terdiri dari beberapa layanan (seperti database, backend, dan frontend) dengan satu perintah.

docker-compose.yaml

buat sebuah file juga bernama docker-compose.yaml di root directory project

version: '3.8'

services:
  web:
    build: .
    ports:
      - "1111:3000"
    environment:
      - NODE_ENV=production
    restart: always
    volumes:
      - .:/app
      - /app/node_modules
      - /app/.next

volumes:
  node_modules:
  next:

pada docker compose saya mendefinisikan bahwa aplikasi yang sedang berjalan pada container ada dalam port 3000, namun saya akan mengekspos keluar container dengan port 1111 jadi nantinya saya dapat akses website ini dengan port 1111 bukan lagi 3000. jangan lupa tambahkan juga dockerignore

.dockerignore

buat sebuah file di root project bernama .dockerignore kemudian tambahkan folder dan file yang akan di ignore

node_modules
.next
.git
.env*
.dockerignore
Dockerfile
docker-compose.yml
README.md

setelah semuanya terbuat. kamu bisa test terlebih dahulu pada docker di local device kamu, jika kamu belum memiliki docker di local, kamu bisa mengikuti cara ini untuk menginstall docker.

(Cara menginstall docker di Linux Ubuntu) (soon)

setelah kamu memiliki docker kamu bisa jalankan perintah ini

sudo docker compose up --build

perintah ini akan meracik apa yang ada di Dockerfile dan DockerCompose, konfigurasi akan dilakukan secara otomatis sesuai resep yang sudah dibuat sebelumnya. maka ketika perintah ini selesai di eksekusi semua, aplikasi kamu akan running di http://localhost:1111.

Deploy to VPS

selanjutnya saya akan coba deploy project undangan digital milik saya kedalam VPS menggunakan docker, kita langsung saja buka terminal vps, kemudian buka folder tempat kamu menyimpan application, saya menyimpan semua application saya didalam directory app, maka terlebih dahulu saya akan masuk dulu ke directory app kemudian clone git project saya yang sudah memiliki aplikasi nextjs dan konfigurasi docker didalam nya.

setelah selesai kamu clone, langsung saja jalankan perintah

sudo docker compose up -d --build

Perintah ini seperti seorang manajer pabrik (sudo) yang menggunakan buku panduan (docker compose) untuk menyalakan semua mesin (up) di pabrik secara otomatis di latar belakang (-d) setelah memastikan semua mesin sudah diperbarui dan siap digunakan (--build).

Setelah proses build di docker selesai, maka aplikasi kamu seharusnya sudah running di port http://ip-public:1111 sesuai dengan yang sudah kita ekspos port nya di docker.yaml sebelumnya bahwa port untuk ke luar container diatur kedalam nilai 1111

kamu bisa mengunjungi http://ip-public:1111 untuk mengetest apakah website sudah terdeploy dengan baik atau belum.

Jika sudah, langkah selanjutnya kamu akan membutuhkan cara untuk menghubungkan domain dan menginstall SSL agar project kamu semakin mantap. kamu bisa mengikuti tutorial berikut untuk pemasangan domain

Cara menghubungkan Domain dan Install SSL di VPS pada container docker