How to load css in nginx using docker file?

Question

I am new to writing applications and using nginx I am making a app for my friend's birthday. This is my folder structure

 nginx-app
 ┣ Dockerfile
 ┣ pic.jpg
 ┣ style.css
 ┣ index.html

Tried to refer :

docker nginx not loading css styles

But it did not work for me. When I use live server it works as expected but when I try to use docker image to containerise it then it starts to fail. Css does not load can someone help me with this?

Dockerfile

FROM nginx
COPY index.html /usr/share/nginx/html
WORKDIR /app
COPY . .
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

This is how things looks in my live server

This is how it looks in my docker image once its deployed

Error when I inspect

Why does this app not load css ? Can someone help me here

David Maze · Accepted Answer · 2023-07-19 10:49:45Z

2

The default Docker Nginx configuration only looks for files in /usr/share/nginx/html. You're copying index.html there, but then copying the rest of the site into a different directory /app that Nginx doesn't know about.

The easiest change to make is to COPY the entire application into the standard directory

FROM nginx
COPY ./ /usr/share/nginx/html/

If you've mixed HTML content and application source, you may want to more explicitly copy specific files or extensions into the directory.

Note that you do not need an EXPOSE or CMD line for this setup; these are included in the base nginx image and your image will inherit these.

answered Jul 19, 2023 at 10:49

David Maze

165k47 gold badges262 silver badges303 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sidharth vijayakumar Over a year ago

Yes this is what happened copying to app does not make any sense but other point is what i missed should have copied css,jpg etc to /usr/share/nginx/html

sidharth vijayakumar · Accepted Answer · 2023-07-19 06:15:41Z

I had used the below reference

Deploy html app using nginx

From this I could understand that I had to use nginx.conf file.

nginx.conf file that I had used

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    server {
        listen 80;
         
         location = /status {
             access_log off;
             default_type text/plain;
             add_header Content-Type text/plain;
             return 200 "alive";
        }
        
         location / {
            gzip off;
            root /usr/share/nginx/html/;
            index  index.html;
        }
        
        location ~* \.(js|jpg|png|css)$ {
            root /usr/share/nginx/html/;
        }
    } 
    sendfile        on;
    keepalive_timeout  65;
}

Dockerfile that I used


FROM nginx
COPY ./nginx.conf /etc/nginx/nginx.conf

COPY *.html /usr/share/nginx/html/
COPY *.css /usr/share/nginx/html/
COPY *.jpg /usr/share/nginx/html/

WORKDIR /app
COPY . .
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Collectives™ on Stack Overflow

How to load css in nginx using docker file?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related