Partial site hosting with reverse proxy

[cameronbell]

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!

[nathan (Nathan Johnson)]

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

[cameronbell]

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;
}

[colt]

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.com -> proxy-ssl.webflow.com
5.) Add A-Type DNS Record: cms.yoursite.com -> 34.193.69.252
https://university.webflow.com/glossary/dns-records
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.

[mikey555 (Michael)]

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: https://university.webflow.com/article/href-prefix