Docker + Django + Vue + Nginx configuration not reading CSS or JS files (Ioading wrong MIME type)

Question

I have been working on a project that uses Django REST Framework for an API with an embedded Vue frontend. The Vue frontend is located within the Django project folder and uses Django templates for authentication.

I have been trying to get this project working with Docker using Nginx as the server. I have it mostly working but have been struggling with getting the media and static folders to work properly. In my most recent version, Nginx is able to find them but the browser is giving a warning that they are being read as text/html and have the incorrect MIME type.

I already have "include /etc/nginx/mime.types" included in my Nginx conf file, attempted to add a location function for css and js but nothing seems to work.

My docker-compose file looks like this:

version: '3'

services:
  backend:
    build:
      context: ./django
    command: >
        sh -c "python3 manage.py wait_for_database &&
            python3 manage.py collectstatic --no-input &&
            python3 manage.py makemigrations &&
            python3 manage.py migrate --no-input &&
            gunicorn django.wsgi -b 0.0.0.0:8000"
    networks:
      - django-nginx
    volumes:
      - ./django:/app
      - django-static:/django/static
      - django-media:/django/media
    environment:
      - DB_HOST=db
      - DB_NAME=keeptrackdb
      - DB_USER=postgres
      - DB_PASS=postgres
    depends_on:
      - db

  db:
    image: postgres:10-alpine
    environment:
      - "POSTGRES_HOST_AUTH_METHOD=trust"
      - POSTGRES_DB=djangodb
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
    ports:
      - "5432"
    networks:
      - django-nginx

  nginx:
    build:
      context: .
      dockerfile: nginx/Dockerfile
    ports:
      - 80:80
    networks:
      - django-nginx
    volumes:
      - ./nginx/prod.conf:/etc/nginx/nginx.conf:ro
      - django-static:/app/static
      - django-media:/app/media
    depends_on:
      - backend
      - db

volumes:
  django-static:
  django-media:

networks:
  django-nginx:
    driver: bridge

And my Nginx conf file looks like this:

user  nginx;
worker_processes  1;

events {
  worker_connections  1024;
}

http {
  include /etc/nginx/mime.types;
  client_max_body_size 100m;

  upstream backend {
    server backend:8000;
  }

  server {
    listen 80;
    charset utf-8;

    root /dist/;
    index index.html;

    # backend urls
    location ~ ^/(admin|api|accounts|media) {
      proxy_redirect off;
      proxy_pass http://backend;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
    }

    location /media/ {
      autoindex on;
      alias app/media;
    }

    location /static/ {
      autoindex on;
      alias app/static;
    }

    # frontend
    location / {
      try_files $uri $uri/ @rewrites;
    }

    location @rewrites {
      rewrite ^(.+)$ /index.html last;
    }
  }
}

Answer 1

等待大神解答