У меня есть приложение 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"
],
"плагины": [
«Спектрально-выполнения»,
«Спектрально-декораторы-наследие»,
«Преобразования класса-свойства»,
«Спектрально-объектный покой распространения»,
«Реагируют-горячий-погрузчик / столпотворение»,
"Typecheck",
"Спектрально-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"
})
]
};
Проблема в том, что мои статические файлы не будут загружаться с
заявление.
DEV :
из 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.
Заранее спасибо.
После поиска я выяснил, что проблема связана с чем-то, связанным с «Base_Url», потому что, если нажать «127.0.0.1:8000/static/frontend/main.js», это успешно откроет мой файл js. Так может кто-нибудь, пожалуйста, помогите мне исправить это.