taxicab33
@taxicab33
Python разработчик | Django

NGINX отдаёт статику приложений, но css стили не применяются, что делать?

Статические файлы приходят и их можно просмотреть, но css стили не применяются
React-приложение:
SMSM-mDcbPDrQd4bLb4BBMIjcYURXoDxxPyGW3EiDkyNYCF0g3w3AFjVlWUSWorLAsiVUh2iepHxx_O_K4Lu-__N.jpg?size=1913x586&quality=96&type=album
YFeFjTZ_HyDhnYHU1xOutjApXWvO8mvqxUfNB4d0O3TYOUnJjZqmXusMuFloLHYgAGXOh8pWWC8aJ7f2MyzMfEDw.jpg?size=816x554&quality=96&type=album
Админ-панель django
RSodJWlzh-NDgXM18WL0Ft8RbWGUCgskzK3yKirxkfx3oP9bKfxf-Hieoxqc6tyUex-0YmV6JIn11rSE0JQ4V7BJ.jpg?size=1696x1009&quality=96&type=album
oT_kdFyikxQhmYf_hoYrtZJgr6he73irduZePYvOzYeeQSmmAUN-mQPwCXj4T5PhhR3RL8pqxqX45qsY9w9ng2cN.jpg?size=512x497&quality=96&type=album
Терминал:
uA09DF3thUrc9Okm3l_d4rrsxXa_jsEhO_sMZM_ZcLoy19Pgs6TXUy09Z7rte_-NEgNAG5urrlTND8Rz15BpAhjF.jpg?size=1909x611&quality=96&type=album
NGINX
events {}
http {

    upstream api {
        server django:8000;
    }

    upstream front {
        server react:3000;
    }

    server {

        listen 80;

        ###########
        # STATIC FOLDER ROUTING #
        ###########

        location /static/django/ {
            alias /django/static/;
        }

        location /media/django/ {
            alias /django/media/;
        }

        location /static/ {
            root /var/www/static/react;
        }

        ###########
        # WS URL ROUTING #
        ###########

        location /ws/ {
            proxy_pass http://daphne;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_read_timeout 86400;
        }

        ###########
        # URL ROUTING #
        ###########

        location /api/ {
            proxy_pass http://api;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $host;
            proxy_redirect off;
        }


        location / {
            proxy_pass http://front;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $host;
            proxy_redirect off;
        }

    }
}

docker-compose.yaml
version: "3.3"

services:
  redis:
    image: redis
    restart: always
    env_file:
      - .env

  servis_db:
    restart: on-failure
    image: postgres
    container_name: servis_db
    volumes:
      - pg_data:/var/lib/postgresql/data/
    env_file:
      - .env

  django:
    restart: on-failure
    build: app
    command: sh -c "python manage.py makemigrations
                    && python manage.py migrate
                    && python manage.py add_admin
                    && python manage.py create_trajectories
                    && python manage.py collectstatic --noinput
                    && gunicorn app.wsgi:application --bind 0.0.0.0:8000"
    volumes:
      - django_static:/django/static
      - django_media:/django/media
    ports:
      - "8000:8000"
    depends_on:
      - servis_db
    env_file:
      - .env

  celery:
    restart: on-failure
    build: app
    command: sh -c "celery -A app worker -l INFO"
    depends_on:
      - redis
    env_file:
      - .env

  daphne:
    restart: on-failure
    build: app
    command: daphne -b 0.0.0.0 -p 8081 app.asgi:application
    ports:
      - "8081:8081"
    depends_on:
      - redis
    links:
      - redis

  react:
    build:
      context: trajectory-frontend
      dockerfile: Dockerfile
    volumes:
      - react_build:/react/build
    ports:
      - "3000:3000"
    env_file:
      - .env
    depends_on:
      - django
    command: serve -s build

  nginx:
    restart: always
    build: nginx
    volumes:
      - react_build:/var/www/static/react
      - django_static:/django/static
      - django_media:/django/media
    ports:
      - "80:80"
    depends_on:
      - django
      - daphne
      - react

volumes:
  django_static:
  django_media:
  react_build:
  pg_data:
  • Вопрос задан
  • 772 просмотра
Решения вопроса 1
Lynn
@Lynn
nginx, js, css
У вас не настроен соответствие типов файлов и заголовков Content-Type поэтому все файлы отдаются с Content-Type: text/plain, а браузер ожидает для CSS-файлов Content-Type: text/css.

В стандартной поставке nginx уже есть нужный файл, так достаточно его просто подключить:

http {
    #...
    include /etc/nginx/mime.types;
    #...
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы