如何使用 React 前端将网站图标添加到 django 应用程序

Question

我正在构建一个带有 React 前端的 Django 应用程序，使用 react-create-app 构建。我无法让网站图标出现在生产环境中。

我正在使用 Django 2.10.0。

当我构建 React 应用程序时，构建输出文件放在 assets/static/ 文件夹中。这包括通过 css 用作背景的图像文件，并且一切正常。这些包含在构建中，因为它们在样式表中被引用。该图标是从 index.html 引用的，因此不会被构建过程拾取。

但是我不知道如何让服务器提供网站图标。如果我将它们放在 frontend/public 文件夹中，Django 服务器找不到它们。

如果我手动将它们复制到 static/ 文件夹中，它们会显示，但该文件夹由 Webpack 管理，并且在构建应用程序时删除内容。

将网站图标复制到项目根目录不起作用。它们与提供的 index.html 位于同一文件夹中，但 Django 服务器不会提供那些位于同一位置的图像文件。

我能找到的唯一文档涉及 Django 或 create-react-app；我找不到任何内容来解释如何将它们绑定在一起以获取网站图标。

在settings.py中：

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'assets/static'),
    os.path.join(BASE_DIR, 'assets'),
]

在index.html中：

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

在浏览器中，这将转换为：

<link rel="shortcut icon" href="/favicon.ico">

这不起作用 - 文件未提供。我不确定为什么这不起作用，因为我已经将 'assets' 添加到 settings.py 中的 STATICFILES_DIRS 并将图标复制到 'assets' 的根目录中。

所有工作 css 和图像链接都包含静态文件夹，例如：

http://localhost:8000/static/media/private.d7365d01.svg

好像有两个问题：

如何获取构建过程以将网站图标和相关文件复制到资产文件夹中以便可以提供它们
如何index.html在正确的位置查找网站图标

如果我可以自定义 PUBLIC_URL 以指向 static/ 可能会这样做，但这可能会破坏引用它的其他代码位？

我确信我遗漏了一些简单的东西。如果有任何帮助，我将不胜感激！

编辑：我现在已经在本地计算机上的构建版本运行中显示了图标，但生产服务器未提供该图标。

Base.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'assets/static'),
    os.path.join(BASE_DIR, 'assets'),
]

index.html

<link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon.ico" />

并且 favicon.ico 在 'assets' 文件夹中。在本地构建我的 React 应用程序和运行开发服务器后，url http://localhost:8000/static/favicon.ico 显示我的图标。但是将其部署到服务器后，url https://example.com/static/favicon.ico 什么也找不到。我已经检查过 favicon.ico 文件存在于服务器上的资产文件夹中。 Settings.py也是一样。我不明白为什么生产服务器不提供网站图标？

编辑：我试过将它添加到我的 settings.py，但它仍然不起作用：

STATIC_ROOT = os.path.join(BASE_DIR, 'assets')

'assets' 是服务器上包含我的构建文件的文件夹的名称。网站图标在资产中，index.html 和 assets/static 中的 React 文件也是如此。

编辑：这是我的 Nginx Passenger 配置文件：

server {
    listen 80;
    server_name 178.62.85.245;

    passenger_python /var/www/myappname/venv36/bin/python3.6;

    # Tell Nginx where your app's 'public' directory is
    root /var/www/myappname/myappname/myappname;

    # Turn on Passenger
    passenger_enabled on;


   # Tell Nginx the location of the build output files
    location /static/ {
       autoindex on;
       alias /var/www/myappname/myappname/assets/;
    }
}

Nginx 找到文件 index.html 和 React 构建的所有文件。不知道为什么在同一个文件夹下找不到favicon！

Answer 1

在生产环境中，您通常使用 nginx 或 wsgi 服务器前面的任何服务器来提供静态文件。

专门针对网站图标，您可以为此在 nginx 中设置一个位置：

location = /favicon.ico {
    alias /var/www/mysite/img/favicon.ico;
}

Answer 2

根据@Little_Brain

编辑：感谢 Sune Kjærgård 的帮助，我终于解决了这个问题。通过阅读有关部署的 Django 文档，我认为我需要在 settings.py 中配置所有静态文件位置。然而，这似乎只适用于 Django 开发服务器，即使在运行生产设置时也是如此。在生产服务器上，我通过 Passenger 使用 Nginx 来为应用程序提供服务。 Nginx 需要知道我所有静态文件的位置。 'root'和'location'都需要设置正确。

这是我的工作代码。网站图标在生产服务器上提供，并在运行前端单独开发时在端口 3000 上提供。在端口 8000 上本地测试构建时，我没有得到它们的服务，但我可以接受，也许以后会找到解决方案。

STATIC_ROOT好像不需要，我也不是运行buildstatic.

我的网站图标位于 frontend/public，与 index.html 相同的文件夹。 Webpack 构建过程将它们全部复制到资产文件夹中。

server {
    listen 80;
    server_name 178.62.85.245;

    passenger_python /var/www/myappname/venv36/bin/python3.6;

    # Tell Nginx where your app's 'public' directory is
    root /var/www/myappname/myappname/assets;

    # Turn on Passenger
    passenger_enabled on;


   # Tell Nginx the location of the build output files
    location /static/ {
       autoindex on;
       alias /var/www/myappname/myappname/assets/;
    }
}

在settings.py中：

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'assets/static'),
    os.path.join(BASE_DIR, 'assets'),
]

在index.html中：

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

在浏览器中，这将转换为：

<link rel="shortcut icon" href="/favicon.ico">

而且我可以在地址 https://example.com/favicon.ico

的浏览器中看到该图标

跳舞快乐！

Answer 3

如果您正在阅读这个问题，则表示上述解决方案对您不起作用。我为解决这个问题所做的是：

<link rel="shortcut icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />

在 public/index 中给图标 link 一个 ID。html

然后在app.js-

中添加这个useEffect hook

import icon from './images/favicon.ico';

useEffect(() => {
    const favicon = document.getElementById('favicon');
    favicon.setAttribute('href', icon);
}, []);

答案来自- here

如何使用 React 前端将网站图标添加到 django 应用程序

How to add favicon to django app with React front end

django

favicon

create-react-app