为什么 Heroku 无法 cd 到我的前端 React 应用程序？

Question

当我将后端 git push 到 heroku 时，我不断收到此错误消息：

remote: -----> Build
remote:        Running heroku-postbuild
remote:
remote:        > mp-backend@1.0.0 heroku-postbuild /tmp/build_eaac46c4d4704cb2a35221c2068a754a
remote:        > cd map-project && npm install --only=dev && npm install && npm run build
remote:
remote: sh: 1: cd: can't cd to map-project
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 2
remote: npm ERR! mp-backend@1.0.0 heroku-postbuild: `cd map-project && npm install --only=dev && npm install && npm run build`
remote: npm ERR! Exit status 2
remote: npm ERR!
remote: npm ERR! Failed at the mp-backend@1.0.0 heroku-postbuild script.

导致 ! [remote denied] master -> master (pre-receive hook 被拒绝)。

我不明白。我添加了这个：

"scripts": {
    "start": "node index.js",
    "heroku-postbuild": "cd map-project && npm install --only=dev && npm install && npm run build"
  }

到我的后端的 package.json 然后运行

git init
git add .
git commit -m "Initial commit"
heroku create
git push heroku master

同时 cd'd 到我的后端。是什么导致我的构建失败？

可能有帮助的其他代码：

//my backend under folder mp-backend
const express = require('express');
const path = require('path');

const app = express();

const populartimes = require('populartimes.js');

//Node Geocoder
const NodeGeocoder = require('node-geocoder');
const options = {
  provider: 'google',
  apiKey: 
};
const geocoder = NodeGeocoder(options);

const getWeekDay = () => {
  typical getDay codes
}

const unRendered = 'https://i.imgur.com/fgSeO4a.png';
const Rendered = 'https://i.imgur.com/sg9a1sG.png';

//Markers
const markers = [an array of marker objects]

const findLatLong = async function findLatLong(){
    for(let i = 0; i < markers.length; i++){
        const temp = await geocoder.geocode(markers[i].address)
        markers[i].position.lat = temp[0].latitude;
        markers[i].position.lng = temp[0].longitude;
    }
}

const fillNewMarker = async function fillNewMarker(num){
  const i = num;
  let temp;
  let data;
  await populartimes(markers[i].placeID)
  .then(out => {data = out; temp = 'Currently ' + data.now.currently + ' full.'})
  .catch(() => {temp = 'There is currently no data available.'});
  markers[i].busy = temp;
}

// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'map-project/build')));

var bodyParser = require('body-parser');
app.use(bodyParser.json()); // support json encoded bodies
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies


app.get('/api/getMarkers', async (req,res) => {
    await findLatLong();
    console.log('Find LatLng Complete')
    //await fillPopularity();
    //console.log('Find Business Complete')
    var mark = markers;
    res.json(mark);
    console.log('Sent Markers');
    console.log(markers);
});

app.post('/api/newMarker', async (req,res) => {
    console.log('Request Recieved');
    const n = req.body.index;
    console.log(n);
    await fillNewMarker(n);
    console.log('Retrieve Data For New Marker Complete');
    markers[n].icon = Rendered;
    var mark = markers;
    res.json(mark);
    console.log('Sent Markers');
    console.log(markers);
})

app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/map-project/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port);

console.log('App is listening on port ' + port);

Answer 1

您的文件夹结构是什么？你的项目是什么样的？

您没有为任何人提供足够的信息来帮助您。

编辑：

这里有两个选项，mono-repo 和 poly-repo。基本上，您是希望前端和后端始终捆绑在一起（mono-repo）还是希望它们完全独立（poly-repo）？虽然我是 mono-repos 的忠实粉丝，即使范围很大，但不要让我在没有自己研究的情况下说服你。我认为在这种情况下，单一回购对你来说会更好，因为它们需要管理的工作更少。

以下是您项目的文件夹结构示例：

my-project
----.git
----packages
--------back-end
--------front-end
----README.md
----(any other whole-project type files)

您的整个项目将在一个 Git 存储库下。看到你的问题是 Git 只跟踪你所在的文件夹。因此，如果您将 Git 放入 packages/backend，它只会找到并跟踪该文件夹的子文件夹。这意味着当您推送时，packages/backend 中不存在的任何内容都不存在。

我建议的这个解决方案让您将两个包裹紧密地捆绑在一起。当你推送到 git 或 heroku 时，你的前端和后端都会在一起。这也让您可以更好地处理其他一些工具，例如文档。您可以添加将系统作为一个整体而不是单个部分进行部署的说明。