我正在尝试将应用程序部署到heroku,构建成功,但是如果尝试打开它,则会得到:
2019-04-15T08:32:43.993726+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=URL request_id=b9a85cad-9d96-428b-8843-342e2a7372da fwd="88.119.49.13" dyno= connect= service= status=503 bytes= protocol=https
2019-04-15T08:32:44.594217+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=URL request_id=c3997cb0-971e-4918-9eb0-132f0fd3c2eb fwd="88.119.49.13" dyno= connect= service= status=503 bytes= protocol=https
我的React应用程序构建时没有create-react-app
或react-scripts
,我自己配置了webpack。如果我运行npm run dev
,则在localhost上一切正常。这是我的package.json
:
{
"name": "task-frontend",
"version": "1.0.0",
"description": "A frontend task.",
"main": "index.js",
"engines": {
"node": "10.15.3"
},
"scripts": {
"heroku-prebuild": "npm install --dev",
"dev": "node_modules/.bin/webpack-dev-server --mode development --open --hot",
"start": "node_modules/.bin/webpack --config webpack.config.js --mode development"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"dependencies": {
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "1.1.1",
"resolve-url-loader": "^3.1.0",
"serve": "^11.0.0",
"ttf-loader": "^1.0.2",
"webpack": "4.19.1",
"webpack-cli": "2.1.4",
"html-webpack-plugin": "^3.2.0",
"html-loader": "^0.5.5",
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^2.1.1",
"http-server": "^0.11.1",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2"
},
"devDependencies": {
"webpack-dev-server": "^3.3.1"
}
}
如您所见,我有heroku-prebuild
脚本,它安装了dev
依赖项,并且Heroku实例运行了我的start
脚本。目前,它以开发模式运行,稍后将转为生产。
起初我以为可能是因为我没有定义任何路由,但是我相信这几乎不是一个例子。
我的webpack.config.js
文件:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const { resolve } = require('path');
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test:/\.(s*)css$/,
use:['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpg|svg|jpeg)$/,
loader: 'url-loader'
},
{
test: /\.(ttf|woff|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader'
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: resolve(__dirname, 'src/public', 'index.html'),
filename: "./index.html"
})
]
};
如果需要任何其他信息,请告诉我,我将更新我的帖子。