Cara Deploy Aplikasi React dan Node.js di VPS

Halo, Kawan Belajar!
Ketika pertama kali mendengar deploy aplikasi web ke server, pastinya kita akan menganggap hal ini sangat sulit. Akan tetapi, dengan panduan yang tepat, proses ini bisa Anda kuasai dengan mudah.

Dalam artikel ini, kami akan membahas step-by-step cara melakukan deploy aplikasi React (yang dibangun menggunakan Vite) dan juga backend Node.js ke layanan Kilat VM 2.0 ke layanan Kilat VM 2.0, salah satu solusi VPS andalan dari CloudKilat yang bisa Anda kelola penuh lewat SSH.

Sebagai contoh, kami akan menggunakan proyek open-source berjudul PokéTrove. Aplikasi ini dibangun menggunakan React 19, Tailwind CSS, Vite, serta data dari PokéAPI.

Panduan ini ditulis berdasarkan pengujian langsung menggunakan konfigurasi berikut:

• Sistem Operasi: Ubuntu 22.04 LTS
• Node.js: v20.19.2
• NPM: 11.4.2
• Git: 2.34.1
• Nginx: 1.18.0 (Ubuntu)

Jadi, jika Anda punya proyek React serupa dan ingin mencoba meng-online-kannya di server sendiri, panduan ini akan cocok untuk Anda. Penasaran bagaimana tahapannya? Yuk, kita bahas satu per satu secara detail!

A. Prasyarat

Sebelum memulai proses deployment, ada beberapa hal yang perlu Anda siapkan. Pastikan poin-poin berikut ini sudah terpenuhi ya:

1. Akses SSH ke Kilat VM 2.0

Anda perlu memiliki akses login ke server Kilat VM melalui protokol SSH. Umumnya, setelah layanan aktif, Anda akan mendapatkan detail login seperti:

• Alamat IP publik VM
• Username (biasanya root)
• Kata sandi sementara

2. Node.js Versi 18 atau Lebih Tinggi

Karena proyek React (dengan Vite) membutuhkan versi Node.js modern, pastikan versi Node.js di VM adalah minimal versi 18. Anda dapat mengeceknya dengan perintah:

node -v
npm -v

Jika belum terpasang, Anda bisa menginstalnya dengan:

curl -fsSL https://deb.nodesource.com/setup_20.x | bash -

apt install -y nodejs

3. Domain atau Subdomain

Jika Anda ingin aplikasi bisa diakses menggunakan nama domain (misalnya ptrove.cloudkilat.id), pastikan:

• Anda sudah memiliki domain yang aktif

• Telah menambahkan A record di DNS yang mengarah ke IP Kilat VM

Contoh record DNS:

Nama  : @
Tipe  : A
Nilai : <ip-address-kilat-vm>

Tanpa domain pun tetap bisa, akan tetapi aksesnya hanya lewat IP publik VM saja.

4.Tool Git, NPM dan Akses sudo/root

Pastikan server Anda sudah memiliki:

• git untuk meng-clone repository aplikasi
• Hak akses root atau sudo untuk instalasi paket dan konfigurasi sistem

Untuk instalasi tool yang dibutuhkan, jalankan perintah berikut:

apt update && apt install curl git -y

Secara default, saat instalasi Node.js dilakukan, maka secara otomatis akan menginstall versi 10.8.2. Untuk install versi terbaru, jalankan perintah berikut:

npm install -g npm@11.4.2

Setelah semua prasyarat ini terpenuhi, Anda sudah siap lanjut ke tahap berikutnya untuk deploy aplikasi.

B. Deploy Aplikasi React dan Node.js di Kilat VM 2.0

1. Login ke Kilat VM

Langkah pertama, sambungkan ke server Kilat VM 2.0 Anda melalui SSH.

ssh root@<ip-kilat-vm-anda>

Gantilah <ip-kilat-vm-anda> dengan alamat IP publik dari server Kilat VM milik Anda. Jika login berhasil, Anda akan masuk ke terminal remote Kilat VM.

2. Clone Repository Aplikasi

Selanjutnya, unduh (clone) kode aplikasi dari GitHub ke dalam VM. Misalnya, kami akan menggunakan salah satu proyek bernama PokéTrove:

git clone https://github.com/fikriandrrhm19/poketrove.git

cd poketrove

Setelah perintah ini dijalankan, seluruh isi repositori akan tersalin ke server. Pastikan Anda berada dalam direktori project (Misal poketrove) sebelum melanjutkan langkah build.

3. Build Aplikasi React (Vite)

Aplikasi React perlu dibangun (build) terlebih dahulu agar dapat dijalankan di-production. Jalankan perintah berikut:

npm install

npm run build

npm install: Menginstal semua dependensi proyek.
npm run build: Membuat versi produksi dari aplikasi dan meletakkannya di folder dist/.

Setelah proses npm run build selesai, kita akan mendapatkan folder dist/ berisi file produksi aplikasi. Namun, karena folder ini berada di bawah direktori /root/, maka kita perlu memindahkannya ke lokasi yang bisa diakses Nginx.

4. Instalasi dan Konfigurasi Nginx

Install Nginx terlebih dahulu jika belum terpasang:

apt install nginx -y

Nginx berjalan sebagai user www-data, sehingga tidak bisa membaca file dari /root/. Untuk menghindari error:

