Я пытаюсь обслуживать статическую сборку приложения ReactJS с помощью Nginx, но происходит что-то действительно странное: таблица стилей не применяется и изображение не загружается. В инструментах разработчика я вижу, что ресурсы есть (см. изображение ниже), просто они не применяются. Однако файл javascript запущен, иначе на экране не было бы никакого контента.
Что делает это еще более странным, так это то, что я пытался обслуживать файлы в том же каталоге с помощью 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;
Заранее спасибо за помощь.
Я разобрался: оказывается, на сервере Nginx отсутствовали его типы MIME (браузер думал, что файл css был text/plain
вместо text/css
).
Обычно лучше всего добавлять файлы в /etc/nginx/conf.d/ (и монтировать туда свой том докера) вместо того, чтобы редактировать напрямую nginx.conf, но я хотел иметь возможность помещать другие файлы в каталог /etc/nginx/, поэтому я решил смонтировать туда свой том докера.
Как оказалось, это плохая идея. Я перезаписал множество других важных файлов конфигурации внутри контейнера докеров. Теперь я мог бы просто скопировать все эти файлы в свой том докера и назвать его хорошим, но я решил, что стоит сделать это «правильным» способом, чтобы не напортачить в будущем.
Итак, теперь у меня есть том докера, смонтированный в /etc/nginx/cond.f/, и другой том, смонтированный в /etc/nginx/библиотека/, чтобы я мог импортировать файлы без основного чтения nginx.conf в качестве конфигурации сервера.