Partial site hosting with reverse proxy

I am trying to host a component of my site (/en/privacy-policy) on webflow by using an nginx reverse proxy, but am getting the following fastly error.

I’ve added the custom domain to my site, however, I wouldn’t expect it to be ‘Connected’ because that domain name is pointed towards my nginx server, not to webflow’s proxy server.

This is what my nginx server configuration looks like:

server {
    listen 80;
    server_name www.dev.canimmunize.ca;

    location /en/privacy-policy {
      proxy_pass http://cameronbell-990c7f3cf051df1661923782768.webflow.io$request_uri;
    }
}

Thanks!

1 Like

Hey @cameronbell

With the nginx config you posted, nginx will proxy the request to our server without changing the hostname of the request. Since we do dynamic routing based on hostnames, the hostname included in the request must actually match the site you are trying to proxy to.

I think the additional line in the location block of your config you need is this:

proxy_set_header Host cameronbell-990c7f3cf051df1661923782768.webflow.io
1 Like

Thanks!

In the end, I ended up setting up the webflow site on a different subdomain (wf.canimmunize.ca), which allowed the domain to be properly connected to that subdomain. And then I proxied my desired domain to that subdomain like so:

location /en/privacy-policy {
    proxy_ssl_server_name on;
    proxy_redirect https://wf.canimmunize.ca https://www.dev.canimmunize.ca;
    proxy_redirect http://wf.canimmunize.ca https://www.dev.canimmunize.ca;
    proxy_pass https://wf.canimmunize.ca$request_uri;
}

Hey,

we have been struggling around for quite a long time to find the correct settings.
In the end it was easier then expected.
Feedback from the official support was limited helpful, that’s why I want so sum up the steps I did.

Webserver: Nginx
Primary-Domain: www.yoursite.com
Webflow-Subdomain: cms.yoursite.com
Webflow-CMS should be available under: www.yoursite.com/content

1.) Activate at least the “Basic Hosting Plan” in your webflow project
2.) Add a Custom Domain (eg. cms.yoursite.com)
3.) Enable SSL for Custom Domain
4.) Add CNAME-DNS Record: cms.yoursite.comproxy-ssl.webflow.com
5.) Add A-Type DNS Record: cms.yoursite.com → 34.193.69.252
Glossary Term: DNS records | Webflow Help
6.) Set up Reverse Proxy in Nginx:

location /content {
proxy_ssl_server_name on;
proxy_pass https://cms.yoursite.com/;
}

It is important to set the slashs exactly like in the example.
Otherwise I got a 502 Bad-Gateway or 404 Error.

3 Likes

Here’s the official response I got from Webflow support regarding partial site hosting via reverse proxy. Note that Webflow now allows for href prefixing in the custom code advanced options.

The way to setup the connection in Webflow is to create a subdomain using a cname record to point to proxy-ssl.webflow.com.

For example, if you create a subdomain of the root domain called “connect” then point “connect.yourdomain.com” at proxy-ssl.webflow.com and add that domain to the hosting tab of project settings in Webflow.

Next, in your reverse proxy, the url that you will use to pull the pages from Webflow will be: https://connect.yourdomain.com.

Here is an article on setting the href prefix for the Webflow site: Href prefix - Webflow University Documentation

1 Like

This worked for me. Thanks!

For those having the issues, after a lot of digging, here is what worked in our case:

Webflow:

  1. Add the custom subdomain and make it as Default
  2. Enable SSL in the Webflow settings

Cloudflare:

  1. Setup
webflow.domainexample.com

to Webflow’s CNAME

proxy-ssl.webflow.com

NGINX

  1. Add the following config
location = /fr/ {
        proxy_ssl_server_name on;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header Host webflow.domainexample.com;
        proxy_pass https://webflow.domainexample.com/;
    }

In our case, we just wanted

https://domainexample.com/fr/

to serve Webflow so we could migrate all old WP pages one by one.

I hope this helped