Implementing an NGINX Proxy for Webflow Sites

Why Use a Proxy?

There are several benefits to this approach:

Seamless Integration: Users see a single domain without redirects
Flexible Routing: Route specific paths to Webflow while maintaining your main app
SSL Management: Handle SSL certificates at the proxy level
Performance: Leverage NGINX's efficient proxying capabilities

Domain Setup

1. Configure Webflow Domains

Add your production and staging domains to Webflow:

webflow-prod.yourdomain.com
webflow-staging.yourdomain.com

These domains should point to Webflow's DNS records, which they provide when you add the domain in their settings.

2. Update Primary DNS

Point your main domains to your NGINX proxy server:

yourdomain.com
www.yourdomain.com

Routing Configuration

Decide which paths should be routed to Webflow. Common examples include:

/blog/*
/resources/*
/marketing/*
/content/*

All other traffic continues to your primary application.

SSL Considerations

SSL certificates must be provisioned at the proxy level. You'll need certificates for your primary domains (yourdomain.com and www.yourdomain.com). Let's Encrypt works well for this use case.

Depending on your main application's requirements, you may need a fallback location block for handling requests that don't match Webflow routes.

NGINX Configuration

Here's a complete NGINX configuration that implements this proxy setup:

# HTTP -> HTTPS redirect
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    return 301 https://$host$request_uri;
}
 
# Main TLS server
server {
    listen 443 ssl http2;
    server_name yourdomain.com www.yourdomain.com;
 
    # TLS certificates
    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
 
    # Upstream Webflow host
    set $webflow_host webflow-prod.yourdomain.com;
 
    # Resolver for upstream hostname
    resolver 8.8.8.8 ipv6=off valid=300s;
    resolver_timeout 5s;
    proxy_ssl_server_name on;
 
    # Proxy settings
    proxy_http_version 1.1;
    proxy_set_header Connection "";
 
    # Webflow routes (roots and any depth)
    # Matches: /blog, /blog/, /blog/anything, /blog?utm=..., etc.
    location ~* ^/(blog|resources|marketing|content|about|contact)(?=$|/|\?) {
        proxy_pass https://$webflow_host$request_uri;
 
        # Preserve headers
        proxy_set_header Host $webflow_host; # send Webflow its own Host
        proxy_set_header X-Forwarded-Host $host; # keep original host for app logic
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
 
        # Rewrite redirects back to primary domain
        proxy_redirect https://$webflow_host/ $scheme://$host/;
 
        # Buffering/caching
        proxy_buffering on;
        proxy_buffers 16 16k;
        proxy_busy_buffers_size 64k;
        add_header X-Cache-Status $upstream_cache_status;
    }
 
    # Main application
    location / {
        try_files $uri @core_app;
    }
 
    # Named location for main backend
    location @core_app {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Configuration Breakdown

Location Block Pattern

The regex pattern ^/(blog|resources|marketing)(?=$|/|\?) matches:

/blog - exact match
/blog/ - with trailing slash
/blog/anything - with subpaths
/blog?utm=... - with query parameters

Header Management

Host: Set to Webflow's hostname so Webflow receives the correct host header
X-Forwarded-Host: Preserves the original domain for your application logic
X-Forwarded-Proto: Ensures Webflow knows the request was HTTPS
X-Forwarded-For and X-Real-IP: Preserve client IP information

Redirect Handling

The proxy_redirect directive ensures that any redirects from Webflow point back to your primary domain, maintaining a seamless user experience.

Testing

After implementing the configuration:

Test Webflow routes: Visit /blog or other configured paths
Test main application: Verify other routes still work correctly
Check SSL: Ensure HTTPS works for all routes
Verify redirects: Test that Webflow redirects maintain your domain

Summary

This setup provides:

Primary domain traffic → Your main application
Webflow routes → Proxied to Webflow subdomain
SSL → Handled at proxy using Let's Encrypt certificates
Redirects → All HTTP traffic redirected to HTTPS

This approach gives you the flexibility to use Webflow for specific content while maintaining full control over your main application infrastructure.