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, Feb 21 '20 at 11:48
I think you faced the problem that I'm tried to describe [here](https://stackoverflow.com/questions/59993875/how-to-run-two-js-apps-on-different-url-with-nginx/59998219#59998219). — Ivan Shatsky, Feb 21 '20 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, Feb 21 '20 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, Feb 24 '20 at 10:03
@RichardSmith https://example.com.xyz/socket.io/socket.io.js is the correct address. When I visit example.com (working) and go to the developer tools -> Application -> Scripts, I can see the correct file. When doing exactly the same in abc.example.com, I get HTML code instead of the .js file. The html code seems to be an empty page of my application (it's the default-html.js I set in Gatsby). The thing is, it both shows the same address. — torquan, Feb 24 '20 at 10:08
It's the same address with the exception of the subdomain. - example.com/socket.io/socket.io.js delivers the correct js file - sub.example.com/socket.io/socket.io.js delivers a html page — torquan, Feb 24 '20 at 10:16
Which does make sense - My application hosts the file at example.com/socket.io/socket.io.js, but when I access the site via the subdomain, it looks for the site in example.com/xyz/socket.io/js as this also get's proxy_passed by NGINX if I understand that correctly. (with xyz being the subfolder I want to pass the request too, see above) The question is, what can I do to make my application use the right file? — torquan, Feb 24 '20 at 10:22
Instead of changing the `proxy_pass` statement, try adding `rewrite ^/$ /xyz/ last;` — Richard Smith, Feb 24 '20 at 11:18
@RichardSmith I tried: When I visit now abc.example.com, I am redirected to abc.example.com/xyz and the correct page shows up. But what I wanted to do is to show that page on abc.example.com ($sub.example.com shows example.com/$sub) — torquan, Feb 25 '20 at 16:29

torquan · Answer 1 · 2020-02-26T11:15:53.060

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

proxy_pass from wildcard subdomain via NGINX

1 Answers1