Nginx reverse proxy not loading static files under sub application correctly

Jeff Do

7/18/24, 7:14 AM

I have a server hosting multiple .NET Core applications on different ports, with nginx reverse proxy setup to redirect users to the correct application via URL.

The current setup is as followed:

Upstream:

upstream app1 {
    server 127.0.0.1:44305;
}

upstream app2 {
    server 127.0.0.1:44306;
}

Location:

location /app1/ {
    rewrite ^/app1/?(.*)$ /$1 break;
    proxy_pass http://app1;
}

location /app2/ {
    rewrite ^/app2/?(.*)$ /$1 break;
    proxy_pass http://app2;
}

I can access the application via https://mywebsite.com/app1 and https://mywebsite.com/app2, however the 2 sites cannot load their respective static files (under the wwwroot folder). When I check the developer console, the error was that the static file being load is https://mywebsite.com/static/image.png instead of https://mywebsite.com/app1/static/image.png, which was the cause of the 404 error when loading the static files.

I have tried adding a location block to specify the static folder:

location ~* /app1/.(css|js|lib|ico)$ {
    alias /var/www/app1/wwwroot/;
}

But it still doesn't work.

Update from this answer, I added this block:

location /static/ {
    proxy_pass http://app1/static/;
}

Now that the static file is redirected from https://mywebsite.com/static to https://mywebsite.com/app1/static/. However, both apps are redirecting the app1 static folder. What can I do to distinguish between the static requests from each application?

0 + 7

nginx

static-files

HBruijn

7/18/24, 7:38 AM

Does this answer your question? [How to handle relative urls correctly with a nginx reverse proxy](https://serverfault.com/questions/932628/how-to-handle-relative-urls-correctly-with-a-nginx-reverse-proxy) - There are several different approaches possible and I think I covered most of them in that answer.

Jeff Do

7/18/24, 8:10 AM

@HBruijn it actually helped to give me some idea, but I ran into another issue instead. Updated in the original post.

HBruijn

7/18/24, 8:15 AM

When the `/static` overlaps , rewrite the HTML/CSS code your back-end apps generate.

Jeff Do

7/18/24, 8:22 AM

Is there no way to differentiate using nginx? I don't understand what you meant by rewrite the HTML/CSS code.

AlexD

7/18/24, 8:55 AM

Please don't rewrite the original question but create another.

HBruijn

7/18/24, 9:21 AM

With rewrite html/css was referring to the last option in https://serverfault.com/questions/932628/ : use the nginx http sub module to rewrite any links to resources with the correct path i.e. rewrite in nginx all references from `/static` to `/app1/static` in the /app1 location block respectively to `/app2/static` in the app2 location block.

Jeff Do

7/18/24, 10:06 AM

@HBruijn thank you, I understand what you meant now. It looks like it would work.

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: Nginx reverse proxy not loading static files under sub application correctly

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.