Django + React Project не может загружать статические файлы
У меня есть приложение Django и React вместе в одной папке проекта.
Структура проекта:
project/
frontend/
src/
components/
App.jsx
index.js
static/
frondend/
main.js
templates/
frondend/
index.html
migrations/
__init__.py
admin.py
apps.py
models.py
test.py
urls.py
views.py
project/
migrations/
__init__.py
admin.py
apps.py
models.py
test.py
urls.py
views.py
nodemodules/
.bablerc
manage.py
.webpack.config.js
package-lock.json
package.json
index.html:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<title>Django DRF - React : Quickstart - </title>
</head>
<body>
<section>
<div>
<div id = "root">
<!-- React -->
</div>
</div>
</section>
</body>
{% load static %}
<script src = "{% static 'frontend/main.js' %}"></script>
</html>
Мой файл .bablerc: {
"presets": [
"es2015", "stage-1", "react"
], "плагины": [ "трансформация-время выполнения", "преобразовать-декораторы-наследие", "преобразовать-класс-свойства", "преобразование-объект-отдых-распространение", "реагировать-горячий-загрузчик / бабель", "проверка типов", "преобразование-es2015-модули-commonjs", "добавить-модуль-экспорт", "импортные утверждения" ] }
мой webpack.config.js:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: { presets: ["@babel/preset-env", "@babel/preset-react"] }
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./frontend/templates/frontend/index.html",
filename: "./index.html"
})
]
};Проблема в том, что мои статические файлы не загружаются с
{% load static %}утверждение.
разработчик: из project.settings.common import *
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
TEMPLATE_DEBUG = True
ALLOWED_HOSTS = ['127.0.0.1', 'localhost']
DATABASE_ROUTERS = ['stockdata.routers.StockdataRouter',]
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'dbname',
'USER': 'postgres',
'PASSWORD': '*****',
'HOST': 'localhost',
'PORT': '5432',
'OPTIONS': {
'connect_timeout': 0,
}
},
'data_db': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'sdata',
'USER': 'postgres',
'PASSWORD': '*****',
'HOST': 'localhost',
'PORT': '5432',
},
}
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
os.path.join(BASE_DIR, "frontend/static/"),
]
производственные установки:
from project.settings.common import *
DEBUG = False
TEMPLATE_DEBUG = True
ALLOWED_HOSTS = ['aws.ip',]
DATABASE_ROUTERS = ['stockdata.routers.StockdataRouter',]
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'dbname',
'USER': 'awsuser',
'PASSWORD': '******',
'HOST': '*****.******.ap-south-1.rds.amazonaws.com',
'PORT': '5432',
# 'HAS_HSTORE': True,
'OPTIONS': {
'connect_timeout': 0,
},
'CONN_MAX_AGE': 0
},
'data_db': {
'ENGINE': 'django.db.backends.postgresql_psycopg2',
'NAME': 'data_db',
'USER': 'awsuser',
'PASSWORD': '*******',
'HOST': '*****.******.ap-south-1.rds.amazonaws.com',
'PORT': '5432',
'CONN_MAX_AGE': 0
}
}
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
Есть ли способ, которым я могу загрузить свои статические файлы здесь, в React HTML.
А также, если такой способ настройки кажется неправильным, пожалуйста, помогите мне пошагово правильно реализовать проект Django + React.
Заранее спасибо.
After searching, I figured out that problem is with something related to "Base_Url", Because if hit "127.0.0.1:8000/static/frontend/main.js" , this will successfully open my js file. So can someone please help me to fix this.
вы установили STATICFILES_DIRS и STATIC_URL в настройках .py, если да, то опубликуйте это
@Pankaj Sharma: dev-settings: STATIC_URL = '/ static /' STATICFILES_DIRS = [os.path.join (BASE_DIR, "static"), os.path.join (BASE_DIR, "frontend / static /"),]
пробовал со статическими файлами, но это не работает
Вы можете поделиться своим settings.py?
в urls.py добавьте + static(MEDIA_URL, document_root=os.path.join(MEDIA_ROOT,'accounts')) после urlpatterns
@rwx проверьте мой вопрос, я отредактировал код настроек.
@PankajSharma У меня есть это в моем файле urls.py.
Как насчет замены STATIC_URL на frontend? И я хотел бы использовать что-то вроде nginx или http.server python, а не django, для обслуживания статических файлов в таком сценарии смешивания.
@BenLee Спасибо. Не могли бы вы предоставить какие-либо ресурсы для настройки приложения с http-сервером nginx или python, это было бы большим подспорьем.
python3 -m http.server -d frontend 80 может обслуживать файлы в папке frontend, где должны находиться ваши файлы .js и .html. В python2 это SimpleHTTPServer. Однако этот метод похож на игрушку. Просто найдите nginx, чтобы найти руководство, и это - это документация.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
попробуйте
{% load staticfiles %}