0

I haven't found any question that addresses exactly my problem, but I guess someone must have had it before.

For external reasons I have a folder structure as such:

server/
      | ---- /results/data/index.html
      |
      | ---- /resources/css/styles.css
      |                    /bootstrap.min.css
      |                /js/bootstrap.bundle.min.js
      |                /pngs/[list of png files]

I have a simplified html like this:

 <!doctype html>
  <html lang="en">
    <head>
     <!-- Bootstrap CSS -->
       <link type = "text/css" href="../../.resources/css/bootstrap.min.css" rel="stylesheet">
       <link rel = "stylesheet" type = "text/css" href="../../.resources/styles.css">
    </head>
    <body>
      <script src="../../.resources/js/bootstrap.bundle.min.js"></script>
      <!-- some content-->
    </body>
  </html>

So, as you can see the html references the resources by relative paths (until now it has been used with no web server and it worked like that, only by opening the html in a browser).

Now we have to serve it with nginx in a docker, for which I tried:

events { }
http {
  server {
      listen 8080;
      location / {
          root /server/results/data;
          index index.html
      }

      location ~* \.(js|jpg|png|css)$ {
          root ../../;
      }
  }
}

But it is not working, the resources are not being found (the html is served with no styles, and the console says resources not found).

My first question is:

  • Is it even possible to make nginx serve these files at the expected location?

and something that I don't understand:

  • Even if nginx finds the resources, how to assure that serves them in a way that the relative paths specified in the html point to them?
Jorge
  • 1,350
  • 2
  • 10
  • 19

1 Answers1

1

I just found the issue. As I posted here:

https://stackoverflow.com/a/69493106/3751594

My problem was a dot in one of the folders of the path that I used as a hidden folder for the resources:

<link type = "text/css" href="../../.res/css/bootstrap.min.css" rel="stylesheet">

That was causing that the styles weren't rendered in the browser although they were being loaded with no errors from nginx. Only Firefox (not Chrome) complained about MIME types of css not being css but text.

Jorge
  • 1,350
  • 2
  • 10
  • 19