node.js - Express/Webpack 在 dokku 和 heroku 上失败

Question

简介:

build: npm run prod
web: nodemon server.js

包.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'
      }
    ]
  }
}

服务器.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)
})

错误:

Dokku，502 错误网关:

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 它会默默地失败，就好像我试图访问目录一样它只是“创造”它并不存在。我还尝试手动运行 npm run prod，它成功了，没有创建目录，也没有出现错误。

我相信我的 express 服务器尝试提供的服务也存在问题，我的 bundle.js 被用作 index.html，我不确定如果这是一个问题，因为没有 bundle.js 可以提供服务，或者即使有，app.get('*') 配置错误并且是盲目地提供 index.html。

我只是想要一个静态的 index.html 文件来为我的 bundle.js 服务，这样 React 就可以接管并做它的事情，这对于 heroku 似乎是不可能的，所以我试图在两者之间插入一个快速服务器，任何想法？

Answer 1

我在我的 express 服务器中使用了一个与您正在使用的类似的 block :

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

在生产中，我的 bundle.js服务器上存在文件，但此 block 导致浏览器解释 bundle.js 的内容文件是 index.html 的内容文件，其中存在以 < 开头的 HTML 代码，因此出现错误。

对我来说，通过删除 app.get('*') 在生产中解决了这个错误堵塞。我想我首先需要这个 block 来锚定相对于根 url 的请求 url，而不是相对于当前页面的任何 url 路径。看来这对我来说不再是个问题，可能是因为我在我所有的 ajax api 请求 url 前面包含了前导“/”。

此错误在生产环境中出现，但在开发环境中未出现，可能是因为 webpack 开发服务器不使用实际的包文件，而是将包保存在内存中。但是在生产中使用了实际的捆绑文件。

注意:为了让我的配置正常工作，我还必须确保 express 可以在适当的位置将包识别为静态文件:

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

'/dist',部分是关键，否则包显示在根路径中，而不是我的 webpack 配置输出指定的路径。