我正在尝试在Heroku上部署我的React Webpack应用程序,并且正在执行一些基本步骤,例如在package.json上编辑我的脚本。
我添加了“postinstall”和“start”脚本,创建了一个server.js文件。
这是我的package.json(我已经完成了sudo NPM安装-g webpack,以及npm install,它让我的$ webpack -p运行)。
我可以运行$ node server.js在localhost:8080中启动我的项目。我从终端的server.js文件中获取“Server started”,项目确实在我的本地主机上呈现。
然后,我做了:
$git add.
$git commit -am "deploy commit"
$git push heroku master
我收到一条消息“构建成功!”但是当我打开应用程序时,该网站显示没有任何呈现。
我做错了什么?
以下是我最近运行的$ heroku日志。
2018-03-10T16:10:03.000000+00:00 app[api]: Build started by user redactedname@gmail.com
2018-03-10T16:10:46.421847+00:00 app[api]: Release v8 created by user redactedname@gmail.com
2018-03-10T16:10:46.771508+00:00 heroku[web.1]: Restarting
2018-03-10T16:10:46.773432+00:00 heroku[web.1]: State changed from up to starting
2018-03-10T16:10:46.421847+00:00 app[api]: Deploy 564e8921 by user redactedname@gmail.com
2018-03-10T16:10:03.000000+00:00 app[api]: Build succeeded
2018-03-10T16:10:47.709064+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2018-03-10T16:10:47.791386+00:00 heroku[web.1]: Process exited with status 143
2018-03-10T16:10:53.037456+00:00 heroku[web.1]: Starting process with command `npm start`
2018-03-10T16:10:54.902517+00:00 app[web.1]:
2018-03-10T16:10:54.902538+00:00 app[web.1]: > redux-simple-starter@1.0.0 start /app
2018-03-10T16:10:54.902540+00:00 app[web.1]: > node server.js
2018-03-10T16:10:54.902542+00:00 app[web.1]:
2018-03-10T16:10:55.116187+00:00 app[web.1]: Server started
2018-03-10T16:10:55.335272+00:00 heroku[web.1]: State changed from starting to up
2018-03-10T16:10:58.234416+00:00 heroku[router]: at=info method=GET path="/" host=weatherapp101.herokuapp.com request_id=e985ba8d-1e9e-4e9b-829c-1593329b1c65 fwd="123.198.0.36" dyno=web.1 connect=1ms service=19ms status=200 bytes=762 protocol=https
2018-03-10T16:10:58.412820+00:00 heroku[router]: at=info method=GET path="/style/style.css" host=weatherapp101.herokuapp.com request_id=1cbe3df1-d253-459e-b092-4a0e376cb7dc fwd="123.198.0.36" dyno=web.1 connect=1ms service=3ms status=200 bytes=510 protocol=https
2018-03-10T16:10:58.587208+00:00 heroku[router]: at=info method=GET path="/bundle.js" host=weatherapp101.herokuapp.com request_id=e6bf0498-e486-4535-b321-b1a395abe467 fwd="123.198.0.36" dyno=web.1 connect=1ms service=15ms status=200 bytes=315609 protocol=https
2018-03-10T16:11:18.173974+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=weatherapp101.herokuapp.com request_id=9dd508ad-04eb-4dc7-9ad1-00fd5e67c074 fwd="123.198.0.36" dyno=web.1 connect=1ms service=4ms status=200 bytes=762 protocol=https
这是heroku构建日志:
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 8.x...
Downloading and installing node 8.10.0...
Using default npm version: 5.6.0
-----> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-----> Building dependencies
Installing node modules (package.json)
> redux-simple-starter@1.0.0 postinstall /tmp/build_aa21f1c37823732c65451d55f7047e90
> webpack -p
Hash: 0846607ee102f618af36
Version: webpack 1.15.0
Time: 8198ms
Asset Size Chunks Chunk Names
bundle.js 315 kB 0 [emitted] main
[0] multi main 28 bytes {0} [built]
+ 240 hidden modules
WARNING in bundle.js from UglifyJs
Condition always true [./~/react/lib/ReactMount.js:764,0]
Condition always true [./~/react/lib/findDOMNode.js:46,0]
Condition always true [./~/react/lib/instantiateReactComponent.js:80,0]
Dropping unreachable code [./~/react/lib/shouldUpdateReactComponent.js:40,0]
Condition always true [./~/react/lib/traverseAllChildren.js:158,0]
Side effects in initialization of unused variable support [./~/lodash/index.js:932,0]
Condition always true [./~/lodash/index.js:12323,0]
Dropping unreachable code [./~/lodash/index.js:12337,0]
Side effects in initialization of unused variable moduleExports [./~/lodash/index.js:266,0]
Condition always true [./~/react-sparklines/build/index.js:2,0]
Dropping unreachable code [./~/react-sparklines/build/index.js:4,0]
Side effects in initialization of unused variable width [./~/react-sparklines/build/index.js:1511,0]
Side effects in initialization of unused variable width [./~/react-sparklines/build/index.js:1626,0]
Side effects in initialization of unused variable width [./~/react-sparklines/build/index.js:1843,0]
Side effects in initialization of unused variable height [./~/react-sparklines/build/index.js:1844,0]
Condition always true [./~/react/lib/ReactDOMComponent.js:907,0]
Dropping side-effect-free statement [./~/react/lib/ReactEventListener.js:72,0]
Dropping unused function handleTopLevelWithPath [./~/react/lib/ReactEventListener.js:98,0]
Dropping unused variable DOCUMENT_FRAGMENT_NODE_TYPE [./~/react/lib/ReactEventListener.js:26,0]
Condition always true [./~/symbol-observable/lib/index.js:22,1]
Dropping unreachable code [./~/symbol-observable/lib/index.js:25,0]
up to date in 15.615s
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Pruning devDependencies
Skipping because npm 5.6.0 sometimes fails when running 'npm prune' due to a known issue
https://github.com/npm/npm/issues/19356
You can silence this warning by updating to at least npm 5.7.1 in your package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-an-npm-version
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 31.8M
-----> Launching...
Released v8
https://weatherapp101.herokuapp.com/ deployed to Heroku
这是我的package.json:
{
"name": "redux-simple-starter",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"main": "index.js",
"repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"postinstall": "webpack -p",
"start": "node server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.18.0",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "4.3.0",
"react-router": "^2.0.1",
"react-sparklines": "^1.6.0",
"redux": "^3.0.4",
"redux-promise": "^0.5.3"
}
}
这是webpack.config.js:
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};