尝试将 react.js 应用程序部署到 heroku 时出错

Posted

技术标签:

【中文标题】尝试将 react.js 应用程序部署到 heroku 时出错【英文标题】:Error when trying to deploy react.js app to heruko 【发布时间】:2019-11-17 22:26:58 【问题描述】:

好的,所以我需要将我的 react.js 应用程序部署到 heroku,但它一直给我一个错误。

应用程序使用 yarn 而不是 npm。该应用程序构建在 fuse React 模板之上。我已将 package.json 中的引擎指定为 yarn 和 node,但它一直给我一个错误。请参阅下面的代码以获得更深入的了解。

这是我的 package.json 文件


"name": "fuse-react-app",
"version": "3.1.0",
"private": true,
"engines": 
    "yarn": "1.15.2",
    "node": "10.16.0"
,
"dependencies": 
    "@date-io/date-fns": "1.3.7",
    "@material-ui/core": "4.1.3",
    "@material-ui/icons": "4.2.1",
    "@material-ui/pickers": "3.1.2",
    "@material-ui/styles": "4.1.2",
    "auth0-lock": "11.16.3",
    "autosuggest-highlight": "3.1.1",
    "axios": "0.19.0",
    "axios-mock-adapter": "1.16.0",
    "chart.js": "2.8.0",
    "date-fns": "2.0.0-beta.1",
    "downshift": "3.2.10",
    "firebase": "6.2.3",
    "formsy-react": "1.1.5",
    "google-map-react": "1.1.4",
    "jsonwebtoken": "8.5.1",
    "jss": "10.0.0-alpha.21",
    "jss-extend": "6.2.0",
    "jwt-decode": "2.2.0",
    "keycode": "2.2.0",
    "lodash": "4.17.11",
    "material-table": "1.40.0",
    "material-ui-popup-state": "1.4.0",
    "mobile-detect": "1.4.3",
    "moment": "2.24.0",
    "notistack": "0.8.7",
    "path-to-regexp": "3.0.0",
    "perfect-scrollbar": "1.4.0",
    "prismjs": "1.16.0",
    "qs": "6.7.0",
    "raw-loader": "1.0.0",
    "react": "16.8.6",
    "react-autosuggest": "9.4.3",
    "react-beautiful-dnd": "11.0.4",
    "react-big-calendar": "0.22.0",
    "react-chartjs-2": "2.7.6",
    "react-dom": "16.8.6",
    "react-draggable": "3.3.0",
    "react-frame-component": "4.1.0",
    "react-masonry-css": "1.0.12",
    "react-number-format": "4.0.8",
    "react-popper": "1.3.3",
    "react-redux": "7.1.0",
    "react-router-config": "5.0.1",
    "react-router-dom": "5.0.1",
    "react-scripts": "3.0.1",
    "react-select": "2.4.4",
    "react-swipeable-views": "0.13.3",
    "react-table": "6.10.0",
    "react-text-mask": "5.4.3",
    "react-virtualized": "9.21.1",
    "react-window": "1.8.3",
    "redux": "4.0.1",
    "redux-thunk": "2.3.0",
    "typeface-muli": "0.0.71",
    "velocity-react": "1.4.3"
,
"resolutions": 
    "react": "16.8.6",
    "react-dom": "16.8.6"
,
"devDependencies": 
    "@babel/core": "7.4.5",
    "@babel/node": "7.4.5",
    "@babel/preset-env": "7.4.5",
    "cross-env": "5.2.0",
    "globby": "9.2.0",
    "js-beautify": "1.10.0",
    "marked": "0.6.2",
    "purgecss": "1.3.0",
    "tailwindcss": "1.0.4",
    "webpack-bundle-analyzer": "3.3.2"
,
"scripts": 
    "start": "yarn run tailwind && react-scripts start",
    "build": "yarn run tailwind && node ./purge-tailwindcss.js && cross-env GENERATE_SOURCEMAP=false react-scripts build",
    "tailwind": "./node_modules/.bin/tailwind build ./src/styles/tailwind.base.css -c ./tailwind.js -o ./src/styles/tailwind.css",
    "test": "react-scripts test --env=node",
    "eject": "react-scripts eject",
    "build-docs": "find ./src/app/main/documentation/material-ui-components \\( -name '*.ts' -o -name '*.tsx' \\) -type f -delete && babel-node src/app/main/documentation/material-ui-components/build.js",
    "build-stats": "yarn run build --stats",
    "bundle-report": "yarn run build-stats && webpack-bundle-analyzer build/bundle-stats.json -m static -r build/bundle-stats.html -O"
,
"eslintConfig": 
    "extends": "react-app"
,
"browserslist": 
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version",
        "ie 11"
    ]
 

这是我在 heroku 上遇到的错误:

2019-07-08T11:25:56.852293+00:00 应用程序[web.1]:npm 错误!生成 ENOENT 2019-07-08T11:25:56.852517+00:00 应用程序 [web.1]:npm 错误! 2019-07-08T11:25:56.852647+00:00 应用程序 [web.1]:npm 错误! fuse-react-app@3.1.0 启动脚本失败。 2019-07-08T11:25:56.852779+00:00 应用程序 [web.1]:npm 错误!这可能不是 npm 的问题。上面可能有额外的日志输出。 2019-07-08T11:25:56.860485+00:00 应用[web.1]: 2019-07-08T11:25:56.860724+00:00 应用程序 [web.1]:npm 错误!可以在以下位置找到此运行的完整日志: 2019-07-08T11:25:56.860877+00:00 应用程序 [web.1]:npm 错误! /app/.npm/_logs/2019-07-08T11_25_56_854Z-debug.log 2019-07-08T11:25:56.921581+00:00 heroku[web.1]:进程以状态 1 退出

它说它正在尝试运行 npm。但是该应用程序不使用npm ..希望你们能帮助我..

【问题讨论】:

嗨,我的回答有意义吗?你能让它工作吗? 【参考方案1】:

为了将 fuse-react 模板部署到 heroku,您需要完成几个额外的步骤,以确保正确安装您的开发人员依赖项。

直接从他们提供的Readme.txt 文件中获取必要的步骤:

HEROKU 笔记

如果你想将 fuse-react 部署到 heroku,你可能会遇到问题,这里是解决方案:

    禁用生产模式以安装 devDependencies:

    heroku config:set NPM_CONFIG_PRODUCTION=false

    将你的分支推送到 Heroku 上的 master 分支:

    git push heroku <branch>:master

希望对您有所帮助!

【讨论】:

以上是关于尝试将 react.js 应用程序部署到 heroku 时出错的主要内容,如果未能解决你的问题,请参考以下文章

如何将带有 django 的 react.js webpack 部署到 heroku?

将 Gatsby 部署到 Heroku... .env 变量不起作用

Firebase react.js 应用部署 - 空白页面

无法在 Azure App 服务上部署 React JS 应用程序

从 react js / node js 将文件对象上传到天蓝色存储

如何在 cPanel 服务器上使用 React 设置 SSL 证书?