1. дома
  2. Вопрос и ответ
  3. Как развернуть приложение webpack на heroku?

Как развернуть приложение webpack на heroku?

2017-01-11 6 views
4

У меня есть приложение для узла. Моя структура проекта что-то подобное:Как развернуть приложение webpack на heroku?

myApp 
    |_ dist 
    |_ node_modules 
    |_ package.json 
    |_ Procfile 
    |_ webpack.config.js 
    |_ src 
     |_ assets 
     |_ styles 
     |_ vendors 
     |_ js 
      |_ app.js

app.js моя точка входа. В моей package.json я определил следующие сценарии:

"scripts": { 
    "build": "webpack -p --progress", 
    "start": "webpack-dev-server" 
}

, а мой PROCFILE

web: webpack-dev-server

Это мой webpack.config.js файл:

var path = require("path"); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 

module.exports = { 
    entry: path.resolve(__dirname, './src/js/app.js'), 

    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: 'bundle.js' 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015'] 
     } 
     }, 
     { 
     test: /\.less$/, 
     loader: "style!css!less" 
     }, 
     { 
     test: /\.(jpg|png|gif)$/, 
     include: /img/, 
     loader: 'url' 
     }, 
    ]}, 

    plugins: [ 
     new CopyWebpackPlugin([ 
     { from: './src/index.html' } 
     ]), 
     new CopyWebpackPlugin([ 
     { from: './src/vendors/vendor.min.js' } 
     ]), 
     new CopyWebpackPlugin([ 
     { from: './src/assets', to: 'assets' } 
     ]) 
    ], 

    devServer: { 
     contentBase: path.resolve(__dirname, 'dist'), 
     port: 5000, 
     headers: { 
     "Access-Control-Allow-Origin": "*" 
     } 
    } 
};

Если я запускаю приложение локально, все работает нормально. Но после того, как я нажимаю свое приложение на герою, набрав git push heroku master, развертывание происходит нормально, но я не могу открыть приложение через heroku open, я получаю сообщение об ошибке. На самом деле, я не знаю, как запустить мое приложение на героку.

Цените любую помощь.

Вот мои журналы

