# 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](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](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](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
    

```plaintext
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.

```plaintext
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.