Nginx приводит к сбою статической сборки приложения React

Я пытаюсь обслуживать статическую сборку приложения ReactJS с помощью Nginx, но происходит что-то действительно странное: таблица стилей не применяется и изображение не загружается. В инструментах разработчика я вижу, что ресурсы есть (см. изображение ниже), просто они не применяются. Однако файл javascript запущен, иначе на экране не было бы никакого контента.

Nginx приводит к сбою статической сборки приложения React

Что делает это еще более странным, так это то, что я пытался обслуживать файлы в том же каталоге с помощью http-сервера Python (команда: python3 -m http.server 80), и все было в порядке; все активы загружены правильно.

Поскольку это похоже на проблему с nginx, вот моя конфигурация nginx:

nginx.conf

events {
    worker_connections 1024;
}

http {
    resolver 127.0.0.11;

    # Http redirect to https (unless it's a challenge)
    server {
        listen 80;
        listen [::]:80;

        server_name ambitx.io www.ambitx.io wc.ambitx.io rk.ambitx.io;
        server_tokens off;

        include letsencrypt.conf;

        location / {
            return 301 https://$server_name$request_uri;
        }
    }

    # React frontend
    server {
        listen 443 default_server ssl http2;
        listen [::]:443 ssl http2;

        server_name ambitx.io www.ambitx.io;
        
        include ssl.conf;
        include letsencrypt.conf;
        
        location / {
            root /var/www/staticfiles;
            index  index.html index.htm;
            try_files $uri /index.html =404;
        }
    }

    # Websocket backend
    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        
        server_name wc.ambitx.io;

        include ssl.conf;
        include letsencrypt.conf;

        location / {
            proxy_pass "http://wsserver:8080";
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }
    }

    # Rocket backend
    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;

        server_name rk.ambitx.io;

        include ssl.conf;
        include letsencrypt.conf;

        location / {
            proxy_pass "http://rocketserver:80";
        }
    }
}

letsencrypt.conf

location /.well-known/acme-challenge/ {
    root /var/www/certbot;
}

ssl.conf

ssl_certificate /etc/letsencrypt/live/ambitx.io/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/ambitx.io/privkey.pem;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # don't use SSLv3. Ref: POODLE
ssl_prefer_server_ciphers on;

Заранее спасибо за помощь.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
12
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я разобрался: оказывается, на сервере Nginx отсутствовали его типы MIME (браузер думал, что файл css был text/plain вместо text/css).

Обычно лучше всего добавлять файлы в /etc/nginx/conf.d/ (и монтировать туда свой том докера) вместо того, чтобы редактировать напрямую nginx.conf, но я хотел иметь возможность помещать другие файлы в каталог /etc/nginx/, поэтому я решил смонтировать туда свой том докера.

Как оказалось, это плохая идея. Я перезаписал множество других важных файлов конфигурации внутри контейнера докеров. Теперь я мог бы просто скопировать все эти файлы в свой том докера и назвать его хорошим, но я решил, что стоит сделать это «правильным» способом, чтобы не напортачить в будущем.

Итак, теперь у меня есть том докера, смонтированный в /etc/nginx/cond.f/, и другой том, смонтированный в /etc/nginx/библиотека/, чтобы я мог импортировать файлы без основного чтения nginx.conf в качестве конфигурации сервера.

Другие вопросы по теме