将ReactJS/node.js Express应用程序部署到Heroku:未找到错误

w8rqjzmb  于 2022-11-24  发布在  React
关注(0)|答案(1)|浏览(87)

我已经纠结了几天了,找不到解决方案来成功地在Heroku上部署应用程序。以前有人遇到过这个问题吗?构建是成功的,但我一直看到网站上显示“未找到”错误:https://simucho.herokuapp.com/在这里你可以访问github:https://github.com/bentoutcour/simucho
Heroku日志:

2022-11-16T10:25:44.960646+00:00 heroku[web.1]: Idling
2022-11-16T10:25:44.962564+00:00 heroku[web.1]: State changed from up to down
2022-11-16T10:25:46.185457+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2022-11-16T10:25:46.698134+00:00 heroku[web.1]: Process exited with status 143
2022-11-16T10:27:09.000000+00:00 app[api]: Build started by user audidierben@gmail.com
2022-11-16T10:29:28.651974+00:00 app[api]: Deploy cf69a2b2 by user audidierben@gmail.com
2022-11-16T10:29:28.651974+00:00 app[api]: Release v58 created by user audidierben@gmail.com
2022-11-16T10:29:29.791785+00:00 heroku[web.1]: State changed from down to starting
2022-11-16T10:29:32.000000+00:00 app[api]: Build succeeded
2022-11-16T10:29:44.753949+00:00 heroku[web.1]: Starting process with command `node index.js`
2022-11-16T10:29:48.798264+00:00 heroku[web.1]: State changed from starting to up
2022-11-16T10:29:50.038918+00:00 heroku[router]: at=info method=GET path="/" host=simucho.herokuapp.com request_id=faaaacb5-3e26-4998-b14d-b74b96e54ecc fwd="84.173.202.148" dyno=web.1 connect=0ms service=24ms status=404 bytes=412 protocol=https
2022-11-16T10:29:50.040662+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/src/App.js'

过程文件:

web: node index.js

package.json(根目录):

{
  
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js", 
  "scripts": {
    "server": "nodemon index.js",
    "client": "npm run start --prefix ../mon/app",
    "heroku-postbuild": "npm install --prefix app && npm run build --prefix app"
  },
  "proxy": "http://localhost:4000/",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.20"
  },
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "body-parser": "^1.20.0",
    "concurrently": "^7.4.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.1",
    "mongodb": "^4.10.0",
    "mongoose": "^6.6.1",
    "node-mailjet": "^5.1.1"
  }
}

index.js(根目录不是前端文件夹中的目录):

const express = require('express');
const bodyParser = require('body-parser');
const routesHandler = require('./route/handler');
const mongoose = require("mongoose");
const dotenv = require('dotenv').config();
const uri = `mongodb+srv://${process.env.MONGODB}/?retryWrites=true&w=majority`
const form = require('./route/add.js');

async function connect () {
    try {
        await mongoose.connect(uri)
        console.log("connected to mongo")
    } catch (error) {
        console.error(error);
    }
}

connect();


const app = express();

let cors = require('cors')
app.use(cors())
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use("/", routesHandler);
app.use("/", form);

const PORT = process.env.PORT || 4000;
app.listen(PORT, () => {
    console.log('Server running on ')
});
if (process.env.NODE_ENV === "production") {
    const path = require('path');
    console.log("Current directory:", __dirname);
    app.use(express.static(__dirname + "/src"));
    app.get("*", (req, res) => {
      res.sendFile(path.resolve(__dirname,"/src/App.js"));
      
    });
  }

App.js(前端路径):

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
} from "react-router-dom";
import Formsa from './Formsa';
import Home from './Home';
import Contact from "./Contact";
import Apropos from "./Apropos";
import Charte from "./Charte";

export default class App extends Component {
  render() {
    return (
    
      <div className="App-intro">
          <Routes>
          <Route path="/" element={<Formsa />} />
            <Route path="/test" element={<Home />} />
            <Route exact path="/apropos" element={<Apropos />} />
            <Route exact path="/contact" element={<Contact />} />
            <Route exact path="/donnees" element={<Charte />} />
           
          </Routes>
        </div>
      
    );
  }
}

ReactDOM.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
  , document.getElementById('root')
);

文件夹结构:

  • 应用程序
  • 后端(空)
  • 路由
  • 文件
  • .忽略
  • 过程文件
  • index.js
  • package-lock.json
  • package.json
vzgqcmou

vzgqcmou1#

错误指出找不到路径/src/App.js
Error: ENOENT: no such file or directory, stat '/src/App.js'
在express应用程序index.js中,您的代码包含以下查找该路径的行:

app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname,"/src/App.js"));
});

查看您的代码库,您可以尝试/app/src/App.js,因为它是index.js文件的相对路径。
我建议先在本地构建和服务它,然后更改您在查找App.js的路径,一旦您可以在本地构建和服务它,您将浪费更少的时间尝试在线部署它。

相关问题