Apa itu CloudFront?

CloudFront adalah jaringan pengiriman konten (CDN) yang disediakan oleh Amazon.
Framer menggunakan CloudFront untuk mengirimkan aset secara default. Oleh karena itu, dalam kebanyakan kasus Anda tidak perlu melakukan pengaturan CloudFront secara terpisah kecuali jika Anda memerlukan lebih banyak kontrol atas lingkungan hosting, barulah Anda melakukan pengaturan secara manual.

Kapan sebaiknya mengatur sendiri?

• Ketika Anda perlu mengontrol kebijakan keamanan, aturan caching, lalu lintas routing dengan lebih detail.

• Ketika Anda perlu mengelola berbagai origin (Asal) secara terpadu.

Cara Mengatur CloudFront

1. Dari proyek Framer, masuk ke pengaturan(Settings) → domain (Domains).

2. Tambahkan subdomain Framer gratis ke situs Anda (contoh: my-company.framer.website).

3. Lalu di menu yang sama, ganti opsi URL Canonical ke pengaturan lanjutan (Advanced), masukkan domain kustom (contoh: my-site.com), dan terbitkan situs web Anda.

Catatan: Anda harus menggunakan subdomain Framer khusus seperti my-company.framer.website. Jangan gunakan domain dasar (Base domain) dalam bentuk <something>.framer.app.

Membuat Distribusi AWS CloudFront

1. Pergi ke CloudFront dari Konsol Manajemen AWS.

2. Klik Create Distribution.

3. Masukkan subdomain Framer di Origin Domain.

   Penting: Gunakan my-company.framer.website bukan <something>.framer.app

4. Setel perilaku cache (Cache Behavior) dasar seperti berikut:

   • Viewer protocol policy: Redirect HTTP to HTTPS

   • Allowed HTTP methods: GET, HEAD
     (Jika situs dilindungi kata sandi, gunakan GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE)

   • Cache policy: CachingOptimized

   • Origin request policy: AllViewerExceptHostHeader

   • Response headers policy: SecurityHeadersPolicy

5. Setelah menyesuaikan opsi, klik Create distribution.

6. Setelah distribusi selesai, klik tautan untuk memeriksa situs melalui CloudFront.

Mengonfigurasi Beberapa Origin

Misalnya, ketika Anda hanya ingin menyediakan jalur /framer-project/ dari situs Framer.

1. Dari distribusi CloudFront yang ada, pilih Behaviors → Create Behavior.

2. Masukkan /framer-project/* di Path pattern.

3. Pilih proyek Framer sebagai origin untuk jalur tersebut.

4. Terapkan kebijakan cache, protokol, dan header yang sama seperti yang dijelaskan sebelumnya.

5. Setelah disimpan dan distribusi selesai diluncurkan, Anda dapat menggunakan dua origin dalam satu distribusi CloudFront.

Menghubungkan Domain

Untuk menambahkan domain khusus ke distribusi CloudFront, gunakan fitur Alternate Domain Name (CNAME).
Catatan: Jika Anda ingin menggunakan domain puncak (Apex domain) (mysite.com), lebih mudah menggunakan Route53.

Artikel ini adalah adaptasi dari ‘Hosting with Amazon CloudFront’ di blog resmi Framer.