Развертывание React и Django на героку

Я сильно застрял в развертывании, я пытаюсь развернуть реакцию django вместе на героку, проблема в том, что приложение реакции не загружается, когда я нажимаю URL-адрес, он показывает пустую страницу, и я не могу понять, в чем проблема может быть сборки каталог, где я думаю, что путь неверен при начальной сборке "npm run build". Вот моя попытка ниже:

Все файлы находятся в корневом каталоге

Settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'build')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'build/static'),
]

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
urlpatterns = [
    path('admin/', admin.site.urls),
    path('automation/', include('performaApp.urls')),
    re_path('.*',TemplateView.as_view(template_name='index.html'))
    #url(r'^', FrontendAppView.as_view())
]

сборка/index.html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/static/manifest.json"><link rel="shortcut icon" href="/static/favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"><title>Cameria - Facial Recognition</title><link href="/static/css/main.1ec2ccf3.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.40de23a7.js"></script></body></html>

Пакет.json

{
  "name": "react-redux-starter-template",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://adidas008.herokuapp.com",
  "dependencies": {
    "@material-ui/core": "^4.9.0",
    "@material-ui/icons": "^4.5.1",
    "axios": "^0.19.2",
    "material-ui": "^0.20.0",
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.0",
    "react-dom": "^16.2.0",
    "react-flexbox-grid": "^2.0.0",
    "react-loader-spinner": "^3.1.5",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "react-webcam": "^0.2.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.5.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "postinstall": "npm run build"
  },
  "engines": {
    "node": "10.18.1",
    "npm": "6.13.4"
  }
}

Я думаю, что основной проблемой является путь к файлам css или манифеста, поэтому он может не загружать реагирующее приложение, когда я перехожу к URL-адресу, он показывает пустую страницу, а когда я открываю консоль, он выдает мне следующие ошибки:

Refused to apply style from 'https://adidas008.herokuapp.com/static/css/main.1ec2ccf3.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
register:1 Refused to execute script from 'https://adidas008.herokuapp.com/static/js/main.40de23a7.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
static/manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
register:1 Refused to apply style from 'https://adidas008.herokuapp.com/static/css/main.1ec2ccf3.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Пустой экран:

введите здесь описание изображения

Пожалуйста, кто-нибудь предложит, чтобы я застрял в этом так долго, на мой взгляд, это может быть ошибка каталога сборки, действительны ли пути в index.html, это было автоматически сделано, когда я запустил "npm run build". Как я могу загрузить свой реагировать приложение. Что я могу исправить?


person Nabeel Ayub    schedule 04.02.2020    source источник
comment
Вы переместили файл сборки в одиночку на сервер?   -  person Raghul SK    schedule 04.02.2020
comment
в файле index.html просто добавьте ‹base href=/› в заголовок, прежде чем связывать все файлы CSS. Это может сработать, если вы упомянули об ошибке «Отказ от применения стиля».   -  person Raghul SK    schedule 04.02.2020
comment
Только @Raghul означает? Я переехал с полными файлами   -  person Nabeel Ayub    schedule 04.02.2020
comment
@ Raghul Я пробовал ‹base href=/›   -  person Nabeel Ayub    schedule 04.02.2020
comment
@Raghul, еще одна вещь, которую я хочу подтвердить при развертывании в героку, нужно ли мне добавлять модули узлов и папку сборки?   -  person Nabeel Ayub    schedule 04.02.2020
comment
нет, вы просто добавляете только папку сборки   -  person Raghul SK    schedule 04.02.2020
comment
когда вы добавляете папку сборки, вам нужно установить домашнюю страницу как /yourpath/build   -  person Raghul SK    schedule 04.02.2020
comment
означает, что в моем случае главная страница будет adidas008.herokuapp.com/build? в пакете.json   -  person Nabeel Ayub    schedule 04.02.2020
comment
Я добавил домашнюю страницу в package.json   -  person Nabeel Ayub    schedule 04.02.2020
comment
да, прежде чем мы построим, мы должны добавить. после завершения сборки необходимо переместить папку сборки или файлы внутри сборки на сервер   -  person Raghul SK    schedule 04.02.2020
comment
Все еще не могу понять это правильно, можете ли вы сказать более короткие шаги всего процесса в развертывании реактивной части?   -  person Nabeel Ayub    schedule 04.02.2020
comment
Попробуйте это сначала: установите домашнюю страницу в package.json, затем возьмите сборку проекта, затем переместите файлы внутри папки сборки на сервер.   -  person Raghul SK    schedule 04.02.2020
comment
@Raghul до сих пор не может решить эту проблему, я также загрузил соответствующий экран ошибки (пустой экран).   -  person Nabeel Ayub    schedule 04.02.2020
comment
в настоящее время возникла эта проблема, смогли ли вы ее решить? @НабилАюб   -  person TOLULOPE ADETULA    schedule 21.02.2020
comment
Нет, я все еще на нем, это путь к проблеме, который вы используете в индексном файле в сборке, все правильно, но почему-то сборка выполняется неправильно, проверьте пути, связанные с индексом, манифест присутствует в каталоге сборки   -  person Nabeel Ayub    schedule 24.02.2020
comment
@TOLULOPEADETULA, если вы можете исправить, пожалуйста, поделитесь со мной.   -  person Nabeel Ayub    schedule 24.02.2020
comment
@TOLULOPEADETULA, также проверьте, установив Debug=True.   -  person Nabeel Ayub    schedule 24.02.2020
comment
моя ошибка возникла из файла wsig. Можешь поделиться скриншотом @NabeelAyub   -  person TOLULOPE ADETULA    schedule 24.02.2020
comment
Ребята, вы смогли это решить? у меня такая же проблема   -  person Flexi    schedule 23.02.2021


Ответы (1)


Я думаю, что вам не хватает этого в вашей конфигурации:

class Assets(View):

def get(self, _request, filename):
    path = os.path.join(os.path.dirname(__file__), "static", filename)

    if os.path.isfile(path):
        with open(path, "rb") as file:
            return HttpResponse(file.read(), content_type="application/javascript")
    else:
        return HttpResponseNotFound()

Без этого Heroku будет получать всю статистику с content-type по умолчанию для HTTP-запросов Django, то есть text/html. В этом случае они должны быть application/javascript.

Все это с некоторыми ошибками довольно подробно описано здесь: https://dev.to/mdrhmn/deploying-react-django-app-using-heroku-2gfa

person Tysoncete    schedule 03.04.2021