【发布时间】：2022-08-10 16:49:25
【问题描述】：
我试图将反应应用程序部署到 Heroku，但构建失败。我搜索了这个问题好几个小时，但我发现注意到了。
笔记：我使用了纱线版本 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。
我将告诉你我是如何成功的，这样将来任何人都可以在 5 分钟内而不是 30 小时内解决同样的问题。
解决方案：首先要做的是创建一个我将其命名为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 build 来生成构建文件夹。也不要忘记安装 express yarn add express。
通过输入 `heroku config:set NODE_ENV=\'production\' 将 NODE_ENV=\'production\' 添加到 heroku。
在根目录中创建一个名为 Procfile 的文件并将其放入其中 web: yarn start 这是因为在我的情况下，我使用纱线作为包管理器，如果您使用的是 npm，则不需要这样做作为 heroku 默认运行 npm start 。
笔记：不要忘记添加节点 Buildpack，您可以使用 heroku CLI 或在他们的网站中添加。（您可以在应用程序设置中找到它）。
在您的package.json 文件中，将\"start\":\"react-script start\" 替换为\"start\": \"node server.js\"。
最后，将您的代码推送到 heroku。
而已。我希望它会有所帮助。
-
解决方案在错误中。使用提供的链接调试您的失败，否则在他们的网站上创建票证。
-
删除 yarn.lock 的建议可能是个坏建议。在您的开发环境中本地运行
yarn install，并确保您的yarn.lock和package.json的最新版本已提交到git，然后推送到Heroku，如果您遇到任何错误，请再次在此处发布。