2017-01-11T13:27:35.645636+00:00 app[web.1]: npm ERR! 
2017-01-11T13:27:35.645849+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script 'webpack-dev-server'. 
2017-01-11T13:27:35.646053+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed. 
2017-01-11T13:27:35.646249+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the pegaladrao package, 
2017-01-11T13:27:35.646475+00:00 app[web.1]: npm ERR! not with npm itself. 
2017-01-11T13:27:35.646685+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system: 
2017-01-11T13:27:35.646899+00:00 app[web.1]: npm ERR!  webpack-dev-server 
2017-01-11T13:27:35.647130+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with: 
2017-01-11T13:27:35.647532+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via: 
2017-01-11T13:27:35.647369+00:00 app[web.1]: npm ERR!  npm bugs pegaladrao 
2017-01-11T13:27:35.647742+00:00 app[web.1]: npm ERR!  npm owner ls pegaladrao 
2017-01-11T13:27:35.647942+00:00 app[web.1]: npm ERR! There is likely additional logging output above. 
2017-01-11T13:27:35.652129+00:00 app[web.1]: 
2017-01-11T13:27:35.652339+00:00 app[web.1]: npm ERR! Please include the following file with any support request: 
2017-01-11T13:27:35.652442+00:00 app[web.1]: npm ERR!  /app/npm-debug.log 
2017-01-11T13:27:35.725498+00:00 heroku[web.1]: State changed from starting to crashed 
2017-01-11T13:27:35.714352+00:00 heroku[web.1]: Process exited with status 1 
2017-01-11T13:37:15.944416+00:00 heroku[web.1]: State changed from crashed to starting 
2017-01-11T13:37:18.456711+00:00 heroku[web.1]: Starting process with command `npm start` 
2017-01-11T13:37:21.392243+00:00 app[web.1]: 
2017-01-11T13:37:21.392258+00:00 app[web.1]: > [email protected] start /app 
2017-01-11T13:37:21.392259+00:00 app[web.1]: > webpack-dev-server 
2017-01-11T13:37:21.392260+00:00 app[web.1]: 
2017-01-11T13:37:21.400189+00:00 app[web.1]: sh: 1: webpack-dev-server: not found 
2017-01-11T13:37:21.406100+00:00 app[web.1]: 
2017-01-11T13:37:21.414419+00:00 app[web.1]: npm ERR! Linux 3.13.0-105-generic 
2017-01-11T13:37:21.414827+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start" 
2017-01-11T13:37:21.415115+00:00 app[web.1]: npm ERR! node v6.2.1 
2017-01-11T13:37:21.415585+00:00 app[web.1]: npm ERR! npm v3.9.3 
2017-01-11T13:37:21.415878+00:00 app[web.1]: npm ERR! file sh 
2017-01-11T13:37:21.416076+00:00 app[web.1]: npm ERR! code ELIFECYCLE 
2017-01-11T13:37:21.416260+00:00 app[web.1]: npm ERR! errno ENOENT 
2017-01-11T13:37:21.416441+00:00 app[web.1]: npm ERR! syscall spawn 
2017-01-11T13:37:21.416605+00:00 app[web.1]: npm ERR! [email protected] start: `webpack-dev-server` 
2017-01-11T13:37:21.416753+00:00 app[web.1]: npm ERR! spawn ENOENT 
2017-01-11T13:37:21.416905+00:00 app[web.1]: npm ERR! 
2017-01-11T13:37:21.417068+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script 'webpack-dev-server'. 
2017-01-11T13:37:21.417220+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed. 
2017-01-11T13:37:21.417365+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the pegaladrao package, 
2017-01-11T13:37:21.417517+00:00 app[web.1]: npm ERR! not with npm itself. 
2017-01-11T13:37:21.417661+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system: 
2017-01-11T13:37:21.417804+00:00 app[web.1]: npm ERR!  webpack-dev-server 
2017-01-11T13:37:21.417948+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with: 
2017-01-11T13:37:21.418094+00:00 app[web.1]: npm ERR!  npm bugs pegaladrao 
2017-01-11T13:37:21.418244+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via: 
2017-01-11T13:37:21.418407+00:00 app[web.1]: npm ERR!  npm owner ls pegaladrao 
2017-01-11T13:37:21.422856+00:00 app[web.1]: 
2017-01-11T13:37:21.423142+00:00 app[web.1]: npm ERR!  /app/npm-debug.log 
2017-01-11T13:37:21.423030+00:00 app[web.1]: npm ERR! Please include the following file with any support request: 
2017-01-11T13:37:21.418591+00:00 app[web.1]: npm ERR! There is likely additional logging output above. 
2017-01-11T13:37:21.512091+00:00 heroku[web.1]: State changed from starting to crashed 
2017-01-11T13:37:21.499631+00:00 heroku[web.1]: Process exited with status 1 
2017-01-11T13:40:32.051966+00:00 heroku[slug-compiler]: Slug compilation started 
2017-01-11T13:40:32.051974+00:00 heroku[slug-compiler]: Slug compilation finished 
2017-01-11T13:40:31.858391+00:00 app[api]: Deploy da11e80 by user [email protected] 
2017-01-11T13:40:31.858391+00:00 app[api]: Release v10 created by user [email protected] 
2017-01-11T13:40:32.191176+00:00 heroku[web.1]: State changed from crashed to starting 
2017-01-11T13:40:34.783548+00:00 heroku[web.1]: Starting process with command `webpack-dev-server` 
2017-01-11T13:40:37.475574+00:00 app[web.1]: bash: webpack-dev-server: command not found 
2017-01-11T13:40:37.575920+00:00 heroku[web.1]: State changed from starting to crashed 
2017-01-11T13:40:37.585438+00:00 heroku[web.1]: Process exited with status 127 
2017-01-11T13:42:00.220939+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=game-pega-ladrao.herokuapp.com request_id=e88c7f11-ec3d-4a9c-bce0-e116bb692f61 fwd="177.135.168.30" dyno= connect= service= status=503 bytes= 
2017-01-11T13:42:00.744864+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=game-pega-ladrao.herokuapp.com request_id=9e1e96b3-15a8-4915-9d58-008b9edcaa15 fwd="177.135.168.30" dyno= connect= service= status=503 bytes= 
2017-01-11T13:49:22.413923+00:00 heroku[web.1]: State changed from crashed to starting 
2017-01-11T13:49:24.395890+00:00 heroku[web.1]: Starting process with command `webpack-dev-server` 
2017-01-11T13:49:26.583343+00:00 heroku[web.1]: Process exited with status 127 
2017-01-11T13:49:26.525449+00:00 app[web.1]: bash: webpack-dev-server: command not found 
2017-01-11T13:49:26.600280+00:00 heroku[web.1]: State changed from starting to crashed 
2017-01-11T14:14:36.683508+00:00 heroku[web.1]: State changed from crashed to starting 
2017-01-11T14:14:39.320308+00:00 heroku[web.1]: Starting process with command `webpack-dev-server` 
2017-01-11T14:14:41.990804+00:00 app[web.1]: bash: webpack-dev-server: command not found 
2017-01-11T14:14:42.107745+00:00 heroku[web.1]: State changed from starting to crashed 
2017-01-11T14:14:42.099658+00:00 heroku[web.1]: Process exited with status 127 
2017-01-11T14:56:53.024731+00:00 heroku[web.1]: State changed from crashed to starting 
2017-01-11T14:56:55.165335+00:00 heroku[web.1]: Starting process with command `webpack-dev-server` 
2017-01-11T14:56:57.911706+00:00 app[web.1]: bash: webpack-dev-server: command not found 
2017-01-11T14:56:57.996355+00:00 heroku[web.1]: Process exited with status 127 
2017-01-11T14:56:57.988466+00:00 heroku[web.1]: State changed from starting to crashed 
2017-01-11T16:27:07.649780+00:00 heroku[web.1]: State changed from crashed to starting 
2017-01-11T16:27:09.953062+00:00 heroku[web.1]: Starting process with command `webpack-dev-server` 
2017-01-11T16:27:11.936009+00:00 heroku[web.1]: Process exited with status 127 
2017-01-11T16:27:11.888475+00:00 app[web.1]: bash: webpack-dev-server: command not found 
2017-01-11T16:27:11.946530+00:00 heroku[web.1]: State changed from starting to crashed 
2017-01-11T18:25:46.669394+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=game-pega-ladrao.herokuapp.com request_id=74811720-1a10-4b97-9842-da6d0010addb fwd="177.135.168.30" dyno= connect= service= status=503 bytes= 
2017-01-11T18:25:47.200025+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=game-pega-ladrao.herokuapp.com request_id=fc371066-439b-4577-96a0-50a939b1d89b fwd="177.135.168.30" dyno= connect= service= status=503 bytes= 
2017-01-11T18:28:28.039141+00:00 heroku[slug-compiler]: Slug compilation started 
2017-01-11T18:28:28.039146+00:00 heroku[slug-compiler]: Slug compilation finished 
2017-01-11T18:28:27.876738+00:00 app[api]: Deploy 78b5ba3 by user [email protected] 
2017-01-11T18:28:27.876738+00:00 app[api]: Release v11 created by user [email protected] 
2017-01-11T18:28:28.173651+00:00 heroku[web.1]: State changed from crashed to starting 
2017-01-11T18:28:31.152586+00:00 heroku[web.1]: Starting process with command `webpack-dev-server` 
2017-01-11T18:28:33.608949+00:00 heroku[web.1]: State changed from starting to crashed 
2017-01-11T18:28:33.473917+00:00 app[web.1]: bash: webpack-dev-server: command not found 
2017-01-11T18:28:33.610173+00:00 heroku[web.1]: State changed from crashed to starting 
2017-01-11T18:28:33.571897+00:00 heroku[web.1]: Process exited with status 127 
2017-01-11T18:28:35.516449+00:00 heroku[web.1]: Starting process with command `webpack-dev-server` 
2017-01-11T18:28:37.581803+00:00 heroku[web.1]: Process exited with status 127 
2017-01-11T18:28:37.481833+00:00 app[web.1]: bash: webpack-dev-server: command not found 
2017-01-11T18:28:37.563587+00:00 heroku[web.1]: State changed from starting to crashed 
2017-01-11T18:30:41.542396+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=game-pega-ladrao.herokuapp.com request_id=4105e69a-2dcc-42c8-9e77-46552cd9af42 fwd="177.135.168.30" dyno= connect= service= status=503 bytes= 
2017-01-11T18:30:42.148595+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=game-pega-ladrao.herokuapp.com request_id=f0018d93-366f-435e-86c0-3d0ba9fcf563 fwd="177.135.168.30" dyno= connect= service= status=503 bytes=

Это ответ я получаю после запуска «мерзавец нажимного мастера Heroku» на терминале:

Node.js app detected 
remote: 
remote: -----> Creating runtime environment 
remote:   
remote:  NPM_CONFIG_LOGLEVEL=error 
remote:  NPM_CONFIG_PRODUCTION=true 
remote:  NODE_ENV=production 
remote:  NODE_MODULES_CACHE=true 
remote: 
remote: -----> Installing binaries 
remote:  engines.node (package.json): 6.2.1 
remote:  engines.npm (package.json): 3.9.3 
remote:   
remote:  Downloading and installing node 6.2.1... 
remote:  npm 3.9.3 already installed with node 
remote: 
remote: -----> Restoring cache 
remote:  Loading 2 from cacheDirectories (default): 
remote:  - node_modules 
remote:  - bower_components (not cached - skipping) 
remote: 
remote: -----> Building dependencies 
remote:  Installing node modules (package.json) 
remote: 
remote: -----> Caching build 
remote:  Clearing previous node cache 
remote:  Saving 2 cacheDirectories (default): 
remote:  - node_modules 
remote:  - bower_components (nothing to cache) 
remote: 
remote: -----> Build succeeded! 
remote:  └── (empty) 
remote:   
remote: -----> Discovering process types 
remote:  Procfile declares types -> web 
remote: 
remote: -----> Compressing... 
remote:  Done: 24.5M 
remote: -----> Launching... 
remote:  Released v16 
remote:  https://game-pega-ladrao.herokuapp.com/ deployed to Heroku 
remote: 
remote: Verifying deploy... done.

