Экспресс/Webpack неудачу на Докку и Heroku

Question

PROCFILE:

build: npm run prod 
web: nodemon server.js 

Package.json

"scripts": { 
    "prod": "NODE_ENV=production webpack -p --config ./webpack.prod.config.js --progress --optimize-dupe" 
    } 

Webpack.prod.config:

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: null, 
    entry: [ 
    './assets/js/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'public/dist/'), 
    filename: 'bundle.js', 
    publicPath: '/public/' 
    }, 
    plugins: [ 
    new webpack.optimize.UglifyJsPlugin({ 
     minimize: true, 
     compress: { 
     warnings: false 
     } 
    }), 
    new webpack.DefinePlugin({ 
     'process.env': { NODE_ENV: '"production"' } 
    }) 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     include: path.join(__dirname, 'assets/js'), 
     exclude: path.join(__dirname, 'node_modules/') 
     }, 
     { 
     test: /\.css$/, 
     include: path.join(__dirname, 'assets/css'), 
     loader: 'style-loader!css-loader' 
     } 
    ] 
    } 
} 

Server.js:

var path = require('path'), 
    express = require('express'), 
    app = express(), 
    port = process.env.PORT || 5000 

app.use(express.static(path.join(__dirname, 'public'))) 

app.get('*', function(req, res) { 
    res.sendFile(path.join(__dirname + '/index.html')) 
}) 

var server = app.listen(port, function() { 
    var host = server.address().address 
    console.log('Listening at http://%s:%s', host, port) 
}) 

Ошибки:

Докку, 502 Bad Gateway:

2016/03/03 22:43:12 [error] 5419#0: *303 connect() failed (111: Connection refused) while connecting to upstream, client: 185.49.14.190, server: xxx.xxx, request: "GET http://testp3.pospr.waw.pl/testproxy.php HTTP/1.1", upstream: "http://172.17.0.4:5000/testproxy.php", host: "testp3.pospr.waw.pl" 
2016/03/03 23:54:58 [error] 5419#0: *305 connect() failed (111: Connection refused) while connecting to upstream, client: 185.49.14.190, server: xxx.xxx, request: "GET http://testp4.pospr.waw.pl/testproxy.php HTTP/1.1", upstream: "http://172.17.0.4:5000/testproxy.php", host: "testp4.pospr.waw.pl" 
2016/03/04 00:55:35 [error] 5419#0: *307 connect() failed (111: Connection refused) while connecting to upstream, client: 207.46.13.22, server: xxx.xxx, request: "GET /robots.txt HTTP/1.1", upstream: "http://172.17.0.4:5000/robots.txt", host: "artempixel.com.br" 
2016/03/04 00:55:41 [error] 5419#0: *309 connect() failed (111: Connection refused) while connecting to upstream, client: 207.46.13.22, server: xxx.xxx, request: "GET/HTTP/1.1", upstream: "http://172.17.0.4:5000/", host: "artempixel.com.br" 

Там нет ошибок из бревен Heroku, всего на интерфейсе:

Uncaught SyntaxError: Unexpected token < - bundle.js:1 

npm run prod должны создать файл в /public/dist/, как он работает на моей локальной машине, но этот каталог не присутствует ни на экземпляре heroku, ни на экземпляре dokku, не отображается ошибка, что он не смог его создать, но если я попробую heroku run --app app mkdir public/dist, он будет сильным ently fail, как будто я пытаюсь получить доступ к каталогу, который он только «создал», он не существует. Я также попытался вручную запустить npm run prod, он успешно, ни один каталог не создан, ошибки не отображаются.

Я считаю, что это также вопрос с тем, что мой экспресс-сервер пытается служить, моя bundle.js в настоящее время служит в качестве index.html, я не уверен, если это проблема с там быть не bundle.js служить, или, даже если был app.get('*') был неправильно настроен и слушает index.html в порядке.

Я просто хочу, чтобы статический файл index.html служил для моего пакета.js, так что React может взять на себя и сделать свое дело, это не кажется возможным с heroku, поэтому я попытался вклинивать экспресс-сервер между ними, есть идеи?

Answer 1

Несколько вопросов:

Я не использовал postinstall в моей package.json, вместо этого я пытался добиться этого с помощью Procfile, теперь, когда я сменил, то расстояние создается файл должным образом.

В index.html, обслуживающий bundle.js Я искал: /public/dist/bundle.js, который выразил бы перевести на: /public/public/dist/bundle.js.

Настройте новый экземпляр докку, как я, благодаря отладке удалось завинтить контейнер.

Answer 2

я использовал блок в моем экспресс-сервер, похожий на тот, который вы используете:

app.get('*', function(req, res) { 
    res.sendFile(path.join(__dirname + '/index.html')) 
}) 

В производстве, мой bundle.js файл существовал на сервере, но этот блок причинял браузер интерпретировать содержимое файла bundle.js является содержимым файла index.html, в котором существует код HTML, начинающийся с <, следовательно, ошибка.

Для меня ошибка была решена в процессе производства, удалив этот блок app.get('*'). Я думал, что мне нужен блок, в первую очередь, для привязки URL-адресов запроса относительно корневого URL-адреса, а не по отношению к любому URL-адресу текущей страницы. Кажется, это уже не проблема для меня, возможно, потому, что я включил ведущий «/» перед всеми моими URL-адресами запроса ajax api.

Эта ошибка возникла в процессе производства, но не была разработана, вероятно, потому, что сервер webpack dev не использует фактический файл пакета, но содержит пакет в памяти. Но фактический файл связки используется в производстве.

Примечание: чтобы получить мою конфигурацию работать, я должен был убедиться, что экспресс может распознавать сверток как статический файл в соответствующем месте:

app.use('/dist', express.static(path.join(__dirname, 'dist'))); 

'/dist', часть была ключом, иначе пучок показывал в корневом пути, а не в пути, указанном в моем конфигурационном файле webpack.