docker nginx not loading css styles - docker

Question

When uploading static files to my server using Nginx as the web server my css, javascript, and google fonts are not working as they do when testing the site on localhost.
I'm running Nginx in a docker container using the base image.
Dockerfile
FROM nginx
COPY example.com.conf /etc/nginx/nginx.conf
COPY build /etc/nginx/html/
nginx.conf
user nginx;
events {
worker_connections 4096; ## Default: 1024
}
http {
server {
listen 80;
listen [::]:80;
server_name example.com;
include /etc/nginx/mime.types;
root /etc/nginx/html;
index index.html;
location ~ \.css {
add_header Content-Type text/css;
}
location ~ \.js {
add_header Content-Type application/x-javascript;
}
location / {
try_files $uri /index.html =404;
}
}
}
Can someone tell me whats wrong with my conf?
Also when viewed on Chrome the console logs this Resource interpreted as Stylesheet but transferred with MIME type text/plain
Some other SO post I looked at:
SO post
SO post

Answer 1

With the help of this SO answer and the comments I was able to get it working. If my answer doesn't help you I suggest you look at that one when running Nginx in a docker container.
For me it was moving the include /etc/nginx/mime.types; and adding sendfile on;
outside my server block and in the http block
My example.com.conf now looks like this:
user nginx;
events {
worker_connections 4096; ## Default: 1024
}
http {
include /etc/nginx/mime.types;
sendfile on;
server {
listen 80;
listen [::]:80;
server_name example.com;
root /etc/nginx/html;
index index.html;
location ~ \.css {
add_header Content-Type text/css;
}
location ~ \.js {
add_header Content-Type application/x-javascript;
}
location / {
try_files $uri /index.html =404;
}
}
}