在Heroku上使用Rails API部署Create-React-App
我有一个问题让我的反应/ rails应用程序在heroku上工作。 我设法得到它的部署和rails服务器启动，但我没有看到我的反应的应用程序。 我觉得我很接近，但不知道缺less什么。
所以我的进程目前是从客户端目录在本地运行npm run build ，在客户端build立一个“build”目录。 然后我用git push heroku master来提交构build的结果并推送到Heroku。
然后导航到浏览器中的heroku应用程序，我只是得到一个空白页，这是一个索引文件，我手动从构build目录复制到公共。 我不确定索引文件是否正确，但我只是想确保我可以打一些东西。
最后，我想推回购，并自动运行构build。 我已经看到这个提到的各个地方，但我总是得到一个react-script不存在的错误，当我运行npm run build在服务器上npm run build 。
我的configuration如下：
应用程序的基本结构
/app - root of Rails app /client - root of React app /public - does display index page
根/客户机/的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
configuration/ 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
这是因为Rails从/public提供静态文件（包括index.html ）。 但是您的React应用程序包位于/client/build内部。 生成后，您需要将这些文件复制回Rails文件夹。 最简单的方法是将一些脚本添加到你的package.json ：
"scripts": { ... "deploy": "cp -a build/. public", "heroku-postbuild": "npm run build && npm run deploy" },
heroku-postbuild所有的依赖关系后，Heroku会自动执行heroku-postbuild ，就像普通的postinstall挂钩一样。
注意cp命令的path。 2个不同的package.json文件的设置过于复杂。 我build议在root中使用一个package.json ，并相应地设置所有的path。
我看到你正在使用create-react-app-buildpack，但我认为你的问题是你的反应应用程序在一个子目录中。 如果heroku可以检测到目录中的匹配应用程序，并且自己的根目录下的package.json不匹配，那么Buildpack只会被执行。我不认为它正在被使用。
你可能会尝试的是删除根package.json和使用这个子目录buildpack，所以你可以指定每个buildpack目录的位置
所以我终于find了我正在寻找的解决scheme。 我的代码库有以下结构。
app/ client/ public/ ...
我目前正在build立我的客户端解决scheme，如上面build议的@yeasayer。 在我的rails api中构build并部署我的反应项目到公用文件夹之后，我在路由中添加了以下内容：
... # api routes ... get '/*path', to: 'react#index'
然后我创build一个react_controller并添加了以下内容：
class ReactController < ActionController::Base def index render :file => 'public/index.html', :layout => false end end
现在任何没有被api路由捕获的路由，都会呈现反应的应用程序。 我不确定为什么其他人不使用react_on_rails或其他插件来实现相同的结果。 这个设置比处理这些其他的解决scheme简单得多，但我想听听有关为什么这个解决scheme不是一个好主意的想法。