Nginx 不加载 css 文件（Django）答案

【问题标题】：Nginx does not load css files (Django)Nginx 不加载 css 文件（Django）
【发布时间】：2019-01-16 21:23:23
【问题描述】：

我在 Django 中创建了一个新项目。在我的本地计算机上，一切正常，所以我试图将其公开。我使用DigitalOcean 作为主机。我找到了 2 个在 DigitalOcean VPS 上发布 Django 项目的教程。一种用于安全，一种用于发布。

Django 安全教程：Link

Django项目发布：Link

在我遵循教程之后，除了一件事之外，一切都很好。除了静态 css 文件之外，所有文件（图像、JS）都正确加载，这真的很奇怪。我认为这是一个 Nginx 问题。我是 Nginx 的新手，所以我不知道该怎么做。我尝试了几个 Stackoverflow Questions 并搜索了很多这个问题，但我不知道该怎么做。 css 文件位于名为 static 的文件夹的子文件夹中。 Image of the static files structure

静态文件settings.py：

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

Nginx：

server {
    listen 80;
    server_name 142.93.100.9;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
       root /home/djangodeploy/bhitweb2;
    }

    location /media/  {
       root /home/djangodeploy/bhitweb2;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/home/djangodeploy/bhitweb2/bhitweb2.sock;
    }
}

CSS 文件网址：142.93.100.9/static/css/form.css

CSS 错误：

<html>
<head><title>404 Not Found</title></head>
<body bgcolor="white">
<center><h1>404 Not Found</h1></center>
<hr><center>nginx/1.10.3 (Ubuntu)</center>
</body>
</html>

HTML 模板链接到样式表：

{% load static %}
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/main.css' %}/" />

有人知道解决办法吗？

【问题讨论】：

您最终得到Not Found 错误？你确定 js 文件是从 Nginx 正确加载的吗？它可以从您的浏览器缓存中加载。
@TonyEight 是的，当我尝试访问 HTML 中的 css 文件链接时出现 404 错误。 Javascript 文件已正确加载。我还以为是浏览器缓存的问题，所以我清除了缓存，但这也不起作用。
您能提供一个未找到的 CSS 文件的 URL 示例吗？以及模板代码的 sn-p 以查看如何插入它们。
@TonyEight 当然。我将它们添加到我的问题中。
如果 javascript 文件运行良好，并且与 css '/static/' 位于同一目录中，那么问题不应该是您的配置，而是您的文件夹结构中的某些内容或缺少文件。跨度>

标签： css django nginx web-deployment

【解决方案1】：

当我查看your static files structure 时，它看起来是空的。所以，回到settings.py 中的静态定义，我看到STATICFILES_DIR = '/home/djangodeploy/bhitweb2/static'。

据我所知，正确的设置名称是STATICFILES_DIRS，它不是string，而是像这样的可迭代对象：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    '/var/www/static/',
]

您可以在文档 here 和 here 中找到它。

我猜当你调用python manage.py collectstatic 时，静态管理文件是唯一获取的。

您设置的方式似乎将STATIC_ROOT（collectstatic 存储您的静态文件的位置，也是您应该通过 Nginx 提供服务的路径）与STATICFILES_DIRS（应该是collectstatic 的位置）混淆了获取您的附加 - 如文档中所述 - 静态文件）。

您应该尝试将编码的静态文件放在您的应用文件夹内的static 文件夹中。然后，去掉STATICFILES_DIRS 声明，让Django 在你调用collectstatic 时自动找到你的静态文件（Django 通过STATICFILES_FINDER - see the docs 来完成）。

更新

你的 Nginx 配置出了点问题。位置/static/ 和/media/ 都指向同一个目录。

尝试也像这样改变它：

location /static/ {
   alias /home/djangodeploy/bhitweb2/static;
}

location /media/  {
   alias /home/djangodeploy/bhitweb2/media;
}

然后重启 Nginx。再次运行collecstatic。

【讨论】：

我已经试过了。我将 STATICFILES_DIRS 放在 settings.py 中，因为我在网上找到了一个教程，我认为这可能会奏效。所有 ststic 文件（图像、js、css）都已经在正确的文件夹中。当我使用 collectstatic 时，STATICFILES_DIRS 行不在 settings.py 中。但是我还是删除了这条线。
我试过这个，但现在没有加载任何文件（媒体和静态文件）。我现在只有功能和 HTML。我完全按照你说的做了。我应该再次更改我的 Nginx 设置吗？
由于输入错误（alias 与 root 指令），我编辑了我的回复......无论如何......还有一些事情需要检查：首先，确保 Nginx 有权访问那些目录（www-data 是 Nginx 默认用户）。然后，确保在使用sudo service nginx restart 编辑配置文件后重新启动了 Nginx。
我试过你说的，但是当我改变这些东西时，所有文件都没有再次加载（没有图像，没有 JS，没有 CSS）。
你能检查你的 Nginx 日志吗？ sudo tail -30 /var/log/nginx/error.log

【解决方案2】：

我怀疑你有另一个 server 正在运行（可能是 default nginx 虚拟主机）。当您设置listen 80; 时，我猜这两个虚拟主机定义都指向port 80。

您的应用 HTTP 请求（尤其是那些为您的 静态文件 发出的请求）最终会由这个 default 虚拟主机处理。这个 nginx 的 default 虚拟主机将其 ROOT_DIRECTORY 设置为 /usr/share/nginx/html/。

这就是你出现这种错误的原因：

2018/08/10 14:51:41 [error] 27178#27178: *3 open() "/usr/share/nginx/html/static/css/form.css" failed (2: No such file or directory), client: 212.95.7.8, server: 142.93.100.9, request: "GET /static/css/form.css HTTP/1.1"

解决方案 1

您只需禁用此默认虚拟主机。在/etc/nginx/sites-enabled/ 中查找所有启用的sites。

sudo rm /etc/nginx/sites-enabled/default
sudo service nginx restart

解决方案 2

添加一个servername 指令（带有您要用于您的Django 项目的FQDN），以便nginx 可以将您的应用HTTP 请求 与真正应该去的那些分开到默认虚拟主机。

【讨论】：

如何禁用默认服务器？我去了目录，在这个文件夹中找到了 2 个快捷方式。我的项目名称和您所说的默认服务器。我是否应该删除此默认快捷方式以禁用默认服务器？
您可以通过删除/etc/nginx/sites-enabled/ 中的文件来禁用此默认 site。不用担心，这是安全的，因为此文件只是指向/etc/nginx/sites-available/default 的符号链接。您只需拨打sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/ 即可重新激活它。在这两种情况下，不要忘记重新启动 nginx。
很遗憾，这也不起作用。我想我可能应该更改主机并尝试将其部署在那里。
你能说得更具体些吗？你有同样的错误吗？你在 nginx 错误日志中发现了什么？