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

Posted 2023-03-07

【中文标题】在 Heroku 上使用 Rails API 部署 Create-React-App

【英文标题】：Deploying Create-React-App with Rails API on Heroku

【发布时间】：2017-06-06 19:18:15

【问题描述】：

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

所以我的过程目前是从客户端目录本地运行npm run build，该目录在客户端中构建一个“构建”目录。然后我提交构建结果并使用git push heroku master 推送到 Heroku。

然后我在浏览器中导航到 heroku 应用程序，在该应用程序中我只得到一个空白页，这是一个索引文件，我手动从构建目录复制到公共目录。我不确定索引文件是否正确，但我只是想确保我能打到什么。

最终，我只想推送 repo，它会自动运行构建。我在各个地方都看到过这个，但是当我在服务器上运行npm run build 时，我总是得到一个 react-script does not exist 错误。

我的配置如下：

应用的基本结构

/app - root of Rails app
/client - root of React app
/public - does display index page

root/client/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/"

root/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"

过程文件

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

构建包

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

【问题讨论】：

您能否更具体地说明您如何通过浏览器访问该应用程序？

我只是使用命令heroku open 打开我的默认浏览器（chrome）到应用程序的url。

【参考方案1】：

我看到您正在使用 create-react-app-buildpack，但我认为您的问题是您的反应应用程序位于子目录中。只有当 heroku 可以在目录中检测到匹配的应用程序并且由于根目录中的 package.json 与 create-react-app-buildpack 不匹配时，Buildpacks 才会执行，我认为它没有被使用。

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

【讨论】：

我安装了 buildpack 子目录，但仍然无法启动 react 应用程序。 rails 应用程序似乎像以前一样工作，但我看不到或不知道如何访问我的 react 应用程序。 rails 应用程序只是一个 api，我想用它来获取数据。我真正想看到的是前端。现在，我在公共文件夹中获得了相同的 index.html 文件。不同的是，我确实看到它构建了 react 应用程序。只是不知道怎么去。

【参考方案2】：

这是因为 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 自动执行，就像普通的 postinstall 钩子一样。

注意cp 命令的路径。您使用 2 个不同的 package.json 文件的设置太复杂了。我建议在根目录中使用单个 package.json 并相应地设置所有路径。

【参考方案3】：

所以我终于找到了我正在寻找的解决方案。我的代码库具有以下结构。

app/
client/
public/
...

我目前正在按照上面的@yeasayer 建议构建我的客户端解决方案。在构建我的 react 项目并将其部署到我的 rails 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 应用。我不确定为什么其他人不使用这种结构而不是使用 react_on_rails 或其他插件来实现相同的结果。这种设置比处理这些其他解决方案要简单得多，但我想听听关于为什么这个解决方案不是一个好主意的任何想法。