Belajar SvelteKit - Deployment & Hosting

#Pendahuluan

Kode yang tidak pernah rilis tidak ada gunanya. Episode 20 membahas deployment dan hosting SvelteKit: target yang tersedia, perbedaan runtime serverless dan edge, cara mengoptimasi build, serta alur kerja yang aman untuk rilis produksi.

SvelteKit memisahkan aplikasi dari lingkungan eksekusi melalui adapter. Satu basis kode yang sama bisa di-deploy ke Vercel, Netlify, Cloudflare, atau server sendiri hanya dengan mengganti adapter. Pemilihan platform lebih sering ditentukan oleh kebutuhan: lokasi data, budget, dan fitur platform.

Setelah episode ini, kalian bisa memilih platform dengan tepat, menyiapkan konfigurasi produksi yang benar, dan melakukan rilis tanpa drama.

Sepanjang episode ini, istilah adapter akan sering muncul. Anggap adapter sebagai jembatan: ia menerima hasil build SvelteKit dan menyesuaikannya dengan kontrak platform, sehingga kode aplikasi tidak perlu berubah saat berpindah hosting.

#Target Deployment dan Adapters

#Memilih Adapter

Adapters mengubah hasil build menjadi bentuk yang dimengerti platform target. @sveltejs/adapter-auto memilih adapter otomatis saat deploy, sementara adapter spesifik memberi kontrol lebih, misalnya atas routing dan cache.

Adapter node untuk self-host

import adapter from "@sveltejs/adapter-node";
 
export default {
    kit: {
        adapter: adapter({ out: "build" })
    }
};

Adapter auto membaca indikator yang ditinggalkan platform pada saat build dan memilih implementasi yang tepat. Namun untuk produksi, gunakan adapter eksplisit agar perilaku dapat diprediksi dan tidak bergantung pada lingkungan build.

#Adapters Resmi

SvelteKit menyediakan adapter resmi yang mencakup hampir semua target umum. Pasang hanya adapter yang benar-benar kalian pakai agar ukuran dependency tetap minimal.

npm install -D @sveltejs/adapter-vercel
npm install -D @sveltejs/adapter-netlify
npm install -D @sveltejs/adapter-cloudflare
npm install -D @sveltejs/adapter-node
npm install -D @sveltejs/adapter-static

Pilih berdasarkan platform hosting yang kalian pakai; dokumentasi tiap adapter menjelaskan pengaturan khusus untuk platform tersebut.

#Platform Managed vs Self-Host

Vercel, Netlify, dan Cloudflare Pages menangani build, TLS, dan CDN secara otomatis; kalian tinggal push. Self-host dengan adapter-node memberi kontrol penuh atas runtime, tetapi kalian harus mengelola server, load balancer, dan pemantauan sendiri. Pilih sesuai kemampuan tim mengelola operasional.

Untuk self-host yang rapi, bungkus hasil build adapter-node dalam image Docker. Image multi-stage membuat hasil akhir ringan karena hanya berisi runtime dan output build.

FROM node:22-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
 
FROM node:22-alpine
WORKDIR /app
COPY --from=build /app/build ./
ENV NODE_ENV=production
EXPOSE 3000
CMD ["node", "build/index.js"]

Perintah docker build -t sveltekit-app . menghasilkan image yang siap dijalankan di mana pun Docker tersedia.

#Serverless vs Edge Runtime

#Perbedaan Utama

Serverless menjalankan kode di region tertentu dengan sumber daya besar, cocok untuk tugas berat seperti query database. Edge menjalankan kode di dekat pengguna di seluruh dunia dengan start yang sangat cepat, cocok untuk respons latensi rendah, tetapi dengan batasan sumber daya dan API yang lebih ketat.

Adapter Cloudflare untuk edge

import adapter from "@sveltejs/adapter-cloudflare";
 
export default {
    kit: {
        adapter: adapter()
    }
};

#Menyesuaikan Kode dengan Runtime

Edge runtime tidak mendukung semua API Node.js. Pastikan library yang dipakai kompatibel dengan runtime target, dan gunakan adapters yang sesuai. Untuk aplikasi yang membutuhkan keduanya, pisahkan route: halaman statis dan ringan di edge, route berat di serverless.

Sebagai contoh, akses ke file system atau environment variable Node tertentu bisa berjalan di serverless tapi tidak di edge. Buat lapisan abstraksi kecil di src/lib/server agar logika bisnis tidak terikat pada runtime tertentu.

#Optimasi Build dan Deployment Aset

#Build yang Efisien

Bangun aplikasi dengan npm run build dan periksa output. Halaman statis diprerender, JavaScript dipecah per route, dan aset diberi hash. Gunakan output yang dihasilkan untuk disajikan lewat CDN agar aset tidak selalu lewat server aplikasi.

npm install -D @sveltejs/adapter-vercel
npx vercel --prod

#Aset dan Environment di Produksi

Setiap platform punya cara menetapkan environment variable untuk produksi: dashboard, file konfigurasi, atau CLI. Pastikan nilai yang bersifat rahasia tidak pernah masuk ke riwayat git dan hanya disimpan di secret store platform. Sebagai contoh, Vercel membaca environment dari dashboard atau lewat npx vercel env add di terminal.

#Alur Kerja Deployment Produksi

#Pipeline dan Rollback

Rilis yang baik punya jalur aman mundur. Gunakan preview deployment untuk setiap PR, lalu deploy ke produksi hanya dari branch yang lolos CI. Jika rilis bermasalah, rollback ke versi sebelumnya harus bisa dilakukan dalam hitungan menit.

Preview deployment sangat berguna untuk memeriksa hasil nyata sebelum digabungkan: Vercel menautkan setiap PR ke URL preview yang menjalankan kode dari branch tersebut, sehingga pengujian bisa dilakukan bersama.

#Verifikasi Setelah Rilis

Setelah rilis, periksa health check, log error, dan metrik performa sebelum menyatakan sukses. Otomatiskan verifikasi dasar di pipeline, dan pastikan tim tahu cara membedakan masalah pada build, runtime, maupun infrastruktur.

Buat daftar periksa sederhana untuk setiap rilis: versi aplikasi benar, environment production terpakai, dan semua layanan penting merespons. Daftar ini mengubah rilis dari perasaan menjadi prosedur.

#Penutup

Inti yang harus dibawa pulang:

• Adapters menentukan bentuk build dan target platform.
• Platform managed menangani operasional; self-host memberi kontrol penuh.
• Edge untuk latensi rendah; serverless untuk beban komputasi berat.
• Periksa kompatibilitas library dengan runtime yang dipilih.
• Aset ber-hash disajikan lewat CDN; secret disimpan di secret store.
• Preview per PR dan rollback cepat adalah bagian dari alur rilis.

Di episode 21 selanjutnya kita membahas server-side rendering & static generation: fundamental SSR dan mode rendering, static site generation dan incremental prerendering, streaming dan partial hydration, serta kapan memakai SSR versus SSG.