Node/React 應用程序不會部署到 Heroku

Question

我的應用程序有一個 React 前端和一個 Node 后端； BE 通過 API 提供 FE 數據。 它不會部署到 Heroku——堆棧跟蹤如下。

我嘗試過的事情：

1. 這個問題。 我已經嘗試在答案中提到的模型存儲庫之后對我的package.json文件進行建模，但沒有運氣。
2. 部署上面提到的模型存儲庫 - 它工作正常。
3. 將模型存儲庫部署到我自己失敗的 heroku 應用程序中——它運行良好，所以 Heroku 不是問題。
4. 這個問題（我已經檢查過react-scripts被列為依賴項而不是開發依賴項）。

我可能最終會以模型存儲庫為起點並逐漸復制我的項目，但會感謝任何有關可能出錯的信息。

堆棧跟蹤：

> fsevents@1.0.17 install /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents
> node-pre-gyp install --fallback-to-build

node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.0.17/fse-v1.0.17-node-v48-linux-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for fsevents@1.0.17 and node@6.10.3 (node-v48 ABI) (falling back to source compile with node-gyp)
make: Entering directory '/tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents/build'
SOLINK_MODULE(target) Release/obj.target/.node
COPY Release/.node
make: Leaving directory '/tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents/build'

> fibers@1.0.15 install /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fibers
> node build.js || nodejs build.js

`linux-x64-48` exists; testing
Binary is fine; exiting
added 1242 packages in 52.433s
removed 1242 packages in 25.561s

> react-ui@0.1.0 build /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client
> react-scripts build

sh: 1: react-scripts: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! react-ui@0.1.0 build: `react-scripts build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the react-ui@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我的服務器 package.json：

{
  "name": "in-search-of-happiness",
  "engines": {
    "node": "6.10.x"
  },
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "heroku-postbuild": "cd client/ && npm install --only=dev && npm install && npm run build"
  },
  "cacheDirectories": [
    "node_modules",
    "client/node_modules"
  ],
  "dependencies": {
    "body-parser": "^1.17.2",
    "cookie-parser": "^1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "jade": "^1.11.0",
    "mongoose": "^4.10.8",
    "morgan": "^1.8.2",
    "serve-favicon": "^2.4.3",
    "zombie": "^5.0.5"
  }
}

我的反應 package.json：

{
  "name": "react-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.7",
    "fetch": "^1.1.0",
    "node-fetch": "^1.7.1",
    "process-nextick-args": "^1.0.7",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.0",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.7",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
    "chai": "^4.0.2",
    "eslint": "^4.0.0",
    "sinon": "^2.3.5",
    "wdio-mocha-framework": "^0.5.10",
    "webdriverio": "^4.8.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
}

Answer 1

你好你的后期構建腳本需要一些修改，請遵循這個約定

將 reactFolderName 替換為包含 react 前端的文件夾名稱 將以下代碼段添加到腳本下的 package.json 中

    scripts{
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactFolderName && npm run build --prefix reactFolderName"
}

並將此代碼段添加到您的 index.js 文件中

    app = express()
    app.use(express.static('reactFolderName/build'));
    app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'reactFolderName', 'build', 'index.html')));