Otomatisasi Deployment Web: Panduan Integrasi GitHub, AWS Amplify, dan Custom Domain

Dalam siklus pengembangan web modern, kecepatan dan efisiensi adalah segalanya. Memperbarui konten pada landing page idealnya tidak lagi melibatkan proses transfer file manual (FTP) yang memakan waktu. Dengan mengadopsi pendekatan Continuous Integration/Continuous Deployment (CI/CD), setiap perubahan kode dapat langsung tayang hanya dengan satu perintah Git.

Artikel ini akan membahas langkah demi langkah cara meng-host landing page dari repositori GitHub secara otomatis menggunakan AWS Amplify, sekaligus menghubungkannya dengan custom domain milik Anda sendiri.

Mengapa Menggunakan AWS Amplify?

AWS Amplify adalah layanan dari Amazon Web Services yang dirancang khusus untuk menyederhanakan proses hosting aplikasi web statis maupun Single Page Applications (SPA). Beberapa keunggulan utamanya meliputi:

• Otomatisasi Penuh: Terintegrasi langsung dengan repositori (GitHub, GitLab, Bitbucket). Setiap kali ada perintah git push ke branch utama, Amplify akan otomatis membangun dan menerapkan pembaruan tersebut ke server.
• Sertifikat SSL Gratis: Amplify secara otomatis menyediakan dan memperbarui sertifikat HTTPS untuk keamanan web.
• Jaringan Distribusi Global (CDN): Website Anda akan didistribusikan melalui infrastruktur CloudFront milik AWS, memastikan waktu muat (load time) yang cepat dari seluruh dunia.

Persiapan Sebelum Memulai

Sebelum masuk ke tahap konfigurasi, pastikan Anda telah menyiapkan tiga hal berikut:

1. Repositori GitHub: Berisi file kode landing page (HTML, CSS, JS, atau framework seperti React/Vue).
2. Akun AWS: Akun AWS yang aktif untuk mengakses layanan Amplify.
3. Custom Domain: Domain yang sudah dibeli dari layanan registrar (misalnya Niagahoster, Rumahweb, atau Namecheap).

Fase 1: Menghubungkan GitHub ke AWS Amplify

Langkah pertama adalah membuat aplikasi baru di AWS Amplify dan menghubungkannya dengan basis kode Anda.

