Mengatur Proxy dengan Cloudflare

Menggunakan situs Framer dengan Cloudflare memungkinkan konfigurasi proxy terbalik (reverse proxy). Ini cocok untuk kasus penggunaan lanjutan seperti manajemen lalu lintas, pengaturan routing yang disesuaikan, dan kepatuhan kebijakan infrastruktur.

Proxy terbalik adalah metode di mana layanan seperti Cloudflare ditempatkan antara situs dan pengunjung. Dengan ini, Anda dapat melakukan hal-hal berikut:

• Integrasi dengan infrastruktur internal (misalnya, penerapan aturan firewall dan routing)

• Pemenuhan syarat logging yang canggih dan peraturan

• Mengontrol CDN, caching, dan manajemen lalu lintas berdasar wilayah

Namun, Framer sudah menyediakan banyak fitur secara bawaan, jadi direkomendasikan hanya menggunakannya jika terdapat kebutuhan infrastruktur atau kebijakan tertentu.
Catatan: Proxy terbalik hanya didukung oleh paket Scale dan Enterprise.

Mengatur Situs Framer

1. Buka proyek Framer dan pergi ke Site Settings → Domains.

2. Tambahkan subdomain Framer gratis (misalnya: example.framer.website)

3. Scroll ke bagian bawah bagian Domains untuk mengatur Canonical URL.
   Contoh: Masukkan domain kustomexample.com di kolom “Advanced” dan publikasikan situs.

Mengatur Domain di Cloudflare

1. Login ke Cloudflare dan tambahkan domain kustom (misalnya: example.com).

2. Pergi ke pengaturan DNS dan tetapkan domain root (@) atau subdomain (app.example.com) ke dummy A record (misalnya: 192.0.2.1).

Catatan: Dalam tampilan pengelolaan DNS di Cloudflare, A record mengarah ke 192.0.2.1 dan status proxy diatur menjadi aktif (ikon awan berwarna oranye).

Membuat Cloudflare Worker

1. Dari dashboard Cloudflare, masuk ke Workers & Pages dan buat Worker baru.

2. Atur route agar dapat memproses semua lalu lintas. Contoh: example.com/*

3. Masukkan kode Worker: ganti bagian my-company.framer.website dengan domain FramerFramer sebenarnya dalam contoh di bawah ini.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  return fetch('<https://my-company.framer.website>' + url.pathname + url.search, {
    method: request.method,
    headers: request.headers,
    body: request.body,
  });
}

Memeriksa Pengaturan

• Pastikan Worker terhubung ke route domain yang tepat.

• Beberapa menit mungkin dibutuhkan untuk menerapkan perubahan.

• Gunakan alat pengembang browser atau alat inspeksi header HTTP untuk memastikan lalu lintas dirouting lewat Cloudflare.

• Jika terjadi masalah atau butuh bantuan, silahkan hubungi tim dukungan Framer.

Artikel ini adalah terjemahan dan adaptasi dari konten blog resmi Framer ‘How to proxy with Cloudflare’.