在Heroku上使用Rails API部署Create-React-App [英] Deploying Create-React-App with Rails API on Heroku

问题描述

我在使我的react/rails应用程序在heroku上运行时遇到问题.我已经设法将其部署并启动了Rails服务器，但是我没有看到我的react应用程序.我觉得我已经接近了，但无法弄清缺少的东西.

I'm having an issue getting my react /rails app to work on heroku. I've managed to get it deployed and the rails server starts but I'm not seeing my react app. I feel like I'm close but can't figure out what's missing.

因此，我的当前流程是从客户端目录本地运行 npm run build ，从而在客户端中构建"build"目录.然后，我提交构建结果，并使用 git push heroku master 推送到Heroku.

So my process is currently to run npm run build locally from the client directory which builds a 'build' directory in client. I then commit the results of the build and push to Heroku with git push heroku master.

然后，我在浏览器中导航到heroku应用程序，在该浏览器中，我只得到一个空白的白页，该页是我从构建目录手动复制到公共目录的索引文件.我不确定索引文件是否正确，但我只是想确保可以打到某些东西.

I then navigate to the heroku app in a browser where I'm only getting a blank white page which is an index file the I manually copied from the build dir to public. I'm not sure if the index file is correct but I just wanted to make sure i could hit something.

最终，我只想推送仓库，它会自动运行构建.我看过这里提到过很多地方，但是当我在服务器上运行 npm run build 时，总会收到一个react-script不存在的错误.

Ultimately, I would like to just push the repo and it automatically run the build. I've seen this mentioned various places but I always get a react-script does not exist error when I run npm run build on the server.

我的配置如下:

应用程序的基本结构

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

root/client/package.json

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

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

Procfile

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

Buildpacks

Buildpacks

1. https://github.com/mars/create-react-app-buildpack.git
2. heroku/ruby

config/puma.rb

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

推荐答案

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

So I finally found the solution I was looking for. My code base has the following structure.

app/
client/
public/
...

我目前正在按照上面@yeasayer的建议构建客户端解决方案.在将我的react项目构建并部署到我的rails api中的公用文件夹之后，我将以下内容添加到了我的路由中:

I'm currently building my client solution as @yeasayer suggested above. After building and deploying my react project to the public folder in my rails api, I added the following to my routes:

... # api routes ...

get '/*path', to: 'react#index'

然后我创建了react_controller并添加了以下内容:

Then I created a react_controller and added the following contents:

class ReactController < ActionController::Base
  def index
      render :file => 'public/index.html', :layout => false
  end
end

现在，任何未被api路由捕获的路由都将呈现react应用.我不确定为什么其他人不使用此结构而不是使用react_on_rails或其他插件来达到相同的结果.此设置比处理其他解决方案要简单得多，但是我想听听有关为什么此解决方案不是一个好主意的任何想法.

Now any routes not caught by the api routes, will render the react app. I'm not sure why others don't use this structure instead of using react_on_rails or some other plugin to achieve the same result. This setup is a lot simpler than dealing with these other solutions but I'd like to hear any thoughts on why this solution is not a good idea.

这篇关于在Heroku上使用Rails API部署Create-React-App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！