CODEWITHSUNDEEP
nginxproxyreverse-proxyhttp-proxynginx-reverse-proxy
Valentin
Valentin

Reputation: 73

NGINX proxy resource loading issue

I am quite new to NGINX and within this topic it is still very hard for me to find the right buzzwords to have more successful search results. That is why I try to descibe my problem here and maybe some of you can point me in the right direction. For my own personal project I want to set up a website which is composed from several micro services (which have all their own frontend).

My idea was to have one NGINX sever running serving as web server to deliver some kind of HTML which then includes the content of the micro services via server side includes (SSI).

Since the SSI can only include files and local folders as I understand I added some proxy_pass to my local server configuration:

http {
    server {
        listen 80;
        ssi on;
        root /usr/share/nginx/html;

        location /led-todo {
            proxy_pass http://led-todo-frontend:3000/;
        }
    }
}

So since I have the NGINX and my micro services in the same docker-compose running the URL: http://led-todo-frontend:3000 works.

The issue I am facing now is that when access my index.html page:

<html>
<head>
</head>

<body>
  <!--# include virtual="test.html"-->
  <!--# include virtual="/led-todo/"-->
</body>
</html>

The index.html content of my micro service is actually included into the above shown html site. The issue arises when the script tags within my included html content are resolved:

<script src="/static/js/bundle.js">

The browser tries to load them from:

http://localhost:8080/static/js/bundle.js

Instead of:

http://localhost:8080/led-todo/static/js/bundle.js

Which then would again trigger the proxy pass to the correct micro service.

I feel like there should be some parameters to define the root or something so that /static/js/bundle.js is not loaded from localhost:8080 but from localhost:8080/led-todo in the following part of the NGINX configuration:

location /led-todo {
    proxy_pass http://led-todo-frontend:3000/;
}

I tried several things I found in the internet here but somehow I am missing the words to describe this issue so that I can find results...

Anyone know how to solve this issue, or know at least some buzzwords I can search for?

Upvotes: 1

Views: 1324

Answers (1)

Ivan Shatsky
Ivan Shatsky

Reputation: 15470

This isn't a very elegant solution, but you can try to on-the-fly rewriting that tags content with the ngx_http_sub_module, something like this could work:

    location /led-todo/ {
        proxy_pass http://led-todo-frontend:3000/;
        sub_filter_once off;
        # uncomment to do substitution inside CCS or JS content too
        # sub_filter_types text/css application/javascript;
        sub_filter 'href="/' 'href="/led-todo/';
        sub_filter "href='/" "href='/led-todo/";
        sub_filter 'src="/'  'src="/led-todo/';
        sub_filter "src='/"  "src='/led-todo/";
    }

Upvotes: 1

Related Questions