Início / unix / Perguntas / 793410
Accepted
Vee
Asked: 2025-04-07 10:24:19 +0800 CST

Não é possível acessar arquivos estáticos para subdomínio no nginx

  • 772

Tenho um site estático e um backend de aplicativo Django em execução usando gunicorn na porta 8000 em um servidor.

Estou coletando arquivos CSS para o site estático em /mywebsite-deployment/staticDir/homepage/css/static_website.css, e o CSS para os modelos Django em /mywebsite-deployment/staticDir/dashboard/css/dashboard.css;

Consigo acessar o site estático usando mywebsite.com e www.mywebsite.com com CSS, e o backend do Django usando app.mywebsite.com, mas seu CSS não carrega.

O modelo no qual estou tentando acessá-lo se parece com isso:

{% load static %}

<html>

<head>
    <link href={% static '/dashboard/css/dashboard.css' %} rel="stylesheet" type="text/css" media="all" />
</head>

Meu aplicativo Django settings.py se parece com isso:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'staticFiles'),
]

STATIC_ROOT = '/mywebsite-deployment/staticDir/'

STATIC_URL = 'static/'

Esta é minha configuração nginx:

    ssl_certificate         /etc/letsencrypt/live/mywebsite.co/fullchain.pem;    # managed by Certbot
    ssl_certificate_key     /etc/letsencrypt/live/mywebsite.co/privkey.pem;      # managed by Certbot
    
    root            /mywebsite-deployment/staticDir/;
    index           /homepage/index.html;
    error_page 404 500 502 503 504  /error.html;
    proxy_intercept_errors on;      # If proxy errors, let nginx process it
    
    # error_log /var/log/nginx/error.log info;
    
    server {
        # If host isn't a mywebsite host, close the connection to prevent host spoofing
        server_name _;
        listen 80 default_server;
        listen 443 ssl default_server;
    
        return 444;
    }
    
    # Redirect HTTP requests to HTTPS
    server {
        server_name mywebsite.co www.mywebsite.co app.mywebsite.co;
        listen 80;
        return 301  https://$host$uri;  # managed by Certbot
    }
    
    # Handle HTTPS static webserver requests
    server {
        server_name mywebsite.co www.mywebsite.co;
        listen 443  ssl;    # managed by Certbot
    }
    
    # Proxy HTTPS app requests to backend gunicorn service
    server {
        server_name     app.mywebsite.co;
        listen 443  ssl;    # managed by Certbot
    
        location / {    # Catch all - Match everything else not matched in any above location blocks within this server block
            proxy_redirect off;    # Stop redirects from proxy
    
            proxy_connect_timeout 3;    # Abort if service is unreachable
            proxy_read_timeout 3;       # Abort if the service is unresponsive
    
            include     proxy_params;
            proxy_pass  http://localhost:8000;
        }
    
        # If Gunicorn Django proxy app throws an error (like 404), nginx will handle it and show custom error page
        location /error.html {
            internal;
        }
    }

Quando inspeciono o modelo HTML no navegador, vejo que a URL que ele está tentando carregar é: https://app.mywebsite.co/static/dashboard/css/dashboard.css , mas não carrega.

Posso acessar o CSS da página inicial como: https://www.mywebsite.co/homepage/css/static_website.css e o CSS do painel como: https://www.mywebsite.co/dashboard/css/dashboard.css

Como posso usar o caminho correto para visualizar o CSS no painel? Acho que isso é um problema de configuração do nginx, mas sou novo no nginx e não sei como resolver. Por favor, me ajudem.

nginx

1 respostas

  1. Best Answer

    Como podemos acessar o CSS da página inicial como: https://www.mywebsite.co/homepage/css/static_website.csse o CSS do painel como: https://www.mywebsite.co/dashboard/css/dashboard.css.

    Acho que os arquivos CSS são armazenados lá /mywebsite-deployment/staticDir/porque a diretiva nginx rootestá definida como /mywebsite-deployment/staticDir/.

    A solução simples pode ser adicionar um locationbloco específico /static/dentro do bloco do servidor

    # Serve static files
location /static/ {
    alias /mywebsite-deployment/staticDir;
}

    Então o serverbloco se torna

        # Proxy HTTPS app requests to backend gunicorn service
    server {
        server_name     app.mywebsite.co;
        listen 443  ssl;    # managed by Certbot
        
        # Serve static files
        location /static/ {
            alias /mywebsite-deployment/staticDir/;
        }

        location / {    # Catch all - Match everything else not matched in any above location blocks within this server block
            proxy_redirect off;    # Stop redirects from proxy
    
            proxy_connect_timeout 3;    # Abort if service is unreachable
            proxy_read_timeout 3;       # Abort if the service is unresponsive
    
            include     proxy_params;
            proxy_pass  http://localhost:8000;
        }
    
        # If Gunicorn Django proxy app throws an error (like 404), nginx will handle it and show custom error page
        location /error.html {
            internal;
        }
    }

    Um dos principais benefícios dessa configuração é que o Nginx manipula arquivos estáticos diretamente, eliminando a necessidade de rotear essas solicitações pelo servidor de back-end.

    • 0

relate perguntas