Cara Deploy Web React Berbasis Vite/Typescript di aapanel

Bagi banyak developer, aapanel menjadi pilihan populer karena tampilan yang ramah pengguna dan fitur lengkap untuk mengelola server. Jika Anda membangun aplikasi React menggunakan Vite, proses deploy di aapanel sebenarnya sederhana namun cukup sulit untuk pemula. Artikel ini akan memandu Anda langkah demi langkah — dari persiapan hingga aplikasi siap online.

---

Persiapan di aapanel

Pastikan hal-hal berikut sudah siap:

• aapanel sudah terpasang dan dapat diakses. Untuk menginstall aapanel bisa dilihat di post https://razifijazi.me/cara-instal-aapanel-di-ubuntu

• Setelah instalasi selesai

  Buka App Store → Install Node.js + PM2. Untuk tutorial versi video bisa diliat di https://www.youtube.com/watch?v=UGFngAQFBH4

• **Ikutin tuturial sampai dengan menginstall module

---

Menginstall

Pastikan hal-hal berikut sudah siap:

• aapanel sudah terpasang dan dapat diakses. Untuk menginstall aapanel bisa dilihat di post https://razifijazi.me/cara-instal-aapanel-di-ubuntu

• Web server (seperti Nginx) berjalan normal.

• Anda bisa membuka menu Website, File Manager, dan Terminal.

• Node.js sudah tersedia (jika ingin melakukan proses build di server).

Jika Anda ingin lebih cepat, proses build juga bisa dilakukan di komputer lokal lalu mengunggah hasil akhirnya ke server.

Mengunggah Kode Proyek ke Server

1. Masuk ke dashboard aapanel.

2. Buka menu File manager→ create folder sesuai dengan nama domain.com

3. Upload file ZIP, lalu klik kanan dan pilih Unzip.

4. Kemudian buka menu Terminal→ Jalankan perintah dibawah dan sesuaikan folder file

cd /www/wwwroot/nama_domain
npm install
npm run build

---

Membuat Website Baru

1. Kembali ke dashboard aapanel.

2. Buka menu Website → klik Add Site.

3. Isi nama domain (contoh: domain.com).

4. Pilih tipe situs “Static” jika tersedia.

5. Arahkan pengaturan root default, misalnya /www/wwwroot/domain.com.

6. Unchecklist create html file

7. Klik Submit untuk menyimpan.

---

Mengatur Root Directory ke Folder dist

1. Buka menu Website di aapanel. Klik Conf

2. Klik domain Anda, lalu buka tab Site Directory.

3. Ubah Running Directory menjadi /www/wwwroot/namadomain/dist.

4. Simpan pengaturan, lalu reload layanan web server jika diminta.

Sekarang situs Anda akan menampilkan hasil build React dengan benar di halaman utama.

---

Menambahkan Aturan SPA (Single Page Application)

Agar rute seperti akses ke folder lain tidak error saat diakses langsung, tambahkan aturan URL Rewrite.

1. Buka Website → pilih domain → URL Rewrite.

2. Masukan kode koniguasi dibawah:

Kode Konfigurasi Nginx

Ini adalah kode yang Anda butuhkan. Kode ini memberitahu Nginx untuk mengarahkan semua permintaan ke index.html jika file atau direktori yang diminta tidak ditemukan.

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

---

Mengaktifkan SSL dan Cloudflare

Jika Anda ingin situs menggunakan HTTPS, Anda memiliki dua opsi:

A. Let’s Encrypt dari aapanel

1. Buka Website → domain → tab SSL.

2. Pilih Let’s Encrypt dan jalankan instalasi.

3. Setelah sukses, sertifikat SSL akan otomatis diterapkan.

---

Memperbarui Situs di Masa Depan

Setiap kali Anda memperbarui aplikasi:

1. Lakukan git pull atau unggah kode terbaru.

2. Jalankan kembali proses build agar folder dist diperbarui.

3. Tidak perlu mengubah konfigurasi aapanel lagi.

4. Jika menggunakan Cloudflare, lakukan Purge Cache agar versi baru langsung tampil.