This document was created to help local users learning Framer who face difficulties due to a lack of Korean resources. It includes translations from the official blog and adds practical information. We hope it is of some help to those using Framer.

Basic Configuration

First, update the server block in the /etc/nginx/sites-available/default file as shown below.

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

Applying this configuration will forward incoming requests to the Framer site while allowing users to see your domain (example.com) in the browser's address bar.

Proxy Specific Slugs Only

If you want to proxy only specific slugs (e.g., /blog or /pricing) instead of the whole site, you need to 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 way, only requests to /my-path will be forwarded to the Framer site. This allows you to have granulated control over which traffic to send to Framer.

Why 'proxy_ssl_server_name on' Is Needed

This directive ensures NGINX sends the correct hostname using the SNI (Server Name Indication) method when proxying requests. Without this setting, you may encounter a 400 Bad Request: Invalid hostname error when sending requests to a custom domain.

Secure the Proxy with SSL

Setting up HTTPS is essential to protect users and encrypt traffic.

Using Let's Encrypt with Certbot

• It's free and integrates well with NGINX to automatically generate and renew SSL certificates.

• Refer to the Certbot documentation for a step-by-step guide.

Using Existing Certificates

• If you already have certificates issued by providers like DigiCert, Sectigo, etc., configure NGINX with directives like ssl_certificate and ssl_certificate_key to link to the certificate and key files.

Self-Signed Certificates

• They are okay for testing or internal use but are not recommended for live sites, as browsers will display security warnings.

Conclusion

Which paths would you like to connect as a reverse proxy? With this setup, you can reliably and securely manage the Framer site on your domain. Initially, try proxying the entire site with the basic server block, and later, specify only the necessary paths for more flexible operation.

This article is a translated and adapted version of ‘Proxying with NGINX’ from the Framer official blog.