问如何使用React前端向django应用程序添加favicon

EN

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

我使用的是Django 2.10.0。

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

然而，我不知道如何让服务器提供这些图标。如果我把它们放在前端/公共文件夹中，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">

这是不起作用的-文件不会被提供。我不确定为什么这不起作用，因为我已经在settings.py的STATICFILES_DIRS中添加了'assets‘，并将收藏夹复制到了'assets’的根目录中。

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

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

看起来有两个问题：

1)如何让构建过程将favicon和相关文件复制到assets文件夹中，以便可以提供这些文件

2)如何让index.html在正确的位置查找收藏夹图标

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

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

编辑:我现在已经得到了在本地机器上运行的构建版本中显示的favicon，但它不是由生产服务器提供的。

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文件位于服务器上的assets文件夹中。Settings.py也是一样的。我不明白为什么生产服务器不提供favicon？

编辑:我试着将这个添加到我的settings.py中，但仍然不起作用：

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

‘files’是服务器上包含我的构建文件的文件夹的名称。图标在assets中，就像index.html一样，React文件在assets/static中。

编辑:这是我的Nginx乘客配置文件：

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构建的文件。我不知道为什么它在同一个文件夹里找不到这个图标！

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

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

STATIC_ROOT似乎不是必需的，我也没有运行buildstatic。

My favicons位于frontend/public中，与index.html相同的文件夹。Webpack构建过程会将它们全部复制到assets文件夹中。

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上看到这个图标

祝你跳舞快乐！