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

Question

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

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

然后我在浏览器中导航到 heroku 应用程序，在那里我只得到一个空白的白页，这是一个索引文件，我手动从构建目录复制到 public。我不确定索引文件是否正确，但我只是想确保我能命中某些东西。

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

我的配置如下:

应用的基本结构

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

简介

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

构建包

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 从 /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 钩子(Hook)一样。

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