Pengaturan Dasar

Silakan perbarui blok server di file /etc/nginx/sites-available/default seperti di bawah ini.

server {
    listen 80;
    server_name example.com www.example.com;

    resolver 8.8.8.8;

    location / {
        set $backend <https://example.framer.website>;
        proxy_pass $backend$request_uri;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_ssl_server_name on

Setelah menerapkan pengaturan ini, permintaan yang masuk akan diteruskan ke situs FramerFramer, dan pengguna akan tetap melihat domain Anda (example.com) di bilah alamat browser.

Menghubungkan Slug Tertentu Saja

Jika ingin memproksi hanya slug tertentu (misalnya: /blog atau /pricing), Anda perlu menambahkan atau memodifikasi blok lokasi tertentu.

location /my-path {
    set $backend <https://example.framer.website>;
    proxy_pass $backend;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    proxy_ssl_server_name on

Dengan cara ini, hanya permintaan ke /my-path yang akan diteruskan ke situs FramerFramer. Hal ini memungkinkan Anda untuk mengendalikan traffic mana yang akan dikirim ke FramerFramer dengan lebih tepat.

Kenapa Diperlukan ‘proxy_ssl_server_name on’

Directive ini memastikan bahwa NGINX mengirimkan nama host yang benar saat meneruskan permintaan, dengan menggunakan cara SNI (Server Name Indication). Tanpa pengaturan ini, Anda mungkin akan menghadapi error 400 Bad Request: Invalid hostname saat mengirim permintaan dari domain kustom.

Mengamankan Proxy dengan SSL

Untuk melindungi pengguna dan mengenkripsi trafik, pengaturan HTTPS diperlukan.

Menggunakan Let's Encrypt dengan Certbot

• Gratis dan terintegrasi dengan baik dengan NGINX, mengotomatisasi pembuatan dan pembaruan sertifikat SSL.

• Silakan merujuk ke dokumentasi Certbot untuk panduan langkah demi langkah.

Menggunakan Sertifikat yang Sudah Ada

• Jika Anda telah memiliki sertifikat dari penyedia seperti DigiCert atau Sectigo, Anda bisa mengkonfigurasi NGINX dengan sertifikat dan file kunci menggunakan directive ssl_certificate dan ssl_certificate_key.

Sertifikat yang Ditandatangani Sendiri

• Cocok untuk pengujian atau penggunaan internal, tetapi tidak disarankan untuk situs produksi karena akan memunculkan peringatan keamanan di browser.

Penutupan

Rute mana yang Anda ingin hubungkan dengan reverse proxy? Dengan pengaturan ini, Anda bisa mengoperasikan situs Framer pada domain Anda dengan stabil dan aman. Cobalah memproksi seluruhnya dengan blok server dasar terlebih dahulu, lalu tetapkan rute yang dibutuhkan yang ingin Anda kelola secara lebih fleksibel di masa mendatang.

Artikel ini adalah adaptasi dari konten blog resmi Framer, ‘Proxying with NGINX’ yang telah diterjemahkan.