Question 211275 in Docker Question posted in
The official documentation can be found here.

How to load css in nginx using docker file?

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
expected response

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

issues when deployed on docker

Error when I inspect

enter image description here

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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;"]

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search