источник

2017-01-11 Pablo Darde

+0

Какая ошибка вы видите при запуске 'heroku open'? Также: попробуйте поделиться журналами Heroku, чтобы мы могли видеть, какие ошибки происходят. Вы можете найти журналы, запустив 'heroku logs'. – rdegges

+0

Эй, @rdegges, спасибо за помощь. Я поставил журналы на вопрос. Цените. –

+0

Хорошо, просто отправил вам ответ, который должен исправить. – rdegges

ответ

1

После некоторых попыток я смогу развернуть проект webpack на Heroku, используя следующую архитектуру.

  1. Создайте файл конфигурации Webpack, на котором запущен webpack-dev-сервер для разработки.
  2. Создайте файл server.js с помощью экспресс-сервера для развертывания на Heroku.

Я создал немного github repo для тех, кто заинтересован в использовании веб-пакета, развернутого в Heroku.

источник

2017-01-27 20:24:14

0

В журналах Heroku, это выглядит, как если бы причина в том, что все не работает, потому что Heroku пытается запустить команду webpack-dev-server, но не находит ее.

Это обычно означает, что у вас нет webpack в вашем package.json. Если он там не включен, это означает, что Heroku не установит его и не сможет запустить ваш сервер.

Убедитесь, что вы добавить Webpack и любые другие зависимости, что нужно в вашем package.json, а затем повторно развернуть код на Heroku =)

UPDATE: Не забывайте, что вам нужно изменить вашу команду Procfile в скажем: ./node_modules/webpack-dev-server/bin/webpack-dev-server.js вместо webpack-dev-server.

Причина в том, что веб-пакет будет установлен с вашего package.json. И из-за этого, нет возможности сделать «глобальную» установку, чтобы сделать эту команду доступной в глобальном масштабе. Вместо этого вы должны запустить команду из node_modules.

источник

2017-01-11 18:47:53 rdegges

+0

Спасибо @rdegges, но у меня есть 'webpack' и' webpack-dev-server' на моем пакете.json. –

+0

Проблема в том, что ваша команда в procfile является 'webpack-dev-server'. Если вы просто выполняете 'npm install' в своем проекте, тогда как этот WILL будет установлен, он не будет глобальным - так что команда не будет работать. Вам также нужно изменить свой 'Procfile' для запуска'./Node_modules/webpack-dev-server/bin/webpack-dev-server.js' вместо 'webpack-dev-server' (поскольку эта команда ТОЛЬКО работает, если вы устанавливаете глобально, что невозможно из 'package.json'. – rdegges

+0

Хорошо отмечено! Я обновил свой Procfile и мой скрипт запуска npm на. ./node_modules/webpack-dev-server/bin/webpack-dev-server. js вместо webpack-dev-server'. Я также изменил порт devServer на '8080', но он пока не работает. –

Смежные вопросы

 Смежные вопросы