Question

我在让我的react / rails应用程序在heroku上工作时遇到问题。我已设法部署并启动了rails服务器，但我没有看到我的反应应用程序。我觉得我很接近，但无法弄清楚缺少什么。

因此，我的流程目前是从客户端目录本地运行npm run build，该目录构建了一个＆＃39; build＆＃39;客户端目录。然后我提交构建结果并使用git push heroku master推送到Heroku。

然后我在浏览器中导航到heroku应用程序，我只获得一个空白页面，这是我手动从build dir复制到public的索引文件。我不确定索引文件是否正确，但我只是想确保我可以点击某些内容。

最终，我想推送回购并自动运行构建。我已经看到这提到了各种各样的地方，但是当我在服务器上运行npm run build时，我总是得到一个反应脚本不存在错误。

我的配置如下：

app的基本结构

/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

配置/ 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

这是因为Rails正在从index.html提供静态文件（包括/public）。但您的React应用包位于/client/build内。构建之后，您需要将这些文件复制回Rails文件夹。最简单的方法是向package.json添加一些脚本：

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

安装所有依赖项后，Heroku会自动执行

heroku-postbuild，就像普通postinstall挂钩一样。

小心cp命令的路径。您使用2个不同package.json文件的设置过于复杂。我建议在内部使用单个package.json并相应地设置所有路径。

Answer 2

所以我终于找到了我想要的解决方案。我的代码库有以下结构。

app/
client/
public/
...

我目前正在构建我的客户端解决方案，如上所述@yeasayer。在我的rails api中构建并将我的react项目部署到公共文件夹之后，我在路由中添加了以下内容：

... # 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 3

我看到你正在使用create-react-app-buildpack，但我认为你的问题是你的反应应用程序在一个子目录中。如果heroku可以在目录中检测到匹配的应用程序，并且因为你的root中的package.json与create-react-app-buildpack不匹配，那么只会执行buildpacks我不认为它正被使用。

您可能会尝试删除root package.json并使用此sub directory buildpack，以便您可以指定每个buildpack目录的位置

在Heroku上使用Rails API部署Create-React-App

3 个答案: