我试图将react应用程序部署到Heroku，但构建失败。这个问题我找了好几个小时，但什么也没找到。
注意:我使用的yarn版本是3.2.1.
下面是来自heroku的构建日志:
-----> Building on the Heroku-20 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
USE_YARN_CACHE=true
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
! You don't need to specify Yarn engine. Heroku will install the latest Yarn 1.x, so that per project version can be used. More information here: https://yarnpkg.com/getting-started/install#global-install
https://devcenter.heroku.com/articles/nodejs-support
engines.node (package.json): 16.14.2
engines.npm (package.json): unspecified (use default)
engines.yarn (package.json): unspecified (use default)
Resolving node version 16.14.2...
Downloading and installing node 16.14.2...
Using default npm version: 8.5.0
Resolving yarn version 1.22.x...
Downloading and installing yarn (1.22.19)
Using yarn 3.2.1
-----> Installing dependencies
Running 'yarn install' with yarn.lock
➤ YN0000: ┌ Resolution step
➤ YN0002: │ Admin@workspace:. doesn't provide @testing-library/dom (pb2897), requested by @testing-library/user-event
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [ac80a] doesn't provide @babel/plugin-syntax-flow (pbadc4), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [ac80a] doesn't provide @babel/plugin-transform-react-jsx (p4f6e8), requested by eslint-plugin-flowtype
➤ YN0002: │ react-dev-utils@npm:12.0.1 doesn't provide typescript (p59348), requested by fork-ts-checker-webpack-plugin
➤ YN0002: │ react-dev-utils@npm:12.0.1 doesn't provide webpack (p1012e), requested by fork-ts-checker-webpack-plugin
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 307ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0000: │ @@ -3928,8 +3928,53 @@
➤ YN0000: │ checksum: 8ed0d477ce3bc9c6fe2bf6a6a2cc316bb9c4127c5a7827bae947fa8ec34c7092395c5a283cc300c05b5fa01cbbfa1f938f410a7bf75db7c7846fea41949989ec
➤ YN0000: │ languageName: node
➤ YN0000: │ linkType: hard
➤ YN0000: │
➤ YN0028: │ +"Admin@workspace:.":
➤ YN0028: │ + version: 0.0.0-use.local
➤ YN0028: │ + resolution: "Admin@workspace:."
➤ YN0028: │ + dependencies:
➤ YN0028: │ + "@syncfusion/ej2": ^19.4.48
➤ YN0028: │ + "@syncfusion/ej2-buttons": ^20.2.36
➤ YN0028: │ + "@syncfusion/ej2-file-utils": ^20.2.36
➤ YN0028: │ + "@syncfusion/ej2-react-calendars": ^19.4.48
➤ YN0028: │ + "@syncfusion/ej2-react-charts": ^19.4.50
➤ YN0028: │ + "@syncfusion/ej2-react-dropdowns": ^19.4.52
➤ YN0028: │ + "@syncfusion/ej2-react-grids": ^19.4.50
➤ YN0028: │ + "@syncfusion/ej2-react-inputs": ^19.4.52
➤ YN0028: │ + "@syncfusion/ej2-react-kanban": ^19.4.48
➤ YN0028: │ + "@syncfusion/ej2-react-popups": ^19.4.52
➤ YN0028: │ + "@syncfusion/ej2-react-richtexteditor": ^19.4.50
➤ YN0028: │ + "@syncfusion/ej2-react-schedule": ^19.4.50
➤ YN0028: │ + "@syncfusion/ej2-splitbuttons": ^20.2.36
➤ YN0028: │ + "@testing-library/jest-dom": ^5.16.4
➤ YN0028: │ + "@testing-library/react": ^13.3.0
➤ YN0028: │ + "@testing-library/user-event": ^13.5.0
➤ YN0028: │ + autoprefixer: ^10.4.7
➤ YN0028: │ + eslint: ^8.9.0
➤ YN0028: │ + eslint-config-airbnb: ^19.0.4
➤ YN0028: │ + eslint-plugin-import: ^2.25.4
➤ YN0028: │ + eslint-plugin-jsx-a11y: ^6.5.1
➤ YN0028: │ + eslint-plugin-react: ^7.28.0
➤ YN0028: │ + eslint-plugin-react-hooks: ^4.3.0
➤ YN0028: │ + formik: ^2.2.9
➤ YN0028: │ + postcss: ^8.4.14
➤ YN0028: │ + primeflex: ^3.2.1
➤ YN0028: │ + primeicons: ^5.0.0
➤ YN0028: │ + primereact: ^8.1.1
➤ YN0028: │ + react: ^18.2.0
➤ YN0028: │ + react-dom: ^18.2.0
➤ YN0028: │ + react-helmet: ^6.1.0
➤ YN0028: │ + react-icons: ^4.4.0
➤ YN0028: │ + react-router: ^6.3.0
➤ YN0028: │ + react-router-dom: ^6.3.0
➤ YN0028: │ + react-scripts: 5.0.0
➤ YN0028: │ + tailwindcss: ^3.1.5
➤ YN0028: │ + web-vitals: ^2.1.4
➤ YN0028: │ + yup: ^0.32.11
➤ YN0028: │ + languageName: unknown
➤ YN0028: │ + linkType: soft
➤ YN0028: │ +
➤ YN0000: │ "abab@npm:^2.0.3, abab@npm:^2.0.5":
➤ YN0000: │ version: 2.0.6
➤ YN0000: │ resolution: "abab@npm:2.0.6"
➤ YN0000: │ checksum: 6ffc1af4ff315066c62600123990d87551ceb0aafa01e6539da77b0f5987ac7019466780bf480f1787576d4385e3690c81ccc37cfda12819bf510b8ab47e5a3e
➤ YN0000: │ @@ -10927,53 +10972,8 @@
➤ YN0000: │ checksum: 1d38588e520dab7cea67cbbe2efdd86a10cc7a074c09657635e34f035277b59fbb57d09d8638346bf7090f8e8ebc070c96fa5fd183b777fff4f5edff5e9466cf
➤ YN0000: │ languageName: node
➤ YN0000: │ linkType: hard
➤ YN0000: │
➤ YN0028: │ -"Admin@workspace:.":
➤ YN0028: │ - version: 0.0.0-use.local
➤ YN0028: │ - resolution: "Admin@workspace:."
➤ YN0028: │ - dependencies:
➤ YN0028: │ - "@syncfusion/ej2": ^19.4.48
➤ YN0028: │ - "@syncfusion/ej2-buttons": ^20.2.36
➤ YN0028: │ - "@syncfusion/ej2-file-utils": ^20.2.36
➤ YN0028: │ - "@syncfusion/ej2-react-calendars": ^19.4.48
➤ YN0028: │ - "@syncfusion/ej2-react-charts": ^19.4.50
➤ YN0028: │ - "@syncfusion/ej2-react-dropdowns": ^19.4.52
➤ YN0028: │ - "@syncfusion/ej2-react-grids": ^19.4.50
➤ YN0028: │ - "@syncfusion/ej2-react-inputs": ^19.4.52
➤ YN0028: │ - "@syncfusion/ej2-react-kanban": ^19.4.48
➤ YN0028: │ - "@syncfusion/ej2-react-popups": ^19.4.52
➤ YN0028: │ - "@syncfusion/ej2-react-richtexteditor": ^19.4.50
➤ YN0028: │ - "@syncfusion/ej2-react-schedule": ^19.4.50
➤ YN0028: │ - "@syncfusion/ej2-splitbuttons": ^20.2.36
➤ YN0028: │ - "@testing-library/jest-dom": ^5.16.4
➤ YN0028: │ - "@testing-library/react": ^13.3.0
➤ YN0028: │ - "@testing-library/user-event": ^13.5.0
➤ YN0028: │ - autoprefixer: ^10.4.7
➤ YN0028: │ - eslint: ^8.9.0
➤ YN0028: │ - eslint-config-airbnb: ^19.0.4
➤ YN0028: │ - eslint-plugin-import: ^2.25.4
➤ YN0028: │ - eslint-plugin-jsx-a11y: ^6.5.1
➤ YN0028: │ - eslint-plugin-react: ^7.28.0
➤ YN0028: │ - eslint-plugin-react-hooks: ^4.3.0
➤ YN0028: │ - formik: ^2.2.9
➤ YN0028: │ - postcss: ^8.4.14
➤ YN0028: │ - primeflex: ^3.2.1
➤ YN0028: │ - primeicons: ^5.0.0
➤ YN0028: │ - primereact: ^8.1.1
➤ YN0028: │ - react: ^18.2.0
➤ YN0028: │ - react-dom: ^18.2.0
➤ YN0028: │ - react-helmet: ^6.1.0
➤ YN0028: │ - react-icons: ^4.4.0
➤ YN0028: │ - react-router: ^6.3.0
➤ YN0028: │ - react-router-dom: ^6.3.0
➤ YN0028: │ - react-scripts: 5.0.0
➤ YN0028: │ - tailwindcss: ^3.1.5
➤ YN0028: │ - web-vitals: ^2.1.4
➤ YN0028: │ - yup: ^0.32.11
➤ YN0028: │ - languageName: unknown
➤ YN0028: │ - linkType: soft
➤ YN0028: │ -
➤ YN0000: │ "promise-inflight@npm:^1.0.1":
➤ YN0000: │ version: 1.0.1
➤ YN0000: │ resolution: "promise-inflight@npm:1.0.1"
➤ YN0000: │ checksum: 22749483091d2c594261517f4f80e05226d4d5ecc1fc917e1886929da56e22b5718b7f2a75f3807e7a7d471bc3be2907fe92e6e8f373ddf5c64bae35b5af3981
➤ YN0000: │
➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden.
➤ YN0000: └ Completed
➤ YN0000: Failed with errors in 0s 499ms
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
在Stackoverflow中的一些答案建议删除yarn.lock，所以我试了一下，但又失败了。如有任何帮助，不胜感激。
解决!
经过30多个小时的研究，我终于成功地将我的应用程序部署到heroku上。
我要告诉你我是如何成功的。因此，将来任何人遇到同样的问题都可以解决它来节省你的时间。
解决方案:首先要做的是创建一个名为server.js的文件，并复制下面的代码。
const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT || 5000;
if(process.env.NODE_ENV === 'production'){
app.use(express.static('build'));
app.get('/*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'build', 'index.html'))
})
}
app.listen(port, (err) => {
if(err){
return console.log(err);
}
console.log('Server running on port ', port);
})
注意:别忘了装快递。运行yarn add express如果你使用yarn或npm i express如果你使用npm。
通过输入' heroku config:set NODE_ENV='production'将NODE_ENV='production'添加到heroku。
在你的根目录下创建一个名为Procfile的文件，并把它放在web: yarn start里面，这是因为在我的情况下，我使用yarn作为包管理，如果你使用npm，你不需要像heroku那样做，默认运行npm start
注意:不要忘记添加节点Buildpack，你可以使用heroku CLI或在他们的网站上这样做。(你可以在他们网站的应用程序设置部分找到它)。
将package.json文件中的"start":"react-script start"替换为"start": "node server.js"。
最后，将代码推送到heroku。
就是这样。我希望这对你有帮助。
已解决:在尝试了这么多解决方案之后，我也面临着同样的问题。我修复这个问题:
"version": "0.1.0",
"engines": {
"node": "14.x"
},
只需要在package.json文件中指定节点版本..
如果使用
16.x，则仅在节点版本中出现问题，请使用14.x