Vercel adalah platform hosting favorit untuk proyek Astro dan Next.js. Dengan free tier yang generous, automatic deployments, dan performa CDN global, Vercel adalah pilihan terbaik untuk memulai. Artikel ini akan memandu Anda dari nol hingga website live.

Mengapa Vercel?

FiturKeterangan
Free Tier100GB bandwidth/bulan, unlimited sites
Auto DeployPush ke Git = Auto deploy
Preview URLsSetiap PR mendapat preview URL
Global CDNEdge network di 70+ lokasi
AnalyticsBuilt-in web analytics
SSLHTTPS otomatis gratis

Persiapan

Sebelum mulai, pastikan Anda memiliki:

  • ✅ Akun GitHub/GitLab/Bitbucket
  • ✅ Repository berisi proyek Sitemas
  • ✅ Proyek sudah bisa di-build lokal (npm run build)

Deploy dengan Vercel CLI

Install Vercel CLI

Install Vercel CLI
npm install -g vercel

Login ke Vercel

Login
vercel login

Pilih metode login (GitHub, GitLab, atau Email).

Deploy

Di folder proyek Sitemas:

Deploy
vercel

Ikuti prompt:

  • Set up and deploy? Yes
  • Which scope? Pilih akun Anda
  • Link to existing project? No (untuk pertama kali)
  • Project name? nama-proyek-anda
  • Directory? ./
  • Override settings? No

Production Deploy

Untuk deploy ke production:

Production deploy
vercel --prod

Website Anda sekarang live di https://nama-proyek.vercel.app!

Deploy via Dashboard (Tanpa CLI)

Push ke GitHub

Pastikan proyek sudah di-push ke GitHub:

Push ke GitHub
git init
git add .
git commit -m 'Initial commit'
git remote add origin https://github.com/username/repo.git
git push -u origin main

Import di Vercel

  1. Buka vercel.com/new
  2. Klik Import Git Repository
  3. Pilih repository Sitemas Anda
  4. Vercel akan auto-detect sebagai proyek Astro

Configure Project

Vercel biasanya auto-detect settings dengan benar:

SettingValue
Framework PresetAstro
Build Commandnpm run build
Output Directorydist
Install Commandnpm install

Environment Variables

Jika ada environment variables, tambahkan:

  1. Expand Environment Variables
  2. Tambahkan key-value pairs:
    • PUBLIC_GA_MEASUREMENT_ID
    • PUBLIC_SITE_URL
    • dll.

Deploy

Klik Deploy dan tunggu proses selesai (biasanya 1-2 menit).

Konfigurasi vercel.json

Untuk konfigurasi lanjutan, buat file vercel.json di root:

vercel.json
json 
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "astro",
  "headers": [
    {
      "source": "/fonts/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/_astro/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-url",
      "destination": "/new-url",
      "permanent": true
    }
  ]
}

Environment Variables di Vercel

Menambahkan Variables

  1. Buka project di Vercel dashboard
  2. Pergi ke Settings → Environment Variables
  3. Tambahkan variables:
VariableContohEnvironment
PUBLIC_SITE_URLhttps://yourdomain.comProduction
PUBLIC_GA_MEASUREMENT_IDG-XXXXXXXXProduction
Environment Scope

Anda bisa set variable berbeda untuk Production, Preview, dan Development.

Auto Deploy dari Git

Setelah setup, setiap push ke branch:

  • main / master → Production deploy
  • Branch lain → Preview deploy

Preview Deployments

Setiap Pull Request mendapat URL preview unik:

https://sitemas-git-feature-branch-username.vercel.app

Sangat berguna untuk review perubahan sebelum merge.

Custom Domain

Tambah Domain

  1. Buka project → Settings → Domains
  2. Masukkan domain Anda: yourdomain.com
  3. Klik Add

Konfigurasi DNS

Vercel akan memberikan instruksi DNS. Biasanya:

Untuk apex domain (yourdomain.com):

Type: A
Name: @
Value: 76.76.21.21

Untuk www subdomain:

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Verifikasi

Tunggu propagasi DNS (5 menit - 48 jam). Vercel akan otomatis issue SSL certificate.

Monitoring dan Analytics

Vercel Analytics

Enable di dashboard:

  1. Analytics → Enable
  2. Tracking otomatis tanpa kode tambahan

Metrik yang tersedia:

  • Page views
  • Visitors
  • Performance (Web Vitals)

Speed Insights

  1. Speed Insights → Enable
  2. Lihat Core Web Vitals per halaman

Troubleshooting

Build Gagal

Cek build logs di Vercel dashboard. Common issues:

ErrorSolusi
npm ERR! code ERESOLVETambah --legacy-peer-deps atau fix dependencies
Cannot find moduleCek import paths dan case sensitivity
Out of memoryUpgrade ke Pro tier atau optimize build

404 pada Production

Pastikan halaman ter-generate:

  • Cek getStaticPaths() untuk dynamic routes
  • Pastikan astro.config.mjs benar

Environment Variables Tidak Terbaca

  • Pastikan prefix PUBLIC_ untuk client-side variables
  • Redeploy setelah menambah variables

Best Practices

  1. Gunakan Preview deployments untuk testing
  2. Set up branch protection di GitHub
  3. Monitor Web Vitals dengan Speed Insights
  4. Enable Analytics sejak awal
  5. Set proper cache headers untuk static assets

Langkah Selanjutnya

Vercel bukan satu-satunya pilihan. Explore alternatif:

Deploy ke Netlify

Pelajari cara deploy Sitemas ke Netlify sebagai alternatif.

Guide Netlify

Kesimpulan

Vercel adalah platform terbaik untuk deploy Astro karena:

  • Zero-config untuk Astro
  • Free tier yang generous
  • Preview deployments untuk setiap PR
  • Global CDN dan automatic SSL

Dalam hitungan menit, website Sitemas Anda sudah live dan siap menerima pengunjung dari seluruh dunia.

M

Mas Admin

Penulis Konten

Menyajikan konten terbaik seputar teknologi dan produktivitas.