Nginx pod not serving css files

Question

I have a webapp running in kubernetes. I want to serve static files, css in my case, from nginx pod. From the application I define css file location like this:

 <link rel="stylesheet" href="assets/css/stylesheet.css" type="text/css">

When building docker image I copy over css file to www/media/ and in nginx config I point to that:

FROM nginx
RUN rm /etc/nginx/conf.d/default.conf
COPY config/default.conf /etc/nginx/conf.d/default.template
COPY assets/ /www/media
EXPOSE 80

Here's nginx config:

server {
    listen 0.0.0.0:80;
    server_name localhost;
    location / {
        proxy_pass http://${FLASK_APP}:8080/;
    }

    location ~ /assets {
        root /www/media;
    }
}

I have confirmed that the file can be found on nginx pod under /www/media/css/stylesheet.css , however I cannot reach it neither from the browser nor the application itself. The error I get is this: GET http://192.168.99.106:30604/assets/css/stylesheet.css net::ERR_ABORTED 404 (Not Found)

/assets should point to www/media where the directory with stylesheet are kept, correct? What am I misunderstanding?

Answer 1

Not sure if this is the solution, but hopefully some things to try.

1. Change your docker file to

COPY assets /www/media

2. In your comments you've said that you can see the files in /www/media. But you're trying to access them in /assets. Have you configured this in nginx correctly? Perhaps try this

location /assets/ {
    alias /www/media/;
  }

3. Final thing I would mention is permissions. What are the permissions of the files in the container? ls -la will tell you this. They should be 755 I believe for Nignx.

Hope this helps you.

Answer 2

Ok, I figured it out. Here's my Nginx config to serve the files:

server {
listen 0.0.0.0:80;
server_name localhost;

    location / {
      proxy_pass http://${FLASK_APP}:8080/; 
  }
    location ~ \.css {
      root /www/media;   
    }
}

I also changed my docker a bit:

FROM nginx
RUN rm /etc/nginx/conf.d/default.conf
COPY config/default.conf /etc/nginx/conf.d/default.template
COPY assets /www/media/assets
RUN chown -R nginx:nginx /www/
EXPOSE 80

With the above config in place css is being served without any issues.