已构建的 React 项目的 NGINX 配置

Question

我的管理面板部署有问题，CSS 样式在页面加载时不起作用。

我通过 npm run build 进行了 React 构建并将其标记到服务器，index.html 打开正常，问题仅出在 css 中。

我的 nginx 配置文件 `事件{ }

http {

proxy_headers_hash_max_size 1024;
proxy_headers_hash_bucket_size 128;

server {
    listen 80;
    server_name example.com www.example.com admin.example.com api.example.com;

    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name example.com www.example.com;

    root /var/www/client; 
    
    ssl_certificate /etc/nginx/ssl/example.chained.crt;
    ssl_certificate_key /etc/nginx/ssl/example-ssl.key;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

server {
    listen 443 ssl;
    server_name admin.example.com;

    root /var/www/admin/build; 

    ssl_certificate /etc/letsencrypt/live/admin.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/admin.example.com/privkey.pem;


    location / {
        try_files $uri $uri/ /index.html;
    }

    location /static/ {
        root /var/www/admin/build/;
        autoindex off;
    }
}

upstream api_backend {
    server 127.0.0.1:3000; 
}

server {
    listen 443 ssl;
    server_name api.example.com;

    ssl_certificate /etc/letsencrypt/live/api.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/api.example.com/privkey.pem;

    location /socket.io {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_pass http://api_backend;
    }

   
    location / {
        proxy_pass http://api_backend; 
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Ssl on;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
        proxy_read_timeout 60s;
        proxy_http_version 1.1;
        proxy_cookie_path / "/; HTTPOnly; Secure";
    }
}

} `

可能是什么问题？

1。如果我将管理面板放在 Node.js 服务器上的公共文件夹中，则一切正常，CSS 样式也可以正常工作。
2。如果我进入 https://admin.example.com/ devtouls 源并在页面加载后更改任何样式，一切都会变得正常。

Answer 1

通过向 nginx 添加 mime 类型解决了这个问题

http {

    proxy_headers_hash_max_size 1024;
    proxy_headers_hash_bucket_size 128;

    include /etc/nginx/mime.types; 
    ...
}

mime.类型

types {
    text/html    html htm shtml;
    text/css     css;
    text/xml     xml;
    image/gif    gif;
    image/jpeg   jpeg jpg;
    application/javascript js;
    application/json json;
    application/pdf pdf;
    application/xml xml;
    image/png    png;
    image/svg+xml svg;
    video/mp4    mp4;
}