Belajar Angular - Deployment & Hosting

#Pendahuluan

Build sudah hijau, semua test lolos, dan aplikasi siap dipakai. Saatnya keluar dari mesin lokal dan menempatkan aplikasi di lingkungan production yang bisa diakses banyak pengguna. Tahap inilah yang disebut deployment.

Episode 20 membahas opsi deployment di Firebase, Vercel, Netlify, dan AWS, server-side rendering dengan Angular Universal, static site generation dan prerendering, serta praktik terbaik deployment production. Kalian akan memilih strategi hosting yang paling sesuai dengan kebutuhan project.

Deployment bukan sekadar mengunggah file. Keputusan tentang platform hosting, strategi rendering, cache, dan keamanan menentukan kecepatan dan ketersediaan aplikasi di production.

#Opsi Deployment: Firebase, Vercel, Netlify, dan AWS

#Firebase Hosting

Firebase Hosting melayani file statis dari CDN global dengan HTTPS otomatis dan integrasi mendalam dengan Firebase Auth, Cloud Functions, dan Cloud Storage. Mulai dengan menginstall Firebase CLI:

npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy

firebase init hosting menanyakan folder publik — arahkan ke dist/toko-online/browser. Setelah itu firebase deploy mengunggah file ke CDN dan langsung memberi URL production. Satu lagi kelebihan Firebase: kalian bisa menghubungkan nama domain custom lewat Firebase Console tanpa mengatur DNS secara manual.

#Vercel dan Netlify

Vercel dan Netlify sama-sama platform serverless yang ramah untuk frontend. Vercel mendeteksi project Angular secara otomatis, menyediakan preview deployment untuk setiap branch, dan punya zero-config untuk output SSR:

npm install -g vercel
vercel --prod

Netlify memakai publish directory dan file _redirects untuk fallback routing SPA. Untuk aplikasi Angular dengan BrowserRouter, tambahkan baris berikut agar halaman yang di-reload tidak menghasilkan 404:

/*    /index.html    200

Kedua platform ini gratis untuk skala kecil dan menangani CI sendiri mulai dari push sampai production.

#AWS S3 dan CloudFront

AWS memberi kontrol penuh atas infrastruktur. Build diunggah ke bucket S3 yang dikonfigurasi sebagai static website hosting, lalu CloudFront dipasang sebagai CDN di depannya:

aws s3 sync dist/toko-online/browser s3://toko-online-bucket --delete

CloudFront memberikan HTTPS, caching edge, dan harga yang prediktif. Karena semuanya terpisah-pisah, AWS juga menuntut kalian mengelola IAM permission, bucket policy, dan cache invalidation sendiri.

#Server-side Rendering dengan Angular Universal

Aplikasi Angular biasa hanya berisi file HTML kosong yang diisi oleh JavaScript di browser. Untuk SEO dan first paint yang lebih baik, Angular menyediakan Universal:

ng add @angular/nguniversal
ng build

Perintah ng add @angular/nguniversal menambahkan builder baru untuk menghasilkan bundle server, file server.ts, dan skrip build:ssr. Hasilnya aplikasi dirender di server menjadi HTML lengkap, lalu JavaScript tetap berjalan di browser untuk interaktivitas. Episode 21 membahas Universal secara mendalam.

#Static Site Generation dan Prerendering

Jika data aplikasi jarang berubah, prerendering bisa menjadi pilihan paling sederhana. Setiap route diubah menjadi file HTML statis pada saat build:

ng build --prerender

Daftar route yang di-prerender dikonfigurasi di angular.json pada opsi prerender.routes. File statis hasil prerender bisa diunggah ke hosting mana pun tanpa server. Kombinasi prerender untuk halaman publik dan server-side rendering untuk halaman dinamis adalah pola umum di aplikasi besar.

#Production Deployment Best Practices

#Konfigurasi per Environment

Build production memakai konfigurasi yang ketat:

ng build --configuration=production --base-href=/app/

--base-href penting jika aplikasi dilayani dari sub-path, misalnya /app/. Pastikan environment file production berisi URL API yang benar dan tidak ada kredensial yang bocor ke bundle.

#Cache dan Compression

File hasil build Angular sudah mengandung hash konten di nama filenya, jadi aman diberi cache header immutable:

location / {
  try_files $uri $uri/ /index.html;
}
location /assets/ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

try_files mengembalikan index.html untuk route SPA yang tidak cocok dengan file fisik. Gzip atau brotli sebaiknya diaktifkan di level hosting atau CDN untuk memperkecil transfer data.

#Rollback dan Monitoring

Simpan versi rilis dan siapkan strategi rollback, misalnya memakai tag Git atau deployment slot. Kombinasi CDN cache short TTL di HTML dan long TTL di aset ber-hash memastikan pengguna mendapat versi terbaru tanpa harus membersihkan cache browser.

#Penutup

Inti yang harus dibawa pulang:

• Firebase Hosting dan Vercel cocok untuk deployment cepat dengan CDN global.
• Netlify memakai file _redirects untuk fallback routing SPA.
• AWS S3 plus CloudFront memberi kontrol penuh atas infrastruktur.
• Angular Universal memungkinkan aplikasi dirender di server.
• Prerendering menghasilkan file statis untuk setiap route pada waktu build.
• Cache immutable dan try_files adalah fondasi deployment Angular yang sehat.

Di episode 21 berikutnya kita akan memperdalam server-side rendering dan Angular Universal — dasar-dasar Universal, perbedaan prerendering dan SSR, peningkatan SEO dan initial load, serta hydration dan interaksi antara server dan client.