Cara Hosting Aplikasi Vue.js
Hostifame menyediakan lingkungan deployment khusus untuk ekosistem Vue.js. Sistem kami mendukung 2 metode instalasi secara fleksibel (Auto-Build dan Pre-Built) untuk merakit aplikasi Single Page Application (SPA) Anda agar berjalan dengan sangat cepat.
1. Persiapkan File Proyek (.ZIP)
Silakan pilih salah satu dari dua metode di bawah ini sebelum Anda mengompres (zip) file proyek Vue.js Anda:
Metode Auto-Build
Upload seluruh kode sumber (source code) Vue Anda. Mesin server kami akan melakukan npm install dan npm run build secara otomatis.
node_modules ke dalam file ZIP agar proses unggah tidak macet!
Metode Pre-Built (Fast Deploy)
Jika Anda sudah mem-build proyek di laptop Anda (menjadi folder statis dist), cukup kompres dan unggah folder tersebut beserta file package.json-nya.
2. Unggah & Deteksi Otomatis
Masuk ke Dasbor Hostifame dan klik tombol Tambah Proyek. Pilih file ZIP yang sudah Anda siapkan. Setelah Anda menyimpan formulir, algoritma CI Analysis kami akan memindai file package.json Anda untuk mengenali bahwa ini adalah proyek Vue.js.
3. Proses Build (Deployment)
Klik tombol Deploy pada Dasbor. Jika Anda menggunakan "Metode Auto-Build", Agen Server kami akan menjalankan proses instalasi dan kompilasi di latar belakang (memakan waktu sekitar 1-3 menit).
Fitur Auto-Cleanup: Hemat Kuota Disk!
Setelah proses build berhasil menciptakan folder statis (dist), Hostifame akan secara otomatis menghapus folder node_modules dan cache milik Anda. Hal ini dilakukan agar kuota penyimpanan server Anda tidak terbebani oleh ratusan modul Javascript yang sudah tidak terpakai lagi di mode Production.
4. Environment Variables (.env)
Vue.js memiliki aturan awalan (prefix) khusus agar variabel dapat dibaca oleh sisi klien (browser). Buat file .env melalui Web File Manager Hostifame sebelum melakukan Deploy, atau edit file yang sudah ada.
# Jika Anda menggunakan Vite (Gunakan prefix VITE_):
VITE_API_BASE_URL="https://api.domainanda.com"
VITE_APP_TITLE="Web Frontend Vue"
# Jika Anda menggunakan Vue CLI / Webpack (Gunakan prefix VUE_APP_):
VUE_APP_API_BASE_URL="https://api.domainanda.com"Peringatan: Perubahan Environment
Karena kompilasi Vite/Webpack menanamkan (hardcode) nilai .env secara permanen ke dalam file statis Javascript, perubahan yang Anda lakukan pada file .env melalui File Manager tidak akan langsung berefek pada web Anda.
Untuk menerapkan nilai environment yang baru, Anda WAJIB merakit ulang aplikasi Anda dengan menekan tombol NPM Run Build yang tersedia di File Manager pada proyek Anda!
5. Optimalisasi Nginx Otomatis
Begitu proses deployment selesai, Nginx Web Server kami akan melayani aplikasi Vue Anda dengan dua fitur premium yang tertanam secara otomatis:
1. Vue Router Fallback (SPA)
Jika Anda menggunakan createWebHistory(), Anda tidak akan lagi menemukan Error 404 saat me-refresh halaman. Nginx otomatis meneruskan semua routing ke index.html.
2. Static Browser Caching
Sistem memberikan perintah kedaluwarsa (expires 6M) ke browser untuk semua aset statis (CSS, JS, Gambar, Font). Load aplikasi Anda akan terasa instan bagi pengunjung setia!