1. Akses AWS Console: Masuk ke dasbor AWS Management Console dan buka layanan AWS Amplify.
2. Buat Aplikasi Baru: Klik tombol New app dan pilih Host web app.
3. Pilih Sumber Repositori: Pilih GitHub sebagai penyedia repositori Anda dan selesaikan proses otorisasi. Ini memberikan izin kepada AWS untuk membaca perubahan pada kode sumber.
4. Konfigurasi Branch: Pilih nama repositori yang menyimpan landing page Anda, lalu tentukan branch yang akan dijadikan target deployment (umumnya main atau master).
5. Pengaturan Build: Amplify cukup cerdas untuk mendeteksi struktur proyek secara otomatis. Jika web Anda murni HTML/CSS statis di root folder, beri centang pada opsi “Allow AWS Amplify to automatically deploy all files hosted in your repository root”.
6. Deploy: Tinjau kembali konfigurasi Anda, lalu klik Save and deploy. Dalam hitungan menit, Amplify akan menampilkan tautan bawaan (contoh: [https://main.xxxx.amplifyapp.com](https://main.xxxx.amplifyapp.com)) yang menandakan situs Anda sudah live.

Fase 2: Mendaftarkan Custom Domain

Setelah web berhasil tayang di tautan bawaan AWS, langkah selanjutnya adalah menggunakan domain profesional Anda.

1. Buka menu App settings di sisi kiri panel Amplify Anda, kemudian pilih Domain management.
2. Klik tombol Add domain.
3. Masukkan nama domain yang Anda miliki (contoh: kucing.com), lalu klik Configure domain.
4. Secara default, Amplify akan mengonfigurasi domain utama ([https://kucing.com](https://kucing.com)) dan subdomain ([https://www.kucing.com](https://www.kucing.com)). Anda bisa mengatur sistem redirect dari domain utama ke versi www atau sebaliknya sesuai kebutuhan SEO Anda.
5. Klik Save and assign. Amplify kini akan memproses pembuatan sertifikat SSL.

Fase 3: Konfigurasi DNS di Registrar Domain

Ini adalah langkah krusial agar lalu lintas (traffic) internet yang menuju ke domain Anda diarahkan ke server AWS.

1. Pada halaman Domain management di Amplify, klik Actions lalu pilih View DNS records. Anda akan melihat detail record CNAME yang harus ditambahkan.
2. Buka tab peramban baru, lalu login ke dasbor penyedia domain Anda (tempat Anda membeli domain tersebut).
3. Cari menu DNS Management atau Zone Editor.
4. Tambahkan record baru sesuai dengan data yang diberikan oleh Amplify. Biasanya terdapat dua record penting:
   • CNAME untuk Validasi SSL: Bukti kepemilikan domain (format nama host biasanya berawalan garis bawah, misal: _xxxx.kucing.com).
   • CNAME untuk Routing Web: Mengarahkan lalu lintas ke infrastruktur CloudFront AWS.
5. Simpan perubahan pada DNS Management.

Penutup: Menunggu Propagasi DNS

Setelah semua konfigurasi DNS disimpan, internet membutuhkan waktu untuk mengenali rute baru ini—proses yang dikenal sebagai propagasi DNS. Waktu yang dibutuhkan bervariasi, dari 5 menit hingga maksimal 24 jam.

Anda dapat memantau prosesnya langsung di dasbor AWS Amplify. Begitu status domain berubah menjadi Available, landing page Anda siap diakses oleh publik secara aman melalui HTTPS.

Mulai saat ini, alur kerja pengembangan (deployment pipeline) Anda sudah terotomatisasi penuh. Cukup lakukan perbaikan kode di komputer lokal, eksekusi git push, dan biarkan AWS Amplify menangani sisanya hingga tayang di domain utama.

Percobaaan R&D

Tentu, menghubungkan repository GitHub ke AWS Amplify dan memasang custom domain (seperti kucing.com) adalah proses yang cukup mudah karena Amplify sudah menyediakan fitur CI/CD (Continuous Integration/Continuous Deployment) otomatis.

Berikut adalah panduan langkah demi langkah untuk melakukannya:

Langkah 1: Deploy Repository GitHub ke AWS Amplify

1. Login ke AWS Management Console, lalu cari layanan AWS Amplify di kolom pencarian.
2. Di halaman AWS Amplify, klik tombol New app (di pojok kanan atas) dan pilih Host web app.
3. Pilih GitHub sebagai sumber repository, lalu klik Continue. Anda akan diminta untuk melakukan otorisasi (login ke GitHub) agar AWS bisa membaca repository Anda.
4. Pilih Repository landing page Anda dari dropdown, lalu pilih Branch yang ingin di-deploy (biasanya main atau master). Klik Next.
5. Build settings:
   • Jika landing page Anda murni HTML/CSS/JS statis, Amplify biasanya akan langsung mendeteksinya.
   • Anda bisa mencentang kotak “Allow AWS Amplify to automatically deploy all files hosted in your repository root” jika file index.html Anda ada di folder paling luar (root).
   • Klik Next, periksa kembali ringkasan pengaturan, lalu klik Save and deploy.
6. Tunggu beberapa menit. Amplify akan melakukan proses Provision, Build, dan Deploy. Jika berhasil, Anda akan melihat tanda centang hijau dan sebuah URL bawaan dari Amplify (contoh: https://main.xxxxxx.amplifyapp.com). Pastikan web Anda bisa diakses dari link tersebut.

Langkah 2: Menambahkan Custom Domain (kucing.com)

Setelah aplikasi berhasil berjalan di link bawaan Amplify, sekarang saatnya memasang domain Anda.

1. Di menu sebelah kiri pada halaman aplikasi Amplify Anda, pilih App settings > Domain management.
2. Klik tombol Add domain.
3. Ketikkan nama domain Anda: kucing.com, lalu klik Configure domain.
4. Atur Subdomain: * Secara default, Amplify akan mengatur https://kucing.com (root) dan https://www.kucing.com (subdomain).
   • Anda bisa mengarahkan keduanya ke branch main Anda. Biasanya ada opsi untuk me-redirect root domain ke www atau sebaliknya. Atur sesuai preferensi Anda.
5. Klik Save and assign.
6. Amplify akan mulai membuat sertifikat SSL (HTTPS) secara gratis menggunakan AWS Certificate Manager (ACM). Ini memakan waktu beberapa saat.

Langkah 3: Konfigurasi DNS di Penyedia Domain

Agar kucing.com benar-benar mengarah ke AWS Amplify dan SSL bisa aktif, Anda harus memasukkan beberapa pengaturan ke dalam DNS Management di tempat Anda membeli domain (misalnya Niagahoster, Namecheap, Cloudflare, dll).

1. Kembali ke halaman Domain management di Amplify. Anda akan melihat status domain sedang Pending verification.
2. Klik Actions > View DNS records. Amplify akan menampilkan tabel berisi Record Type (biasanya CNAME), Record Name (Host), dan Record Value (Target/Points To).
3. Buka tab baru dan Login ke penyedia domain Anda.
4. Masuk ke menu DNS Management atau Zone Editor.
5. Tambahkan record persis seperti yang diminta oleh AWS Amplify. Biasanya ada dua jenis record yang perlu ditambahkan:
   • CNAME untuk Validasi SSL: Ini membuktikan bahwa Anda pemilik domain tersebut (biasanya namanya berawalan _xxxx.kucing.com).
   • CNAME/ALIAS untuk Trafik Web: Ini mengarahkan www.kucing.com ke server CloudFront milik Amplify (biasanya berakhiran cloudfront.net).
6. Simpan pengaturan DNS di penyedia domain Anda.

Langkah 4: Tunggu Proses Propagasi

Setelah Anda memasukkan DNS record, AWS Amplify akan mendeteksinya. Proses penyebaran DNS (propagasi) ini bisa memakan waktu mulai dari 5 menit hingga maksimal 24 jam.

Anda bisa memantau statusnya di halaman Domain management AWS Amplify. Indikatornya akan berubah dari Pending verification -> Verifying -> SSL Configured -> Available.

Jika status sudah Available, selamat! Landing page Anda sekarang sudah live dan bisa diakses dengan aman di https://kucing.com. Setiap kali Anda melakukan git push ke branch main di GitHub, web di domain Anda akan otomatis terupdate.