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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (325)

我正在构建一个带有React前端的Django应用程序,使用react-create-app构建。我不能让favicon出现在制作中。

我正在使用Django 2.10.0。

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

但是,我不知道如何让服务器提供favicon。如果我将它们放在前端/公共文件夹中,Django服务器找不到它们。

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

将favicon复制到项目根目录不起作用。它们与index.html位于相同的文件夹中,但是Django服务器不会为这些共存的图像文件提供服务。

我能找到的唯一文档涉及Django或create-react-app; 我找不到任何可以解释如何将它们绑在一起用于favicons的东西。

在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中将'assets'添加到STATICFILES_DIRS并将favicons复制到'assets'的根目录中。

所有工作的CSS和图像链接都包含静态文件夹,例如:

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

好像有两个问题:

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

2)如何让index.html在favicon的正确位置查找

如果我可以自定义PUBLIC_URL指向静态/可能会这样做,但是这可能会破坏引用它的其他代码?

我确信我错过了一些简单的事情。我会感激任何帮助!

编辑:我现在已经在我的本地计算机上运行的内置版本中显示了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显示我的favicon。但在将其部署到服务器后,网址https://example.com/static/favicon.ico什么都没找到。我已检查并且favicon.ico文件存在于服务器上的assets文件夹中。Settings.py是一样的。我无法弄清楚为什么生产服务器没有提供图标?

编辑:我已经尝试将此添加到我的settings.py,但它仍然无法正常工作:

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

'assets'是服务器上包含我的构建文件的文件夹的名称。favicon是资产,index.html和资产/静态中的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!

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

这是我的工作代码。在生产服务器上提供favicon,在单独运行前端时在端口3000上进行开发。在端口8000上本地测试构建时,我没有得到它们,但我可以忍受它,并可能在以后找到解决方案。

似乎不需要STATIC_ROOT,也不运行buildstatic。

我的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的浏览器中看到该图标

提问于
用户回答回答于

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

特别是对于favicon,你可以在nginx中设置一个位置:

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

扫码关注云+社区

领取腾讯云代金券