Я создаю приложение Django с React-интерфейсом, созданным с использованиемact-create-app.Мне не удается отобразить значок в рабочем состоянии.
Я использую Django 2.10.0.
Когда я собираю приложение React, выходные файлы сборки помещаются в ресурсы/ static / папка.Это включает в себя файлы изображений, используемые в качестве фона через CSS, и все работает отлично.Они включены в сборку, потому что на них есть ссылки в таблицах стилей.Ссылка на favicon есть из index.html, и поэтому не собирается процессом сборки.
Однако я не знаю, как заставить сервер обслуживать favicons.Если я помещаю их в папку frontend / public, сервер Django их не находит.
Если я вручную копирую их в папку static /, они отображаются, но эта папка управляется Webpack и содержимымудаляются при сборке приложения.
Копирование значков в корень проекта не работает.Они находятся в той же папке, что и index.html, который обслуживается, но сервер Django не будет обслуживать эти совместно расположенные файлы изображений.
Единственная документация, в которой я могу найти информацию о сделках с Django или create-реагировать-приложение;Я не могу найти ничего, что объясняет, как связать их вместе для значка.
В 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">
, что не работает - файл не обслуживается.Я не уверен, почему это не работает, учитывая, что я добавил «assets» в STATICFILES_DIRS в settings.py и скопировал значки в корень «assets».
Все рабочие css иссылки на изображения включают статическую папку, например:
http://localhost:8000/static/media/private.d7365d01.svg
Кажется, что есть две проблемы:
1) как получить процесс сборки, чтобы скопировать favicon и связанные файлы в ресурсыпапку, чтобы их можно было обслужить
2) как заставить index.html искать нужное место для значка
Если бы я мог настроить PUBLIC_URL, чтобы он указывал на статический / это могло бы сделать это, но это может сломать другие фрагменты кода, которые ссылаются на него?
Я уверен, что упускаю что-то простое.Я был бы признателен за любую помощь!
Редактировать: Теперь у меня есть значок, который будет отображаться во встроенной версии, работающей на моем локальном компьютере, но он не обслуживается производственным сервером.
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 присутствует на сервере, в папке активов.Settings.py то же самое.Я не могу понять, почему рабочий сервер не обслуживает значок избранного?
Редактировать: я пытался добавить это в файл settings.py, но он все еще не работает:
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
'assets' - это имя папки на сервере, которая содержит мои файлы сборки.Значки в ресурсах, как и index.html, и файлы React в assets / static.
Редактировать: это мой конфигурационный файл Passenger для 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.Я не знаю, почему он не может найти значок в той же папке!
Редактировать: Я наконец-то решил это благодаря помощи Суне Кьоргарда.Прочитав документы Django о развертывании, я подумал, что мне нужно настроить все статические расположения файлов в файле settings.py.Однако это, похоже, только для сервера разработки Django, даже при работе с производственными настройками.На рабочем сервере я использую Nginx через Passenger для обслуживания приложения.Это 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/;
}
}
In settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'assets/static'),
os.path.join(BASE_DIR, 'assets'),
]
In index.html:
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
Inбраузер, это преобразуется в:
<link rel="shortcut icon" href="/favicon.ico">
И я вижу значок в браузере по адресу https://example.com/favicon.ico
Happy dance!