How to implement a reverse proxy by skipping paths (nginx)?

[alantoledo007]

Hello everyone. I have an eCommerce project where I want to implement a custom domains feature for my users. So, I did a reverse proxy with nginx and got the following problem:

Now, my users' stores point to myproject.com/:store-slug. So, I need clientdomain.com to pass to myproject.com/:store-slug (different paths) through a reverse proxy (nginx). But it throws an error with Remix, since since the paths are different, it starts crashing.

It returns the following error message: cannot access (meta or links or handle) from undefined.

This does not happen if the routes match (clientdomain.com/:store-slug -> myproject.com/:store-slug).

(I've solved this by redirecting clientdomain.com to clientdomain.com/:store-slug, but I don't like that solution)

Does anyone have an idea how I do so Remix can understand that clientdomain.com is the same as myprojet.com/:store-slug?

I leave my nginx configuration and the error message that I was commenting on.

With redirect - OK

...

    location ~* \.(gif|jpg|jpeg|png|wmv|avi|mpg|mpeg|mp4|htm|html|js|css|svg)$ {
        proxy_pass https://myproject.com;
    }

    location /build {
        proxy_pass https://myproject.com/build;
    }

    location /assets {
        proxy_pass https://myproject.com/assets;
    }

    location / {
       return 301 https://$host/demo;
    }

    location /demo {
        proxy_pass https://myproject.com/demo;
    }

...

Direct - FAIL

...
    location / {
        proxy_pass https://myproject.com/demo;
    }
...

in summary

I need a path omitted. That is, the application already has the path /:slug and with the proxy, I make the main path (/) point to (/:slug), therefore there is a kind of carrying of paths:

Proxy	App
/	/:store-slug
/:product-id	/:store-slug/:product-id

grabacion-de-pantalla-2023-07-18-a-la-s-100616_9TVcpPsq.mp4

Thanks!

[kiliman]

Check out my sample here and let me know if that helps.

https://github.com/kiliman/remix-proxy-basename

[alantoledo007]

I've seen it, but it's a bit of a backwards situation. In this link, it solves the problem that a subpath (/shop) can be the base url. My case is somewhat different. I need a path omitted. That is, the application already has the path /:slug and with the proxy, I make the main path (/) point to (/:slug), therefore there is a kind of carrying of paths:

Proxy	App
/	/:store-slug
/:product-id	/:store-slug/:product-id

[alantoledo007]

I added a video. surely that will help

[kiliman]

Hmm.. Ok, the problem is that Remix doesn't support URL rewriting. The URL in the browser bar MUST match the configured routes. This is because client-side navigation is handled by React Router, which manipulates the browser URL.

Like in my example, you would be better off passing a header for the slug. Then you can access it in your loaders to render the correct data.