Panduan Lengkap: Deploy Static Site Nuxt ke Berbagai Platform Tanpa GitHub
Deployment website Nuxt.js sebagai static site (SSG) menawarkan banyak keuntungan: performa lebih cepat, keamanan lebih baik, dan biaya hosting yang lebih rendah. Meskipun banyak tutorial mengajarkan deployment melalui GitHub, ternyata ada cara yang lebih cepat dan langsung: deployment langsung tanpa GitHub.
Dalam artikel ini, kita akan membahas cara deploy static site Nuxt ke berbagai platform populer tanpa perlu menggunakan GitHub sama sekali, serta membandingkan kelebihan dan kekurangan masing-masing platform.
Mengapa Deploy Tanpa GitHub?
Sebelum kita mulai, mari bahas mengapa Anda mungkin ingin deploy tanpa GitHub:
- Kecepatan - Deployment langsung jauh lebih cepat (1-3 menit vs 5-10 menit via GitHub)
- Kontrol - Anda memiliki kontrol penuh atas proses build dan deployment
- Privasi - Kode Anda tetap di komputer lokal, tidak perlu di-push ke repository publik/privat
- Iterasi Cepat - Ideal untuk pengembangan aktif dan testing fitur
Persiapan Awal: Generate Static Site Nuxt
Sebelum deploy ke platform manapun, Anda perlu generate static site Nuxt terlebih dahulu:
# Pastikan nuxt.config.ts sudah dikonfigurasi dengan benar
# Untuk SSG, tambahkan:
ssr: true,
target: 'static',
# Generate static site
npm run generate
Hasil generate akan berada di folder dist/
yang akan kita deploy ke berbagai platform.
1. Deploy ke Cloudflare Pages
Cloudflare Pages menawarkan hosting cepat dengan CDN global dan integrasi dengan layanan Cloudflare lainnya.
Persiapan
# Install Wrangler CLI
npm install -g wrangler
# Login ke Cloudflare
wrangler login
Konfigurasi
Buat file wrangler.toml
di root project:
# Konfigurasi Wrangler untuk Cloudflare Pages
name = "nama-project-anda"
compatibility_date = "2023-10-30"
# Konfigurasi untuk Static Site Generation (SSG)
[site]
bucket = "./dist"
# Konfigurasi untuk Cloudflare Pages
pages_build_output_dir = "dist"
[build.environment]
NODE_VERSION = "18"
Tambahkan script di package.json
:
"scripts": {
"generate:cloudflare": "cross-env NITRO_PRESET=cloudflare-pages nuxt generate",
"deploy": "wrangler pages deploy dist"
}
Deployment
# Generate untuk Cloudflare
npm run generate:cloudflare
# Deploy
npm run deploy
Kelebihan Cloudflare Pages
- CDN global dengan performa tinggi
- Gratis untuk kebanyakan kasus penggunaan
- Integrasi dengan layanan Cloudflare lainnya (Workers, D1, etc.)
- Keamanan DDoS protection bawaan
2. Deploy ke Vercel
Vercel adalah platform yang sangat populer untuk Nuxt.js dengan deployment yang sangat cepat.
Persiapan
# Install Vercel CLI
npm install -g vercel
# Login
vercel login
Konfigurasi
Buat file vercel.json
di root project (opsional):
{
"version": 2,
"builds": [
{ "src": "package.json", "use": "@vercel/static-build" }
],
"routes": [
{ "src": "/(.*)", "dest": "/$1" }
]
}
Deployment
# Deploy dari folder project
vercel
# Untuk production
vercel --prod
Kelebihan Vercel
- Deployment tercepat (30-60 detik)
- UI dashboard yang sangat intuitif
- Preview deployment untuk setiap build
- Integrasi sempurna dengan Nuxt.js
3. Deploy ke Netlify
Netlify menawarkan fitur-fitur canggih seperti form handling dan fungsi serverless.
Persiapan
# Install Netlify CLI
npm install -g netlify-cli
# Login
netlify login
Konfigurasi
Buat file netlify.toml
di root project:
[build]
publish = "dist"
command = "npm run generate"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Deployment
# Deploy dari folder dist
netlify deploy --dir=dist
# Untuk production
netlify deploy --dir=dist --prod
Kelebihan Netlify
- Fitur form handling bawaan
- Fungsi serverless mudah diintegrasikan
- Split testing/A-B testing
- Deployment preview untuk setiap build
4. Deploy ke Azure Static Web Apps
Azure Static Web Apps cocok untuk project enterprise yang membutuhkan integrasi dengan ekosistem Microsoft.
Persiapan
# Install Azure CLI
# Ikuti panduan di: https://docs.microsoft.com/cli/azure/install-azure-cli
# Login
az login
Deployment
# Buat Static Web App
az staticwebapp create --name my-nuxt-app --resource-group my-group --location "East US"
# Deploy
az staticwebapp deploy --name my-nuxt-app --source-location dist
Kelebihan Azure
- Integrasi dengan ekosistem Azure
- Skalabilitas enterprise
- Keamanan tingkat perusahaan
- Dukungan untuk API Functions
5. Deploy ke Firebase Hosting
Firebase Hosting menawarkan deployment cepat dengan CDN global Google.
Persiapan
# Install Firebase CLI
npm install -g firebase-tools
# Login
firebase login
# Initialize
firebase init hosting
Konfigurasi
Saat initialize, pilih folder dist
sebagai public directory.
Deployment
# Deploy ke Firebase
firebase deploy --only hosting
Kelebihan Firebase
- Deployment sangat cepat (30-60 detik)
- CDN global Google
- Integrasi dengan layanan Firebase lainnya
- Rollback mudah melalui console
Perbandingan Waktu Deployment
Platform | Deployment Langsung | Via GitHub | Kecepatan Relatif |
---|---|---|---|
Cloudflare Pages | 1-3 menit | 5-10 menit | ⭐⭐⭐⭐ |
Vercel | 30-60 detik | 2-5 menit | ⭐⭐⭐⭐⭐ |
Netlify | 1-2 menit | 3-7 menit | ⭐⭐⭐⭐ |
Azure Static Web Apps | 2-5 menit | 5-10 menit | ⭐⭐⭐ |
Firebase Hosting | 30-60 detik | 2-4 menit | ⭐⭐⭐⭐⭐ |
Tips Deployment yang Optimal
Berikut beberapa tips untuk memastikan deployment Anda berjalan lancar:
- Bersihkan cache sebelum build:
npm run clear-cache # Jika ada # atau rimraf .nuxt dist node_modules/.cache
- Pastikan semua asset di-handle dengan benar:
// nuxt.config.js export default { nitro: { prerender: { routes: ['/sitemap.xml', '/robots.txt'] } } }
- Tangani halaman 404 dengan benar:
Buat file
404.vue
di folderpages
untuk custom error page. - Optimasi ukuran build:
# Analisis ukuran bundle npx nuxt analyze
Beralih Antara Deployment Langsung dan GitHub
Jika suatu saat Anda ingin beralih ke deployment via GitHub:
Dari CLI ke GitHub
- Siapkan repository GitHub:
git init git remote add origin https://github.com/username/repo-name.git git add . git commit -m "Initial commit" git push -u origin main
- Konfigurasi platform untuk GitHub melalui dashboard masing-masing platform
Dari GitHub ke CLI
Cukup ikuti panduan deployment langsung untuk masing-masing platform seperti yang sudah dijelaskan di atas.
Kesimpulan
Deployment static site Nuxt tanpa GitHub menawarkan kecepatan dan fleksibilitas yang lebih tinggi, terutama selama fase pengembangan aktif. Setiap platform memiliki kelebihan dan kekurangan masing-masing:
- Vercel: Tercepat dan paling user-friendly
- Cloudflare Pages: Performa global dan keamanan terbaik
- Netlify: Fitur tambahan yang kaya
- Azure: Integrasi enterprise
- Firebase: Kecepatan dan integrasi Google
Pilih platform yang paling sesuai dengan kebutuhan project Anda, dan nikmati proses deployment yang lebih cepat dan efisien!
Apakah Anda sudah mencoba deployment langsung tanpa GitHub? Platform mana yang menjadi favorit Anda? Bagikan pengalaman Anda di kolom komentar di bawah!