2017-12-03 7 views
1

私は現在、create-react-appを使用せずwebpackとrails APIバックエンド用の高速サーバを持つ単一のHeroku dynoにアプリケーションをデプロイしようとしています。別のフロントエンド/バックエンドサーバを使ってHerokuにアプリをデプロイ

私は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) 

私は両方のノードに対してbuildpacksを使用してください行われ、レールはdescribed hereです。

server.js

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" 
    }, 

:ここ

は、関連するコードであります3210

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}`); 
    } 
}); 

ご協力いただければ幸いです! SOLUTION

FOR

EDITだから私は、下記の受け入れ答えに基づくソリューションを取得することができましたが、私は詳細を与えるために記事を更新しようと思いました。

答えとして指摘されているように、HerokuはProcfileでプロセスごとに異なるdynoを使用しているように見えます。そのため、もともとフロントエンド/バックエンドサーバーは相互に通信できませんでした。

Procfile(Herokuので使用されるダミー)

web: foreman start -f StartProcfile 

StartProcfile(実際の処理):

は、これを回避するために、私は単に本当のprocfileを初期化するために職長を使用ダミーprocfileを作成しました

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

私の私は、dynoのメモリ上限を超え、割り当てられたherokuポートにバインドするのに60秒以上かかるという追加の問題に遭遇しました。それは、プロセスの一部としてビルドステップを含めることだったので、にpostinstallフックを使用していたはずだったからです。 Procfile

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" 
    }, 
+0

こんにちはクリス、私は好奇心が強いです、なぜあなたは1つではなく2つのフレームワークを使用することにしましたか? RoRやノード上のすべてで何が得られないのでしょうか?あなたは分かち合うの? – Myst

+0

よくRoRは主にバックエンドフレームワークです。静的なWebサイトには最適ですが、Reactのような動的/単一ページアプリケーション向けには設計されていません。私はバックエンドでノードを使用することができましたが、私はRoRにもっと慣れているので、それに固執することに決めました。ありがとう。 – ChrisArmstrong

+0

私はRubyが大好きですが、私は他のオプションのためにRoRを残しました.4.0が出てきたように...私はActiveRecordと移動部品だけを楽しんでいることに気づいたので、余分なレイヤーを取り除き、Rubyの土地に軽いオプションを選びました。しかし、私はまだ人々がRoRにこだわる理由は時々不思議です。 – Myst

答えて

1

各行は別々のダイノで実行してしまいます。両方のプロセスを同じdyno(この場合はweb)で実行する必要がある場合は、webを再定義して、ノードサーバーを起動したシェルスクリプトのようなものを呼び出すか、またはレールサーバーを起動するか、レールサーバー。

私はあなたが試みていることを実際に行ったことはありません。上記の変更を行った後でも、レールAPIサーバをポート3005にバインドすると機能しないことがあります。しかし、webプロセスの127.0.0.1は、常に異なるダイノスで実行されるため、apiプロセスでは127.0.0.1になることはありません。うまくいけば、その情報が役立ちます。

+0

私は 'web:npm run start:prod && bundle exec rails server --port = 3005 --environment = production -b 127.0.0.1'のような何かをすることができますか? – ChrisArmstrong

+0

私はそれを試みたことがありません。しかし、そのコマンドがUNIX端末でローカルに実行されている場合は、Heroku上で実行する必要があります。 – patrickmcgraw

関連する問題