Django and React development in Docker and nginx, wrong MIME types errors

Question

I am developing Django react apps with docker, but my admin page gets below error. I'm using nginx to proxy my route to react client and django backend and admin to the backend. But my backend shows this kind of error which doesn't serve the static css files.

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3050/static/admin/css/base.css". ... Does anyone know how to fix this? I have tried this link or added include /etc/nginx/mime.types; to my nginx conf but it shows 404 error instead. Below is my nginx conf. I have even try to delete my browser cache but it didn't work too. Please help

upstream client {
  server client:3000;
}

upstream api {
  server api:8000;
}

server {
   listen 80;
   include  /etc/nginx/mime.types; ######Try added this but it shows 404 instead of the errors
location / {
   proxy_pass http://client;
 }

location /sockjs-node {
   proxy_pass http://client;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "Upgrade";
}

location ~ ^/(static/|js|css) {
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
proxy_pass http://client;
}
location ~ ^/(static/|pagedown|pagedown-extra|rest_framework|admin) {
   autoindex on;
   autoindex_exact_size off;
   autoindex_localtime on;
   proxy_pass http://api;
}

location ~ ^/api {
   # rewrite /api/(.*) /$1 break; # this is for chop off the /api/ urlpath
proxy_pass http://api;
 }

location ~ ^/admin {
# rewrite /api/(.*) /$1 break;
proxy_pass http://api;
}
}

<!DOCTYPE html>
<html lang="ja-jp" >
<head>
<title>サイト管理 | Django サイト管理</title>
<link rel="stylesheet" type="text/css" 
 href="/static/admin/css/base.css">
<link rel="stylesheet" type="text/css" 
href="/static/admin/css/dashboard.css">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" 
href="/static/admin/css/responsive.css">
<meta name="robots" content="NONE,NOARCHIVE">
</head>
<body class=" dashboard"
  data-admin-utc-offset="32400">

<!-- Container -->
<div id="container">


<!-- Header -->
<div id="header">
    <div id="branding">

 <h1 id="site-name"><a href="/admin/">Django 管理サイト</a></h1>

    </div>

Can you show me your index.html files header what you build? I want to know base.css link tag — lv0gun9, Mar 19 '19 at 04:15
i have edited the question adding the index.html which GET response — luvwinnie, Mar 19 '19 at 04:21

score 0 · Accepted Answer · answered Mar 19 '19 at 10:28

Update It seems like my nginx wrong which it tries to serve two same /static/ url path name, the prefix will always evaluated to the client's path. I changed my Django settings.py file's STATIC_URL to '/staticfiles/' and also the nginx config file. It works fine now. The latest config file is below, i hope it will helps someone.

/etc/nginx/conf.d/default.conf

upstream client {
  server client:3000;
}

upstream api {
  server api:8000;
}

server {
   listen 80;
   include  /etc/nginx/mime.types;
location / {
   proxy_pass http://client;
 }

location /sockjs-node {
   proxy_pass http://client;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "Upgrade";
}

location ~ ^/(static/|js|css) {
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
proxy_pass http://client;
}
location ~ ^/(staticfiles/|pagedown|pagedown-extra|rest_framework|admin) {
   autoindex on;
   autoindex_exact_size off;
   autoindex_localtime on;
   proxy_pass http://api;
}

location ~ ^/api {
   # rewrite /api/(.*) /$1 break; # this is for chop off the /api/ urlpath
proxy_pass http://api;
 }

location ~ ^/admin {
# rewrite /api/(.*) /$1 break;
proxy_pass http://api;
}

}

Django settings.py

STATIC_URL = '/staticfiles/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATICFILES_DIR = [
   os.path.join(BASE_DIR, 'static')
]

Django and React development in Docker and nginx, wrong MIME types errors

1 Answers1

/etc/nginx/conf.d/default.conf

}

Django settings.py