Question

我正在构建一个带有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；我找不到任何能解释如何将它们绑在一起作为收藏夹图标的东西。

在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中添加了“资产”，并将图标集复制到了“资产”的根中。

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

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

似乎有两个问题：

1）如何获得将Favicon和相关文件复制到资产文件夹以便可以使用的构建过程

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" />

favicon.ico位于“资产”文件夹中。构建我的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也是如此，React文件位于资产/静态文件中。

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

编辑：感谢苏妮·凯尔格（SuneKjærgård）的帮助，我终于解决了这个问题。通过阅读有关部署的Django文档，我认为我需要在settings.py中配置所有静态文件位置。但是，即使使用生产设置运行，这似乎也仅适用于Django开发服务器。在生产服务器上，我通过“乘客”使用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 1

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

特定于图标，您可以为此在nginx中设置位置：

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

如何使用React前端将favicon添加到Django应用

1 个答案: