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

Masuk ke dashboard aapanel.
Buka menu File manager→ create folder sesuai dengan nama domain.com
Upload file ZIP, lalu klik kanan dan pilih Unzip.
Kemudian buka menu Terminal→ Jalankan perintah dibawah dan sesuaikan folder file

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

Membuat Website Baru

Kembali ke dashboard aapanel.
Buka menu Website → klik Add Site.
Isi nama domain (contoh: domain.com).
Pilih tipe situs “Static” jika tersedia.
Arahkan pengaturan root default, misalnya /www/wwwroot/domain.com.
Unchecklist create html file
Klik Submit untuk menyimpan.

Mengatur Root Directory ke Folder dist

Buka menu Website di aapanel. Klik Conf
Klik domain Anda, lalu buka tab Site Directory.
Ubah Running Directory menjadi /www/wwwroot/namadomain/dist.
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.

Buka Website → pilih domain → URL Rewrite.
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

Buka Website → domain → tab SSL.
Pilih Let’s Encrypt dan jalankan instalasi.
Setelah sukses, sertifikat SSL akan otomatis diterapkan.

Memperbarui Situs di Masa Depan

Setiap kali Anda memperbarui aplikasi:

Lakukan git pull atau unggah kode terbaru.
Jalankan kembali proses build agar folder dist diperbarui.
Tidak perlu mengubah konfigurasi aapanel lagi.
Jika menggunakan Cloudflare, lakukan Purge Cache agar versi baru langsung tampil.

Cara Deploy Web React Berbasis Vite/Typescript di aapanel

Comments

Tutorial

Cara Instal aaPanel di Ubuntu

More from this blog

Cara Bikin Email Custom Domain Gratis (Tanpa Google Workspace) Tetap Profesional Tapi Tetap Pakai Gmail

Otomasi Data dari Telegram ke Google Sheets Case Pencatatan Lamar Pekerjaan dengan bantuan n8n

Cara Instal aaPanel di Ubuntu

How to add External SMTP on WHM/cPanel with GSuite Relay SMTP

Persiapan di aapanel

Menginstall

Mengunggah Kode Proyek ke Server

Membuat Website Baru

Mengatur Root Directory ke Folder dist

Menambahkan Aturan SPA (Single Page Application)

Kode Konfigurasi Nginx

Mengaktifkan SSL dan Cloudflare

A. Let’s Encrypt dari aapanel

Memperbarui Situs di Masa Depan

Command Palette

Comments

Tutorial

Cara Instal aaPanel di Ubuntu

More from this blog

Persiapan di aapanel

Menginstall

Mengunggah Kode Proyek ke Server

Membuat Website Baru

Mengatur Root Directory ke Folder dist

Menambahkan Aturan SPA (Single Page Application)

Kode Konfigurasi Nginx

Mengaktifkan SSL dan Cloudflare

A. Let’s Encrypt dari aapanel

Memperbarui Situs di Masa Depan