使用单独的前端/后端服务器将应用程序部署到Heroku

我目前正在尝试将应用程序部署到单个Heroku dyno，它不使用create-react-app但是有一个用于webpack的快速服务器和一个rails API后端。

我遇到了快速代理我的API请求（但在本地工作正常）的问题，这是Heroku日志的错误：

2017-12-03T16:00:18.436271+00:00 app[web.1]: Error: connect ECONNREFUSED 127.0.0.1:3005
2017-12-03T16:00:18.436308+00:00 app[web.1]:     at Object.exports._errnoException (util.js:1018:11)
2017-12-03T16:00:18.436309+00:00 app[web.1]:     at exports._exceptionWithHostPort (util.js:1041:20)
2017-12-03T16:00:18.436311+00:00 app[web.1]:     at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1090:14)

我确保将节点和轨道的buildpack用作described here。

这是相关代码：

Procfile

web: npm run start:prod
api: bundle exec rails server --port=3005 --environment=production -b 127.0.0.1

的package.json

{
  "name": "foo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "proxy": "http://127.0.0.1:3005/",
  "engines": {
    "node": "6.10.2",
    "yarn": "0.24.5",
    "npm": "5.5.1"
  },
  "scripts": {
    "start": "NODE_ENV=development node server",
    "start:prod": "yarn run build && NODE_ENV=production node server",
    "build": "NODE_ENV=production webpack -p --config ./webpack.prod.js --progress --colors --display-error-details"
  },

server.js

const express = require('express');
const proxy = require('express-http-proxy');

const app = express();

const port = process.env.PORT || 3000;
const path = require('path')
const webpack = require('webpack')

const proxyHost = '127.0.0.1';
const proxyPort = '3005';

app.use('/api', proxy(`${proxyHost}:${proxyPort}`));

const isProd = process.env.NODE_ENV === 'production'

let config

if (isProd) {
  config = require('./webpack.prod.js')
} else {
  config = require('./webpack.dev.js')
}

const publicPath = config.output.publicPath || '/';
const outputPath = config.output.path || path.resolve(process.cwd(), 'dist');

if (!isProd) {
  console.log('Development env detected: Initializing hot reloading')
  const webpackDevMiddleware = require('webpack-dev-middleware')
  const webpackHotMiddleware = require('webpack-hot-middleware')
  const compiler = webpack(config)

  app.use(webpackHotMiddleware(compiler, {
    log: console.log,
    path: '/__webpack_hmr'
  }))

  app.use(webpackDevMiddleware(compiler, {
    entry: config.entry,
    publicPath: config.output.publicPath,
    stats: {
      colors: true
    }
  }))

  app.use('*', function (req, res, next) {
    const filename = path.join(compiler.outputPath, 'index.html')
    compiler.outputFileSystem.readFile(filename, (err, result) => {
      if (err) {
        return next(err)
      }
      res.set('content-type', 'text/html')
      res.send(result)
      res.end()
    })
  })

} else {
  app.use(publicPath, express.static(outputPath));
  app.get('*', (req, res) => res.sendFile(path.resolve(outputPath, 'index.html')));
}

app.listen(port, (err) => {
  if (err) {
    console.log(err.message)
  } else {
    console.log(`Server Started at port ${port}`);
  }
});

任何帮助将不胜感激！

编辑解决方案

所以我能够根据下面接受的答案找到一个解决方案，但我想我会更新帖子来详细说明。

正如在答案中所指出的，似乎Heroku在Procfile中使用了不同的dyno每个进程，这就是为什么前端/后端服务器最初无法相互通信的原因。

为了避免这种情况，我只是创建了一个虚拟procfile，它使用foreman来初始化真正的procfile：

Procfile（Heroku使用的假人）

web: foreman start -f StartProcfile

StartProcfile（实际进程）

web: npm run start:prod
api: bundle exec rails server --port=3005 --environment=production

应该注意的是，在我的情况下，我遇到了超出dyno内存上限和超过60秒绑定到指定的heroku端口的其他问题。事实证明这是因为我将构建步骤作为web过程的一部分，当我应该在postinstall中使用package.json钩子时。

的package.json

  "scripts": {
    "start": "NODE_ENV=development node server",
    "start:prod": "NODE_ENV=production node server --optimize_for_size --max_old_space_size=460 --gc_interval=100",
    "build": "NODE_ENV=production webpack -p --config ./webpack.prod.js --progress --colors --display-error-details",
    "postinstall": "npm run build"
  },

Procfile中的每一行最终都在一个单独的dyno中运行。如果你需要在同一个dyno上运行这两个进程（在本例中为web），那么你需要重新定义web以调用类似于启动节点服务器的shell脚本，然后启动rails服务器，或让节点启动进程启动rails服务器。

完全披露，我从未真正做过你正在尝试的事情。即使在进行上述更改后，将rails API服务器绑定到端口3005也可能无法正常工作。但是，当然，127.0.0.1过程中的web永远不会在127.0.0.1过程中成为api，因为它们总是运行在不同的dynos上。希望这些信息有所帮助。