Белая пустая страница при развертывании моего приложения (React.js и Django) на Heroku

Я новичок, и проект отлично работает локально, но когда я развертываю его на Heroku, я получаю пустую страницу.

Я также подключил свой Heroku к GitHub и сделал обратную сборку с https://github.com/mars/create-react-app-buildpack, но она все еще не работает .

Моя база данных и Django в панели администратора (Backend) работает отлично

Console:

My files:

My build folder:

My public folder:

My src folder:

package.json (Я пробовал добавить "homepage": ".", но это не сработало даже после повторной сборки ):

   {
  "name": "frontend",
  "homepage": "aroundtheword.herokuapp.com/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.2",
    "react-scripts": "^5.0.0",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postinstall": "npm run build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "engines": {
    "node": "16.13.0",
    "npm": "8.1.0"
  }
}

index.html (общая папка):

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <link 
    rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
    crossorigin="anonymous" >
    <title>Around the world</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
  </body>
</html>

index.html (папка сборки):

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link rel="icon" href="/favicon.ico"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <meta name="theme-color" content="#000000"/>
        <meta name="description" content="Web site created using create-react-app"/>
        <link rel="apple-touch-icon" href="/logo192.png"/>
        <link rel="manifest" href="/manifest.json"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <title>Around the world</title>
        <script defer="defer" src="/static/js/main.9bb6833f.js">

        </script>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

Procfile:

release: python manage.py migrate 
web: gunicorn blog_lyfe.wsgi --log-file -

App.js:

import { BrowserRouter as Router , Routes, Route } from "react-router-dom";
import Layout from './hocs/Layout';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';

const App = () => (
  <Router >
    <Layout>
      <Routes>
        <Route exact path = '/' element = {<Blog/>} />
        <Route exact path = '/category/:category' element = {<Category/>} />
        <Route exact path = '/blog/:id' element = {<BlogDetail/>} />
      </Routes>
    </Layout>
  </Router>
);

export default App ;

В settings.py некоторые коды в settings.py закомментированы, потому что у меня они не работали :

Пожалуйста, используйте heroku-buildpack-static для этого.

Перед развертыванием, пожалуйста, соберите приложение react, используя команду npm run build

и ваши статические файлы будут находиться в папке build. Используйте следующее официальное руководство для развертывания на Heroku

https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static

Я развернул приложение React на AWS, а Django на Heroku (отдельно), но вы можете развернуть Django и на AWS.

Вот как я развернул приложение React

Вот как я развернул приложение Django

Не забудьте отредактировать settings.py и написать "'rest_framework.permissions.AllowAny'" в REST_FRAMEWORK settings.py, так что это будет выглядеть так 👇 :

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

Уведомление о том, что не будет безопасным AllowAnay разрешение .

Вернуться на верх