如何使用Reaction前端向Django应用程序添加收藏图标 [英] How to add favicon to django app with React front end

问题描述

我正在构建一个Django应用程序，它使用Reaction-Create-app构建，具有Reaction前端。我无法在制作中显示收藏夹图标。

我正在使用Django 2.10.0。

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

然而，我不知道如何让服务器提供这些图标。如果我将它们放在前端/公共文件夹中，Django服务器找不到它们。

如果我手动将它们复制到静态/文件夹中，它们会显示出来，但该文件夹由webpack管理，在构建应用程序时会删除其中的内容。

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

我能找到的唯一文档是Django或Create-Reaction-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. 如何让构建过程将收藏夹图标和相关文件复制到Assets文件夹中，以便可以提供这些文件

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'),
]

index.html

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

而Favic.ico位于‘Assets’文件夹中。在构建我的React应用程序并在本地运行开发服务器之后，URL http://localhost:8000/static/favicon.ico会显示我的收藏图标。但在将其部署到服务器后，urlhttps://example.com/static/favicon.ico什么也找不到。我已经检查过了，服务器上的Assets文件夹中存在Favic.ico文件。Py也是一样的。我搞不懂为什么生产服务器不提供收藏夹图标？

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

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

‘Assets’是服务器上包含构建文件的文件夹的名称。与index.html一样，收藏夹图标位于Assets中，而Reaction文件位于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和所有反应生成的文件。我不知道为什么它在同一文件夹中找不到收藏夹图标！

推荐答案

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

具体来说，您可以在nginx中为该图标设置一个位置：

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

这篇关于如何使用Reaction前端向Django应用程序添加收藏图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！