は、私は私の反応/レールはHerokuの上で動作するアプリ取得問題を抱えているHerokuの

Question

にRailsのAPIと反応するアプリを作成して展開します。私はそれを展開して、レールサーバーを起動することができましたが、私は自分のリアクションアプリを見ていません。私は近くにいるように感じるが、何が欠けているのか分からない。

だから私のプロセスは、クライアントに「ビルド」ディレクトリを構築し、クライアントのディレクトリからローカルnpm run buildを実行するために、現在あります。私はその後、ビルドの結果をコミットし、git push heroku masterでHerokuにプッシュします。

私はその後、私は手動でのみ公開し、ビルドディレクトリからコピーされたインデックスファイルIで空白のページを取得していますブラウザでHerokuのアプリに移動します。私は、インデックスファイルが正しいかどうかはわかりませんが、私は何かを打つことができるかどうかを確かめたいと思っていました。

最終的に、私はレポを押すと、それは自動的にビルドを実行したいと思います。私はこれを様々な場所を参照してください見てきましたが、私はいつも反応スクリプトは、サーバー上でnpm run buildを実行するとエラーが存在しないことがあります。次のように

私の構成は次のとおりです。アプリの

基本構造

​​

ルート/クライアント/ package.json

{ 
    "name": "qc_react", 
    "version": "0.1.0", 
    "private": true, 
    "devDependencies": { 
     "react-scripts": "^0.8.4" 
    }, 
    "dependencies": { 
     "react": "^15.4.1", 
     "react-dom": "^15.4.1", 
     "react-router": "^3.0.0" 
    }, 
    "scripts": { 
     "start": "react-scripts start", 
     "build": "react-scripts build", 
     "test": "react-scripts test --env=jsdom", 
     "eject": "react-scripts eject" 
    }, 
    "cacheDirectories": [ 
     "node_modules", 
     "client/node_modules" 
    ], 
    "proxy": "${API_URL}:${PORT}/v1/" 
} 

ルート/ package.json

{ 
    "name": "web", 
    "version": "1.0.0", 
    "description": "This repo contains a web application codebase. Read instructions on how to install.", 
    "main": "index.js", 
    "scripts": { 
    "build": "cd client" # not sure what to put here but this gets me past build failure 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+ssh://myrepo.git" 
    }, 
    "author": "", 
    "license": "ISC", 
    "homepage": "https://myhomepage#readme" 
} 

Procfile

api: bundle exec puma -C config/puma.rb 

Buildpacks

1. https://github.com/mars/create-react-app-buildpack.git 
2. heroku/ruby 

のconfig/puma.rb

workers Integer(ENV['WEB_CONCURRENCY'] || 2) 
threads_count = Integer(ENV['RAILS_MAX_THREADS'] || 5) 
threads threads_count, threads_count 

preload_app! 

rackup  DefaultRackup 
port  ENV['PORT']  || 3001 
environment ENV['RACK_ENV'] || 'development' 

on_worker_boot do 
    # Worker specific setup for Rails 4.1+ 
    # See: https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#on-worker-boot 
    ActiveRecord::Base.establish_connection 
end 

Answer 1

私は最終的に私が探していた解決策を見つけました。私のコードベースは以下の構造を持っています。

app/ 
client/ 
public/ 
... 

私は現在、前述の@yeasayerとしてクライアントソリューションを構築しています。構築し、私は私のレールAPIのパブリックフォルダにプロジェクトを反応デプロイした後、私は私のルートに次を追加しました：

... # api routes ... 

get '/*path', to: 'react#index' 

は、その後、私はreact_controllerを作成し、以下の内容を追加しました：

今

class ReactController < ActionController::Base 
    def index 
     render :file => 'public/index.html', :layout => false 
    end 
end 

APIルートによってキャッチされなかったルートは、リアクションアプリケーションをレンダリングします。なぜ他の人がreact_on_railsや他のプラグインを使って同じ結果を得るのではなく、この構造を使わないのか分かりません。この設定は、これらの他のソリューションを扱うよりもはるかに簡単ですが、なぜこのソリューションが良いアイデアではないのか考えてみたいと思います。

Answer 2

私はあなたが作成反応するアプリ-buildpackを使用している参照して、私はあなたの問題は、あなたが反応するということだと思いますappはサブディレクトリにあります。 herokuがディレクトリ内の一致するアプリケーションを検出できる場合、ルートのpackage.jsonがcreate-react-app-buildpackと一致しないため、ビルドパックが実行されるだけです。使用されているとは思われません。あなたは、ルートpackage.jsonを削除し、このsub directory buildpackはそうあなたがRailsが/publicから（index.html含む）静的なファイルを提供しているためだ各buildpackディレクトリ

Answer 3

の場所を指定することができます使用されてみてください何

。しかし、あなたのReactアプリバンドルは/client/buildの中にあります。ビルド後、これらのファイルをRailsフォルダにコピーする必要があります。これを行う最も簡単な方法は、あなたのpackage.jsonにいくつかのスクリプトを追加することです：

"scripts": { 
    ... 
    "deploy": "cp -a build/. public", 
    "heroku-postbuild": "npm run build && npm run deploy" 
}, 

heroku-postbuildすべての依存関係がインストールされた後、普通postinstallフックのように、Herokuので自動的に実行されます。

cpコマンドのパスに注意してください。異なる2つのpackage.jsonファイルを使用した設定は複雑すぎます。ルート内に単一のpackage.jsonを使用し、それに応じてすべてのパスを設定することをお勧めします。