我正在构建一个带有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上看到这个图标
祝你跳舞快乐!
发布于 2019-02-28 04:25:28
在生产环境中,您通常使用nginx或您的wsgi服务器前面的任何服务器来提供静态文件。
具体来说,您可以在nginx中为此设置一个位置:
location = /favicon.ico {
alias /var/www/mysite/img/favicon.ico;
}
https://stackoverflow.com/questions/54865159
复制相似问题