在Heroku上部署AngularJs + webpack + gulp

Question

我有一個帶有webpack和gulp的AngularJs應用程序。它建立在https://github.com/AngularClass/NG6-starter之上，我想將它部署在Heroku.com上。從生成日誌看起來一切都很好，當我嘗試訪問Web應用程序，我收到以下消息：

從Heroku的應用程序日誌：

2016-07-25T11：48： 27.455165 + 00：00 app [web.1]：npm ERR！或者如果沒有，您可以通過以下方式獲取他們的信息：

2016-07-25T11：48：27.455164 + 00：00 app [web.1]：npm ERR！ NPM錯誤NG6 - 起動機

2016-07-25T11：48：27.462393 + 00：00應用程式[web.1]：

2016-07-25T11：48：27.462658 + 00：00應用程式[幅。 1]：npm ERR！請在任何支持請求中包含以下文件：

2016-07-25T11：48：27.455166 + 00：00 app [web.1]：npm ERR！ npm owner ls ng6-starter

2016-07-25T11：48：27.455163 + 00：00 app [web.1]：npm ERR！ gulp服務

2016-07-25T11：50：18.830449 + 00：00 heroku [router]：at = error code = H10 desc =「App crashed」method = GET path =「/」host = someapp.herokuapp。 com request_id = x fwd =「0.0.0.0」dyno = connect = service = status = 503 bytes =

2016-07-25T11：50：19.372880 + 00：00 heroku [router]：at = error code = H10 desc =「App crashed」method = GET path =「/ favicon.ico」host = someapp.herokuapp.com request_id = x fwd =「0.0.0.0」dyno = connect = service = status = 503 bytes =

在我的package.json文件中，我添加了

"scripts": { 
    "test": "karma start", 
    "build": "gulp webpack", 
    "start": "gulp" 
} 

從Heroku的構建日誌：

Node.js app detected 
    Creating runtime environment 

    NPM_CONFIG_LOGLEVEL=error 
    NPM_CONFIG_PRODUCTION=true 
    NODE_ENV=production 
    NODE_MODULES_CACHE=true 
    Installing binaries 
    engines.node (package.json): unspecified 
    engines.npm (package.json): unspecified (use default) 

    Resolving node version (latest stable) via semver.io... 
    Downloading and installing node 5.11.1... 
    Using default npm version: 3.8.6 
    Restoring cache 
    Loading 2 from cacheDirectories (default): 
    - node_modules 
    - bower_components (not cached - skipping) 
    Building dependencies 
    Installing node modules (package.json) 
    Caching build 
    Clearing previous node cache 
    Saving 2 cacheDirectories (default): 
    - node_modules 
    - bower_components (nothing to cache) 
    Build succeeded! 
    ├── angular@1.5.8 
    ├── angular-animate@1.5.8 
    ├── angular-aria@1.5.8 
    ├── angular-file-upload@2.3.4 
    ├── angular-material@1.1.0-rc.5 
    ├── angular-messages@1.5.8 
    ├── angular-sanitize@1.5.8 
    ├── angular-translate@2.11.1 
    ├── angular-ui-router@0.2.18 
    ├── gulp@3.9.1 
    ├── json-loader@0.5.4 
    ├── lodash@3.10.1 
    ├── material-design-icons@2.2.3 
    ├── moment@2.14.1 
    ├── node-uuid@1.4.7 
    ├── normalize.css@3.0.3 
    ├── objectpath@1.2.1 
    ├── promise-polyfill@5.2.1 
    └── tv4@1.2.7 

    Discovering process types 
    Procfile declares types  -> (none) 
    Default types for buildpack -> web 
    Compressing... 
    Done: 50.8M 
    Launching... 
    Released v12 
    https://someapp.herokuapp.com/ deployed to Heroku 

我有點丟在這裏，任何幫助是極大的appriciated。

Answer 1

在你還沒有安裝webpack模塊這種情況下，它缺少的依賴它不允許運行gulp webpack構建腳本

，所以你需要手動安裝在Heroku上依賴它會給終端下面的命令

heroku run bash 

npm install webpack 

這將增加的WebPack模塊，並嘗試運行你的應用程序

Answer 2

我剛剛部署上的WebPack（不咕嚕）的Heroku angularjs的應用程序，但錯誤看起來相似。作爲替代方案，您只需要將webpack作爲您的依賴項，而不是在package.json中的devdependencies。

how to deploy angularjs on heroku with webpack only

{ 
    "name": "", 
    "version": "1.0.0", 
    "description": "github call", 
    "main": "./src/bundle.js", 
    "engines": { 
    "node": "6.4.0" 
    }, 
    "scripts": { 
    "dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js", 
    "deploy:WINDOWS": "set NODE_ENV=production && webpack -p && node ./src/server.js", 
    "deploy": "NODE_ENV=production webpack -p && node ./src/server.js", 
    "start": "node ./src/server.js", 
    "postinstall": "NODE_ENV=production webpack -p" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "angular": "^1.5.8", 
    "angular-route": "^1.5.8", 
    "angular-sanitize": "^1.5.8", 
    "express": "^4.14.0", 
    "webpack": "^1.13.2", 
    "markdown": "^0.5.0" 
    }, 
    "devDependencies": { 
    "babel-angular": "0.0.5", 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.14.0", 
    "css-loader": "^0.25.0", 
    "style-loader": "^0.13.1", 
    "webpack-dev-server": "^1.16.1" 
    } 
} 

編輯：我列入反饋爲您引用的package.json，謝謝。

記下依賴關係列表。當你把engine放在版本的後面時，你可以指出你想安裝哪個版本的節點。同時，express需要呈現你的角度的應用程序。

postinstall和start是爲heroku部署的關鍵命令。 Heroku將首先運行postinstallstart

webpack被列爲依賴關係NOT devDependencies。