尝试将 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 变量不起作用
无法在 Azure App 服务上部署 React JS 应用程序