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](https://github.com/fikriandrrhm19/poketrove)**. 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)

Tujuan utama dari panduan ini adalah membantu Anda menjalankan aplikasi React hasil build di server produksi (Kilat VM), baik dengan Nginx sebagai static file server maupun dengan penambahan backend Node.js bila diperlukan.

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

Baca juga: Cara Akses Kilat VM melalui SSH

### 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 ``` ![Versi_NodeJS.png](https://d2qpat49fx80de.cloudfront.net/Versi_Node_JS_06445df5e0.png) *Gambar 1: Versi Node.js* ![Versi_NPM.png](https://d2qpat49fx80de.cloudfront.net/Versi_NPM_5bd30bfe8d.png) *Gambar 2: Versi NPM* Jika belum terpasang, Anda bisa menginstalnya dengan: ``` curl -fsSL https://deb.nodesource.com/setup_20.x | bash - ``` ``` apt install -y nodejs ```

Catatan: Pastikan untuk menyesuaikan versi Node.js sesuai dengan kebutuhan Anda.

### 3. Domain atau Subdomain Jika Anda ingin aplikasi bisa diakses menggunakan nama domain (misalnya `ptrove.cloudkilat.id`), pastikan: * Anda sudah memiliki domain yang aktif

Baca juga: Langkah Mudah Membeli Domain di CloudKilat [Update 2025]

* Telah menambahkan A record di DNS yang mengarah ke IP Kilat VM Contoh record DNS: ``` Nama : @ Tipe : A Nilai : ``` > 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 ``` ![Install_NPM_Ver_11.png](https://d2qpat49fx80de.cloudfront.net/Install_NPM_Ver_11_2f565d1dc8.png) *Gambar 3: Instalasi NPM Versi 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@ ``` Gantilah `` dengan alamat IP publik dari server Kilat VM milik Anda. Jika login berhasil, Anda akan masuk ke terminal remote Kilat VM.

Catatan: Jika menggunakan user non-root, pastikan perintah dijalankan dengan sudo.

### 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 ``` ![Clone_Repository_Website.png](https://d2qpat49fx80de.cloudfront.net/Clone_Repository_Website_469501d376.png) *Gambar 4: Clone Repository Website* ``` cd poketrove ```

Catatan: Kami tidak menyarankan untuk meng-clone langsung ke /var/www/html, karena direktori tersebut sering digunakan sebagai direktori default oleh web server. Sebaiknya tempatkan proyek Anda di direktori lain seperti /opt/ atau /root/, lalu arahkan root di konfigurasi Nginx ke folder dist hasil build React Anda.

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 ``` ![Membuild_Project.png](https://d2qpat49fx80de.cloudfront.net/Membuild_Project_ca84557601.png) *Gambar 5: Melakukan Build Website* > `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//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 ```

Jangan gunakan /root/ sebagai root directory untuk Nginx! Menjalankan Nginx untuk membaca dari /root/ bukan hanya menyebabkan error, tapi juga berisiko tinggi secara keamanan.

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 ``` ![Restart_NGINX.png](https://d2qpat49fx80de.cloudfront.net/Restart_NGINX_f8c98dd047.png) *Gambar 6: Melakukan 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://:80 ``` ![Akses_Website_dengan_IP.png](https://d2qpat49fx80de.cloudfront.net/Akses_Website_dengan_IP_ba36fb748c.png) *Gambar 7: Akses Website dengan Alamat IP* * Jika dengan domain dan SSL: ``` https://namadomain.id ``` Bila halaman aplikasi berhasil muncul, berarti proses deploy Anda sudah sukses!

Tips Tambahan:

Gunakan htop, pm2, atau journalctl -u nginx untuk debugging saat ada kendala.

Pastikan port 80 dan 443 dibuka di firewall.

## 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](https://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. |

Tips Tambahan:

Gunakan curl -I http://localhost untuk mengecek respons dari server lokal.

Gunakan journalctl -xe atau tail -f /var/log/nginx/error.log untuk melihat log error jika server tidak berjalan sesuai harapan.

Jangan lupa restart Nginx (systemctl restart nginx) setiap kali mengubah konfigurasi.

## 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 backend*sesuai kebutuhan proyek Anda. Sampai jumpa di panduan berikutnya!