Приложение NodeJs на Heroku отображает пустую страницу после развертывания - PullRequest
Новая
       19

Приложение NodeJs на Heroku отображает пустую страницу после развертывания

0 голосов
/ 18 сентября 2018

У меня есть приложение nodejs (NodeJs + React + MongoDb), развернутое на heroku.Я подключаюсь к mongoDb базе данных, используя mLab, когда я запускаю npm start из консоли heroku, он говорит App listening on PORT: 47147 и mongoose connection successfull.Но когда я беру приложение (https://sheltered -spire-71661.herokuapp.com ), оно ничего не отображает.В чем может быть причина?Любая помощь приветствуется.

Добавление скриншота консоли heroku

enter image description here

и лога

enter image description here

ОБНОВЛЕНИЕ

К вашему сведению Я запускаю приложение Heroku локально, и оно прекрасно работает без каких-либо проблем.Я не знаю проблемы при развертывании в Heroku.Снимок экрана ниже

enter image description here

ОБНОВЛЕНИЕ 2

index.html

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>LMS</title>
        <link rel="shortcut icon" href="/assets/images/favicon.ico" />
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
        <link rel="stylesheet" type="text/css" href="/assets/style.css">
        <link rel="stylesheet" href="https://unpkg.com/react-tabs@2/style/react-tabs.css">
        <link href="https://cdn.jsdelivr.net/npm/react-big-calendar@0.19.0/lib/css/react-big-calendar.css" rel="stylesheet"/>
        <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
        <script src="https://use.fontawesome.com/8ff98e4aea.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
        <script src="/assets/javascript.js"></script>
    </head>
    <body>
        <div id="app"></div>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
        <script src="/bundle.js"></script>
    </body>
</html>

Когда у меня есть index.html, подобный этому в Heroku, он выдает мне ошибку в консоли, такую ​​как

Uncaught SyntaxError: Неожиданный токен <</p>

Я подумал, что он не может понять файл index.html, и я изменил скрипт загрузчика пакетов, как <script type="text/babel" src="/bundle.js"></script>

Ошибка исчезла, но отображается пустая страница.Далее я подумал its not properly serving the static assets из этого SO вопроса Развертывание на heroku: Uncaught SyntaxError: Неожиданный токен <</a>.Затем я просмотрел исходный код страницы и проверил файлы из браузера и 

<script src="/assets/javascript.js"></script>

, и он показывал код (https://my.herokuapp.com/assets/style.css и https://my.herokuapp.com/assets/javascript.js работает).Но когда я получаю доступ к /bundle.js, это перенаправляет его обратно в приложение heroku, в отличие от локального, где отображается комплектный js-код.Express обслуживает статические файлы, такие как 

//Landing
  app.get("/", autoRedirect, function(req, res){
     res.sendFile(path.resolve(__dirname, "public", "index.html"));
  });
//Public files <this needs to stay right below app.get("/")!!!!
  app.use(express.static(__dirname + "/public"))

Это проблема Heroku doesnt understand the bundle.js file?Я подошел к консоли приложения Heroku и собрал приложение еще раз с npm run build, и успешно генерируется bundle.js, который также не внес никаких изменений в загрузчик приложения.

...