Blogger Jateng
Home / Tutorial

Menerapkan SPA Sudut untuk Produksi

Menerapkan Angular Single Page Application (SPA) ke produksi membutuhkan perencanaan, persiapan, dan seperangkat alat serta konfigurasi yang tepat. Artikel ini membahas langkah-langkah penting dan praktik terbaik agar berhasil menerapkan SPA Angular ke lingkungan produksi, memastikan kinerja, keandalan, dan skalabilitas yang tinggi.

Langkah 1: Mempersiapkan Aplikasi

Bahkan sebelum men-deploy aplikasi Angular, Anda harus menyiapkan aplikasi yang siap untuk diproduksi. Untuk ini, Angular memiliki perintah yang manis dan sederhana: ng build - prod.

Mengoptimalkan untuk Produksi

  1. AOT: Ini mengkonversi aplikasi selama waktu pembuatan dan bukan pada saat rendering, hal ini mengarah ke rendering yang lebih cepat dan bundle yang lebih kecil.
  2. Guncangan Pohon: Menghapus kode yang tidak digunakan, yang membantu mengurangi bundel JavaScript akhir.
  3. Minifikasi dan Uglifikasi: Angular secara otomatis mengecilkan kode kita dengan membuang spasi dan mengganti nama variabel yang panjang dengan nama variabel yang pendek, sehingga mengurangi ukuran total berkas kita.
  4. Pemuatan Malas: Hal ini tidak akan terjadi secara otomatis dengan ng build --prod, namun Anda harus mempertimbangkan lazy load untuk aplikasi yang lebih besar. Apa itu Lazy loading, modul Angular dapat dimuat kapanpun dibutuhkan untuk mempercepat kecepatan.
Pengoptimalan ini memastikan bahwa aplikasi ini seringan dan seefisien mungkin, yang sangat penting untuk memberikan pengalaman pengguna yang mulus.

sumber: ionic.io

Langkah 2: Pilih Penyedia Hosting

Ada beberapa platform hosting untuk menerapkan aplikasi Angular. Berikut ini beberapa hal yang harus Anda pertimbangkan ketika memilih penyedia:

⦁ Hosting File Statis: Inti dari aplikasi Angular adalah berkas statis seperti HTML, CSS, JavaScript, dan aset. Ini berarti Anda dapat menyajikan Angular SPA menggunakan penyedia hosting statis, seperti:
  • Firebase Hosting: Ini adalah platform hosting yang sempurna jika Anda memiliki SPA karena sangat mudah digunakan dan terukur serta dapat diintegrasikan dengan semua layanan Firebase lainnya.
  • Halaman Utama: Netlify - Solusi sederhana untuk penerapan berkelanjutan, HTTPS otomatis, host file statis yang didukung CDN.
  • Amazon S3 + CloudFront: S3 untuk penyimpanan + CloudFront untuk CDN memberikan solusi berkinerja tinggi dan terdistribusi secara global.
  • Vercel: Vercel mirip dengan Netlify, tetapi penerapan tanpa server awan lebih cepat jika Anda menggunakan sistem afiliasinya, termasuk Angular.
⦁ Hosting sisi Server: Jika Angular SPA Anda memiliki layanan backend atau perlu mengimplementasikan logika sisi server, Anda bisa menggunakan server web klasik seperti Apache, Nginx, atau server Node.js.

Penyedia hosting akan ditentukan berdasarkan ukuran aplikasi Anda, kebutuhannya, dan infrastruktur Anda saat ini.

Langkah 3: Proses Penerapan

Mengunggah File

Sekarang Anda seharusnya memiliki folder dist/ di dalam proyek Angular Anda yang memiliki kumpulan berkas statis segera setelah proses build selesai. Berkas-berkas ini sudah siap untuk dideploy. Berikut adalah langkah-langkah dasar untuk men-deploy aplikasi Anda ke sebagian besar penyedia hosting:

1. Bangun Proyek untuk Produksi -- ng build --prod.

2. Kirimkan Dist/Folder Anda ke penyedia hosting Anda Hal ini biasanya dapat dilakukan melalui:
  • FTP/SFTP jika Anda menggunakan hosting web standar
  • Netlify, Firebase, atau Vercel untuk integrasi langsung dengan GitHub atau GitLab
  • Layanan penyimpanan awan seperti Amazon S3 untuk penyedia berbasis awan.

Menentukan Rute & Mengonfigurasi Server

Sebagai Angular SPA, mereka dirutekan dari sisi klien. Ini berarti baik melalui penyegaran halaman atau dengan menautkan pengguna secara mendalam (mis. /products/123),  server harus dikonfigurasi untuk selalu melayani file index.html. Hal ini memastikan bahwa router Angular dapat mengambil alih dan merender tampilan yang sesuai.
  • Apache: Gunakan berkas .htaccess untuk menulis ulang semua rute ke index.html:
RewriteEngine on
RewriteRule ^ index.html [L]

  • Nginx: Menambahkan blok konfigurasi untuk aplikasi Angular Anda:

location / {

  try_files $uri $uri/ /index.html;

}

Langkah 4: Menyesuaikan Performa

Setelah aplikasi Anda ditayangkan, mengoptimalkan kinerjanya menjadi sangat penting. Berikut adalah beberapa cara untuk memastikan aplikasi Angular Anda berkinerja baik:
  1. Gunakan Pemuatan Malas: Pemuatan malas adalah ketika modul Angular dimuat hanya ketika dibutuhkan, yang akan meningkatkan waktu muat awal.
  2. Caching: Dengan pekerja layanan, Anda dapat menyimpan aset di dalam peramban dan menggunakannya secara offline serta meningkatkan waktu muat.
  3. Pengiriman CDN: Sajikan aset statis Anda dari CDN (CDN) dari aset statis Anda, dan tingkatkan waktu muat untuk teman Anda di seluruh dunia.
  4. Kompresi: Aktifkan kompresi gzip atau Brotli di server Anda untuk mengurangi ukuran file yang dikirim melalui jaringan.

Langkah 5: Memastikan Keamanan

Keamanan sangat penting untuk aplikasi produksi. Pastikan untuk melakukan hal-hal berikut ini:
  • HTTP: Antara klien dan server, gunakan SSL/TLS untuk menyajikan aplikasi Anda melalui HTTPS dan mengenkripsi transfer data.
  • Kebijakan Keamanan Konten (CSP): Buatlah CSP untuk memitigasi skrip lintas situs (XSS) dan serangan berbahaya lainnya dengan membatasi sumber pemuatan konten.
  • Berbagi Sumber Daya Lintas Asal (CORS): Konfigurasikan CORS dengan benar di server Anda untuk membatasi domain mana yang dapat mengakses titik akhir API Anda.

Kesimpulan

Menerapkan Angular SPA ke produksi melibatkan beberapa langkah, mulai dari menyiapkan aplikasi untuk penerapan hingga memilih penyedia hosting yang tepat dan memastikan kinerja yang optimal. Dengan mengikuti praktik terbaik seperti lazy loading, mengoptimalkan build, dan berfokus pada keamanan, Anda dapat memastikan bahwa Angular SPA Anda memberikan pengalaman pengguna yang cepat, andal, dan aman. Proses penerapan dapat bervariasi tergantung pada platform hosting Anda, tetapi prinsip-prinsip dasarnya tetap sama: menjaga aplikasi Anda tetap dioptimalkan, memastikan perutean yang kuat, dan mengonfigurasi semuanya dengan benar untuk penerapan produksi yang lancar.