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:

1. Kecepatan - Deployment langsung jauh lebih cepat (1-3 menit vs 5-10 menit via GitHub)
2. Kontrol - Anda memiliki kontrol penuh atas proses build dan deployment
3. Privasi - Kode Anda tetap di komputer lokal, tidak perlu di-push ke repository publik/privat
4. 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

Tips Deployment yang Optimal

Berikut beberapa tips untuk memastikan deployment Anda berjalan lancar:

1. Bersihkan cache sebelum build:

   npm run clear-cache # Jika ada
   # atau
   rimraf .nuxt dist node_modules/.cache
   

2. Pastikan semua asset di-handle dengan benar:

   // nuxt.config.js
   export default {
     nitro: {
       prerender: {
         routes: ['/sitemap.xml', '/robots.txt']
       }
     }
   }
   

3. Tangani halaman 404 dengan benar: Buat file 404.vue di folder pages untuk custom error page.
4. 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

1. 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
   

2. 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!