Menjalankan React menggunakan Docker

Docker adalah salah satu tools untuk menjalankan web service secara independen, dimana kita tidak perlu install dependencies ataupun server lokal di Komputer / Laptop kita.

React adalah salah satu framework javascript yang populer untuk membangun Frontend Website.

Berikut adalah cara yang saya gunakan untuk menjalankan React (menggunakan framework Next.js) dengan Docker

Tools

Device with minimum 8 GB RAM (Very Recommended)
Git
Docker
Docker Desktop (Optional)
Good Internet Connection

Project Setup

Siapkan project yang akan dijalankan pada docker, berikut contoh project yang saya gunakan https://github.com/axquired24/next-userlist

Clone Project ke Local laptop

git clone git@github.com:axquired24/next-userlist.git

tidak perlu melakukan npm install disini ya, karena semua proses tsb akan kita lakukan di dalam docker

Buat docker image berdasarkan project diatas, pertama siapkan filebaru dengan nama Dockerfile di folder root project tadi

kemudian isi:

# Gunakan image dari docker community yang sudah ada, disini menggunakan alpine-linux yang sudah terinstal node versi 16.17
FROM node:16-alpine as node# Jalankan perintah untuk update package list
RUN apk update && \
    apk add --no-cache curl

# Deskripsikan direktori project di dalam container docker nanti
WORKDIR /app# Copy semua file project ke dalam direktori /app
COPY . .# Jalankan perintah untuk install & build next.js
RUN npm install
RUN npm run build

# Definikan port yang akan digunakan dalam container docker
EXPOSE 3000# Jalankan npm run start di terminal
CMD ["npm", "start"]

Siapkan juga file dengan nama .dockerignore, untuk mengabaikan file / folder saat melakukan operasi project ke dalam docker

# disini saya ignore folder node_modules dan log, karena tidak perlu ikut ter-copy nanti
node_modules
npm-debug.log

Setelah persiapan diatas selesai, buka terminal di dalam project dan jalankan perintah untuk membuat docker image

# docker build -t username/namaproject folderproject
docker build -t axquired24/next-userlist .

Lalu tunggu hingga proses download, install dan build selesai (ini lumayan memakan waktu untuk kali pertama … pastikan koneksi internet bagus ya karena download lumayan besar).

Setelah berhasil tanpa error, berarti images sudah berhasil dibuat. Image ini bisa kita jalankan ke dalam satu atau lebih container dengan port yang berbeda-beda.

Berikut adalah fungsi untuk menjalankan images axquired24/next-userlist ke dalam 2 container dengan port berbeda (port 3003 dan port 3004)

# docker run [opsi] -p port-akses-utama:port-di-docker nama-project
docker run -it -p 3003:3000 axquired24/next-userlist
docker run -it -p 3004:3000 axquired24/next-userlist