如何使用 React 前端将 favicon 添加到 django 应用程序

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

我正在使用 Django 2.10.0。

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

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

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

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

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

在设置.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">

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

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

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

看起来有两个问题：

1. 如何让构建过程将网站图标和相关文件复制到资产文件夹中，以便可以提供它们

2. 如何让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'),
]

索引.html

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

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

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

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

“assets”是服务器上包含我的构建文件的文件夹的名称。图标位于 asset 中，index.html 也是如此，React 文件位于 asset/static 中。

编辑：这是我的 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 构建的所有文件。我不知道为什么在同一文件夹中找不到图标！

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

特别是对于 favicon，您可以在 nginx 中为此设置一个位置：

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