在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 

Solutions Collecting From Web of "在Heroku上使用Rails API部署Create-React-App"

这是因为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不是一个好主意的想法。