为什么无法在Heroku上部署React应用程序

jw5wzhpr  于 2022-11-13  发布在  React
关注(0)|答案(1)|浏览(218)

我试图将一个React应用程序部署到Heroku上，但构建失败了。我搜索了很多个小时来寻找这个问题，但没有找到任何结果。

**注：**我用的是3.2.1版的Yarn。

下面是来自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);
})

**注意：**不要忘记安装express。如果您使用Yarn，请运行yarn add express;如果您使用npm，请运行npm i express。

输入'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": "node server.js"替换"start":"react-script start"。
最后，把你的代码推给heroku。
就是这样，希望能有所帮助.

heroku

1条答案

按热度按时间
nwo49xxi

nwo49xxi1#

**已解决：**我也面临同样的问题。在尝试了这么多的解决方案后，我通过以下方法解决了此问题：

"version": "0.1.0",
  "engines": {
    "node": "14.x"
  },

只需要在package.json文件中指定节点版本..

  • 如果使用16.x，则仅在节点版本中出现问题，仅使用14.x
赞(0）分享  回复(0）举报  2022-11-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com