Reactjs приложение работает локально, но не работает на Heroku - PullRequest
Новая
       26

Reactjs приложение работает локально, но не работает на Heroku

0 голосов
/ 18 апреля 2020

У меня довольно простое c приложение с некоторыми stati c страницами, которые работают нормально локально (используя 'npm start' из терминала), и после успешного развертывания на heroku, я получаю ошибку при запуске приложения. Журналы и пакет. json файл ниже:

Любая информация будет принята с благодарностью.

журнал: 

2020-04-18T05:02:36.000000+00:00 app[api]: Build succeeded
2020-04-18T05:02:44.810718+00:00 app[web.1]: 
2020-04-18T05:02:44.810736+00:00 app[web.1]: > app@0.1.0 start /app
2020-04-18T05:02:44.810737+00:00 app[web.1]: > npm run frontend
2020-04-18T05:02:44.810737+00:00 app[web.1]: 
2020-04-18T05:02:45.132414+00:00 app[web.1]: 
2020-04-18T05:02:45.132454+00:00 app[web.1]: > app@0.1.0 frontend /app
2020-04-18T05:02:45.132455+00:00 app[web.1]: > react-scripts start
2020-04-18T05:02:45.132456+00:00 app[web.1]: 
2020-04-18T05:02:47.585306+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.114.98/
2020-04-18T05:02:47.585889+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-04-18T05:02:47.586014+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-04-18T05:02:47.586140+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-04-18T05:02:47.586418+00:00 app[web.1]: Starting the development server...
2020-04-18T05:02:47.586419+00:00 app[web.1]: 
2020-04-18T05:02:47.701336+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-18T05:02:47.705175+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-18T05:03:05.836246+00:00 app[web.1]: 
2020-04-18T05:03:05.836295+00:00 app[web.1]: > app@0.1.0 start /app
2020-04-18T05:03:05.836296+00:00 app[web.1]: > npm run frontend
2020-04-18T05:03:05.836296+00:00 app[web.1]: 
2020-04-18T05:03:06.378562+00:00 app[web.1]: 
2020-04-18T05:03:06.378592+00:00 app[web.1]: > app@0.1.0 frontend /app
2020-04-18T05:03:06.378593+00:00 app[web.1]: > react-scripts start
2020-04-18T05:03:06.378593+00:00 app[web.1]: 
2020-04-18T05:03:10.106879+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.17.120.154/
2020-04-18T05:03:10.107596+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-04-18T05:03:10.107753+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-04-18T05:03:10.107886+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-04-18T05:03:10.108211+00:00 app[web.1]: Starting the development server...
2020-04-18T05:03:10.108212+00:00 app[web.1]: 
2020-04-18T05:03:10.297966+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-18T05:03:12.428612+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=powerful-tundra-95895.herokuapp.com request_id=ec45d9df-73bc-4bc9-ab41-67773bc1d173 fwd="130.86.76.89" dyno= connect= service= status=503 bytes= protocol=https
2020-04-18T05:03:13.206007+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=powerful-tundra-95895.herokuapp.com request_id=b5a2d263-9458-4aca-9dd2-0e7a75afc3f6 fwd="130.86.76.89" dyno= connect= service= status=503 bytes= protocol=https

пакет. json: 

{
"name": "app",
"version": "0.1.0",
"private": true,
"engines": {
    "node": "12.x"
},
"dependencies": {
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "concurrently": "^5.1.0",
    "mdbootstrap": "^4.12.0",
    "mdbreact": "^4.25.5",
    "mysql": "^2.18.1",
    "react": "^16.9.0",
    "react-bootstrap": "^1.0.0",
    "react-cookie": "3.0.4",
    "react-dom": "^16.9.0",
    "react-router-dom": "4.3.1",
    "react-scripts": "^3.4.0",
    "reactstrap": "6.5.0"
},
"main": "server.js",
"scripts": {
    "frontend": "react-scripts start",
    "mailmon": "npm run server --prefix ./src/Contact",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "node server.js"
},
"proxy": "http://localhost:5000/",
"eslintConfig": {
    "extends": "react-app"
},
"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ]
}

}

приложение. js

import React, { Component } from 'react';
import './App.css';
import Home from './Home';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ReviewList from './ReviewList';
import About from './About';
import Contact from './Contact';
import Faq from './Faq';
import ReviewEdit from './ReviewEdit';
import BestSelling from './BestSelling'; 
import Policy from './Policy';
import Thankyou from './Thankyou';
import SeasonalDrinks from './SeasonalDrinks';


{/*this page is responsible for routing urls to the respective pages you create. example: /about gets you to the about page..

//TODO: 
          //<Route path='/contact' exact={true} component={contact}/> 
          //<Route path='/mailinglist' exact={true} component={mailinglist}/> 
          //<Route path='/buynow' exact={true} component={buynow}/> 

*/}

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path='/' exact={true} component={Home}/>
          <Route path='/reviews' exact={true} component={ReviewList}/>
          <Route path='/contact' exact={true} component={Contact}/> 
          <Route path='/about' exact={true} component={About}/> 
          <Route path='/faq' exact={true} component={Faq}/> 
          <Route path='/BestSelling' exact={true} component={BestSelling}/> 
          <Route path='/SeasonalDrinks' exact={true} component={SeasonalDrinks}/> 
          <Route path='/reviews/:id' component={ReviewEdit}/>
          <Route path='/policy' exact={true} component={Policy}/>
          <Route path='/thankyou' exact={true} component={Thankyou}/> 
          <Route path='/seasonal' exact={true} component={SeasonalDrinks}/>
        </Switch>
      </Router>
    )
  }
}

export default App;

сервер. js

    const express = require('express');
const path = require('path');
const port = process.env.PORT || 5000;
const app = express();
app.listen(port);
var pathname = path.join(__dirname, '/src/');
console.log(pathname);

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));

});

токовый выход localhost: 5000 /: enter image description here

...