node.js - 使用浏览器同步/nodejs“无法打开浏览器”部署到heroku
问题描述
我继承了一个相当简单的代码库,我试图将它部署到 heroku
这是package.json文件的一部分:
...
"engines": {
"node": "8.1.1",
"npm": "5.0.3"
},
"scripts": {
"clean": "rimraf dist/{css/*,js/*,images/*}",
"autoprefixer": "postcss -u autoprefixer -r dist/css/*",
"scss": "node-sass --output-style compressed -o dist/css src/scss",
"lint": "eslint src/js || true",
"lint-scss": "stylelint src/scss/*.scss --syntax scss || true",
"uglify": "mkdirp dist/js -p && uglifyjs src/js/*.js -m -c -o dist/js/main.min.js",
"imagemin": "imagemin src/images/* -o dist/images",
"serve": "browser-sync start --server --files \"dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html\"",
"build:css": "run-s lint-scss scss autoprefixer",
"build:js": "run-s lint uglify",
"build:images": "run-s imagemin",
"build": "run-s build:*",
"watch:css": "onchange \"src/scss\" -- run-s build:css",
"watch:js": "onchange \"src/js\" -- run-s build:js",
"watch:images": "onchange \"src/images\" -- run-s build:images",
"watch": "run-p serve watch:*",
"postinstall": "run-s build watch"
},
"devDependencies": {
"autoprefixer": "^9.0.1",
"browser-sync": "^2.26.3",
"eslint": "^5.2.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"imagemin-cli": "^3.0.0",
"mkdirp": "^0.5.1",
"node-sass": "^4.9.2",
"npm-run-all": "^4.1.3",
"onchange": "^4.1.0",
"postcss-cli": "^6.0.0",
"rimraf": "^2.5.4",
"stylelint": "^9.4.0",
"uglify-es": "^3.3.10"
},
"main": ".eslintrc.js"
}
和我的Procfile:
web: npm run serve
但是当我部署到 heroku - 构建失败并挂起:
remote: [Browsersync] Access URLs:
remote: ---------------------------------------
remote: Local: http://localhost:3000
remote: External: http://172.16.113.170:3000
remote: ---------------------------------------
remote: UI: http://localhost:3001
remote: UI External: http://localhost:3001
remote: ---------------------------------------
remote: [Browsersync] Serving files from: ./
remote: [Browsersync] Watching files...
remote: [Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)
如果需要,我可以提供更多详细信息。
解决方案
我有同样的问题,要解决:
"postinstall": "run-s build watch"
从 package.json中删除。- 通过添加来修改服务脚本
--port $PORT
。它应该看起来像这样"serve": "browser-sync start --server --files --port $PORT \"dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html\"",
- 在文件夹的根目录上创建一个Procfile 。在 Procfile 中包含以下内容:
web: npm run build watch
- 您可以通过命令在本地运行 heroku 应用程序,
heroku local web
或者只是部署它,它应该可以工作。
推荐阅读
- python - 使用来自不同类的函数?
- swift - CollectionView 上的英雄动画库
- tcl - Tcl中N个列表中元素/数字的总和?
- c++ - 确定给定角度绕轴的旋转矩阵
- python-3.x - google vision API 返回空边界框顶点,而不是返回 normalised_vertexes
- mule - 在 munit (mule 4) 中模拟 MQ 连接器导致测试尝试连接到 MQ 并且测试失败
- node.js - 将mysql值从节点js传递到角度
- sql-server - 使用存储过程和 VBA 在 SQL Server 中发送 Excel 表
- android - 如何访问 Kotlin 上其他类的函数?
- git - 关于“git rebase master”步骤、github以及提交移至何处的问题