proxy_pass from wildcard subdomain via NGINX

Question

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.

Try https://localhost:8000/xyz/ instead of https://localhost:8000/xyz — Ivan Shatsky
– Ivan Shatsky, Commented Feb 21, 2020 at 11:48
I think you faced the problem that I'm tried to describe here. — Ivan Shatsky
– Ivan Shatsky, Commented Feb 21, 2020 at 13:01
What is the correct URL for those two assets? E.g. Are they /xyz/socket.io.js or /socket.io.js? — Richard Smith
– Richard Smith, Commented Feb 21, 2020 at 13:58
@IvanShatsky Thanks for the link! I'm using a location prefix for example for /api, which works great. I tried setting a location prefix in this blog, but then I get the example html page I put into the /var/[domain]/html directory. Why is that? Besides that, if I use the location prefix, wouldn't that just move my main application from '/' to '/someDirectory' and I still had to use location_pass to get to my subfolder? I'm not sure if you saw my update about the errors. It seems, the server delievers html instead of js (?) for socket.io.js. Do you have an idea why? — torquan
– torquan, Commented Feb 24, 2020 at 10:03

torquan · Accepted Answer · 2020-02-26 11:15:53Z

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 :)

Collectives™ on Stack Overflow

proxy_pass from wildcard subdomain via NGINX

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related