• Pindahkan hasil build ke direktori publik seperti /var/www/:

mkdir -p /var/www/poketrove

cp -r /root/<nama_folder>/dist/* /var/www/poketrove/

• Atur hak akses agar bisa dibaca oleh web server:

chown -R www-data:www-data /var/www/poketrove

chmod -R 755 /var/www/poketrove

Setelah itu, buat file konfigurasi situs baru di Nginx, misalnya:

nano /etc/nginx/sites-available/poketrove

Isi dengan konfigurasi berikut:

server {
    listen 80;
    server_name namadomain.id;  # Ganti dengan domain Anda

    root /var/www/poketrove;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Gantilah server_name dan root sesuai dengan nama domain dan direktori build Anda.

Kemudian, aktifkan konfigurasi dan restart Nginx:

rm /etc/nginx/sites-enabled/default

ln -s /etc/nginx/sites-available/poketrove /etc/nginx/sites-enabled/

nginx -t

systemctl restart nginx

5. Ekstra Konfigurasi: Menambah Backend & HTTPS

a. Setup Backend Node.js

Jika Anda ingin menambahkan backend API sederhana menggunakan Node.js, Anda bisa membuat file server.js seperti ini:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3001;

app.use(express.static('dist'));

app.get('/api/health', (req, res) => {
  res.json({ status: 'ok' });
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Lalu jalankan:

npm install express

node server.js

b. Jalankan Backend dengan PM2

Agar backend tetap berjalan meskipun terminal ditutup, Anda bisa menggunakan PM2:

npm install pm2 -g
pm2 start server.js
pm2 startup
pm2 save

PM2 juga memungkinkan restart otomatis jika server reboot.

c. Tambahkan SSL (HTTPS)

Jika Anda menggunakan domain dan ingin redirect HTTPS, gunakan Certbot untuk mengatur SSL:

apt install certbot python3-certbot-nginx -y

certbot --nginx -d namadomain.id

Ikuti instruksi yang muncul di layar dan pastikan domain sudah mengarah ke IP Kilat VM Anda.

CloudKilat juga menyediakan layanan SSL komersial dari penyedia terpercaya seperti Sectigo dan GlobalSign. Dapatkan sertifikat SSL Anda di: https://www.cloudkilat.com/layanan/tambahan#sertifikat-ssl .

5. Uji Akses Aplikasi

Sekarang Anda sudah bisa mengakses aplikasi Anda:

• Jika tanpa domain:

http://<IP-Kilat-VM>:80

• Jika dengan domain dan SSL:

https://namadomain.id

Bila halaman aplikasi berhasil muncul, berarti proses deploy Anda sudah sukses!

C. Troubleshooting

Jika Anda mengalami kendala saat proses deploy atau setelah aplikasi dijalankan, di bawah ini beberapa masalah umum dan solusi yang bisa Anda coba:

Masalah Umum	Penyebab & Solusi
Halaman menunjukkan 404 saat direfresh	Ini biasanya terjadi pada aplikasi SPA (Single Page Application) seperti React. Pastikan di konfigurasi Nginx Anda ada baris: try_files $uri $uri/ /index.html; di dalam blok location /. Hal ini untuk memastikan rute yang tidak ditemukan oleh Nginx akan diteruskan ke React untuk ditangani oleh React Router.
Permission denied saat akses /root/...	Ini karena Nginx tidak diizinkan mengakses direktori root user. Solusinya adalah pindahkan folder hasil build (seperti dist/) ke lokasi yang aman, misalnya /var/www/nama-project/, lalu pastikan permission dimiliki oleh www-data.
Port 80 tidak bisa diakses	Bisa jadi firewall pada VM masih menutup port tersebut. Jalankan perintah berikut untuk membuka akses: ufw allow 'Nginx Full' atau ufw allow 80/tcp.
Tidak ada file server.js	Jika aplikasi Anda hanya terdiri dari frontend, maka file server.js tidak diperlukan. Cukup gunakan Nginx untuk menyajikan file statis hasil build dari folder dist/. Backend hanya dibutuhkan jika Anda membuat API atau fitur yang interaktif berbasis server.
Domain sudah diatur tapi tidak bisa diakses	Pastikan DNS domain Anda sudah rampung tahap propagasinya dan mengarah ke IP publik Kilat VM. Cek dengan perintah: dig domainAnda.com +short atau gunakan dnschecker.org.
Gagal pasang SSL (HTTPS)	Pastikan domain Anda sudah aktif dan mengarah ke VM sebelum menjalankan perintah Certbot. Jika error muncul, cek log di /var/log/letsencrypt/letsencrypt.log. Juga pastikan Nginx sudah jalan dan listen di port 80 sebelum Certbot dijalankan.

D. Penutup

Selamat! Anda telah berhasil melakukan deploy aplikasi React (Vite) ke Kilat VM 2.0 dan menyajikannya melalui Nginx. Bila diperlukan, Anda juga bisa melengkapi aplikasi dengan backend Node.js menggunakan Express.

Dengan pendekatan ini, Anda memiliki fleksibilitas untuk menjalankan aplikasi frontend saja, atau menambahkan dynamic backendsesuai kebutuhan proyek Anda.

Sampai jumpa di panduan berikutnya!