Proxying with NGINX

Basic setup

To get started, update your server block in the /etc/nginx/sites-available/default file with the following configuration:

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

This setup forwards incoming requests to your Framer-hosted site while keeping your domain in the address bar.

Only proxy specific slugs

If you only want to proxy certain paths (like /blog or /pricing), just add or modify specific location blocks:

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

This gives you more control over what traffic gets passed through to Framer.

Why you need proxy_ssl_server_name on

This directive ensures NGINX sends the correct hostname using SNI (Server Name Indication). Without it, you might hit a 400 Bad Request: Invalid hostname error when forwarding requests to custom domains.

Securing your proxy with SSL

To protect your users and encrypt traffic, it’s important to enable HTTPS. Here are a few common ways to set up SSL:

• Let’s Encrypt with Certbot: Free and automated. Certbot integrates with NGINX and handles SSL certificates and renewals for you. Check out the Certbot docs for a step-by-step guide.

• Use an existing certificate: If you already have one from a provider like DigiCert or Sectigo, just point NGINX to the certificate and key files using the ssl_certificate and ssl_certificate_key directives.

• Self-signed certificate: Fine for testing or internal use, but browsers will show warnings. Not recommended for production sites.