CODEWITHSUNDEEP
reactjsnginxserverconfiggatsby
torquan
torquan

Reputation: 354

proxy_pass from wildcard subdomain via NGINX

I'm trying to show users visiting a wildcard subdomain a subfolder: abc.example.com -> example.com/xyz

This NGINX server block code is working:

server {
   # server name with regexp
   server_name ~^(?<sub>[^.]+)\.example\.com$;
   # this server catches all requests to xxxx.example.com
   # and put "xxxx" to $sub variable
   location / {
        # finally we want to request different URI from remote server
        proxy_pass http://localhost:8000;
        # proxy_redirect will rewrite Location: header from backend
        # or you can leave proxy_redirect off;
        proxy_redirect http://localhost:8000 http://$sub.localhost:8000;
   }
[certbot code]
}

(found in question 5249883).

But when replacing proxy_pass value "https://localhost:8000" with "https:localhost:8000/xyz", I get these errors and a blank page:

Uncaught SyntaxError: Unexpected token '<'

in both socket.io.js and commons.js.

The app I'm running on example.com is built with React/Gatsby. example.com/demo is working.

EDIT: I put the wrong error messages, those errors appeared when I tried something different.

Upvotes: 0

Views: 2324

Answers (1)

torquan
torquan

Reputation: 354

The problem was (as I understand it now), that Gatsby hosts scripts at example.com/[script-address] and using NGINX proxy_pass, the script address is also changed to example.com/[subfolder]/[script-address].

The solution to this is to set the "path-prefix" value in gatsby.config as explained here: Gatsby documentation.

With doing that, I set a prefix for my complete application, which is not really what I want to do, as the main application is still hosted on example.com, I only want the subdomains to get passed to some subpages. (The subdomains are user created and served dynamically by the main application). Surprisingly, both (main application and subdomains) work after changing the path prefix.

This seems only to work for the production build (you have to pass a flag when building), so I'm currently still not sure what to do while developing.

If you have an idea how I could solve that better, please message me :)

Thanks to Ivan and Richard for putting me on the right track!

EDIT: Asset prefixed would be the better way: https://www.gatsbyjs.org/docs/asset-prefix/ It's still ugly and I think there's a way to solve this via NGINX. I still can't use the development build this way.

EDIT 2: After I've been messing with this for 3 days now, I've again tried to find a similar question & got lucky: https://serverfault.com/questions/840654/nginx-map-subdomain-to-a-subdirectory-on-proxied-server I've changed my code to:

    location    / {
    proxy_pass http://localhost:8000/xyz$uri/;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;

   }

and it finally works :)

Upvotes: 1

Related Questions