如何在 Rails 4 后端上使用 Ruby 服务 React 应用程序

How to serve React app with Ruby on Rails 4 backend

我们有一个 Ruby on Rails 全栈应用程序,我们想把它变成一个 ReactJS 应用程序,同时保留后端代码,重做前端代码。

我们的 gemfile 如下所示:

ruby '2.2.1'
source 'https://rubygems.org' do
  gem 'rails', '4.1.14'
  gem 'uglifier', '>= 1.3.0'
  gem 'coffee-rails', '~> 4.0.0'
  gem 'jquery-rails'
  gem 'jquery-ui-rails'
  gem 'jbuilder', '~> 2.0'
  gem 'sdoc', '~> 0.4.0', group: :doc
  gem 'bootstrap-sass'
  gem 'sass-rails', '>= 3.2'
  gem 'autoprefixer-rails'
  gem 'devise'
  gem 'devise_invitable'
  gem 'devise-token_authenticatable'
  gem 'omniauth'
  gem 'omniauth-facebook'
  gem 'omniauth-google-oauth2'
  gem 'figaro'
  gem 'haml-rails'
  gem 'mysql2', '~> 0.3.18'
  gem 'pundit'
  gem 'rolify'
  gem 'simple_form'
  gem 'wicked_pdf'
  gem 'wkhtmltopdf-binary'
  gem 'axlsx', '2.1.0.pre'
  gem 'axlsx_rails'
  gem 'axlsx_styler'
  group :development do
    gem 'better_errors'
    gem 'binding_of_caller', :platforms => [:mri_21]
    gem 'capistrano'
    gem 'capistrano-bundler'
    gem 'capistrano-rails'
    gem 'capistrano-rails-console'
    gem 'capistrano-rvm'
    gem 'capistrano-pending', :require => false
    gem 'capistrano-sidekiq'
    gem 'html2haml'
    gem 'quiet_assets'
    gem 'rails_layout'
    gem 'magic_encoding'
    gem 'annotate'
  end
  group :development, :test do
    gem 'factory_girl_rails'
    gem 'rspec-rails'
    gem 'letter_opener'
    gem 'bullet'
    gem 'timecop'
  end

  group :test do
    gem 'capybara'
    gem 'database_cleaner'
    gem 'faker'
    gem 'launchy'
    gem 'selenium-webdriver'
    gem 'simplecov'
    gem 'codeclimate-test-reporter', '~> 1.0.0'
  end

  gem 'passenger'
  gem 'passenger-rails'
  gem 'execjs'
  gem 'therubyracer', :platforms => :ruby
  gem 'newrelic_rpm'
  gem 'redis-rails'
  gem 'redis-session-store'
  gem 'redis-rack-cache'
  gem 'rack-cache'
  gem 'actionpack-page_caching'
  gem 'lograge'
  gem 'rocket_pants'
  gem 'active_model_serializers', '~>0.8.1'
  gem 'will_paginate'
  gem 'delocalize'
  gem 'phone'
  gem 'paranoia', '~> 2.0'
  gem 'bh', '~> 1.0'
  gem 'sidekiq'
  gem 'counter_culture'
  gem 'rollbar'
  gem 'oj', '~> 2.12.14'
  gem 'sidetiq'
  gem 'enum_help'
  gem 'sinatra', '>= 1.3.0', :require => nil
  gem 'awesome_print', require: 'ap'
  gem 'ngannotate-rails'
end
source 'https://rails-assets.org' do
  gem 'rails-assets-angular', '1.3.12'
  gem 'rails-assets-leaflet'
  gem 'rails-assets-angular-animate'
  gem 'rails-assets-angular-cookies'
  gem 'rails-assets-angular-resource'
  gem 'rails-assets-angular-sanitize'
  gem 'rails-assets-angular-touch'
  gem 'rails-assets-angular-route'
  gem 'rails-assets-angular-moment'
  gem 'rails-assets-angular-ui-date'
  gem 'rails-assets-angular-xeditable'
  gem 'rails-assets-components-font-awesome', '4.2.0'
  gem 'rails-assets-angular-loading-bar'
  gem 'rails-assets-angular-confirm-click'
  gem 'rails-assets-angular-strap'
  gem 'rails-assets-angular-dialog-service'
  gem 'rails-assets-angular-bootstrap'
  gem 'rails-assets-angular-translate'
  gem 'rails-assets-trNgGrid'
  gem 'rails-assets-accounting.js'
  gem 'rails-assets-angular-ui-notification'
end

这是一个现实的尝试吗?我不熟悉 Rails 上的 Ruby,我们团队中的任何人也不熟悉。似乎有很多幕后逻辑,我想知道其中的一些逻辑是否会阻止它 100% 工作。

您刚刚分享了Gem文件,但没有说明该应用程序是如何开发的,因此信息不足,无法给您准确的答复。但通常情况下,会遵循两种不同的方法。

第一种方法

两个单独的应用程序,当您的 ruby on rails 应用程序工作时,可以创建另一个 React 应用程序,并使用 Ruby on Rails 应用程序中存在的所有端点,如果你找不到一些需要的端点,你可以检查已经制作的端点并按照这种方式制作一些新的端点。希望这样做会更容易。

在 Rails

上使用 Ruby 的 Gem

在这种方法中,您必须拆分您的项目并删除项目中已经存在的所有 Angular Gem,然后从带有 ReactJS 的全新前端开始。在我看来,它需要更多 Ruby Rails 知识才能做到这一点,但最终,您只会得到一个项目。

您的项目

从 Gem 文件开始,它似乎大量使用了 Angular,所以您可能有 运行 它并检查它是否有大部分端点 Restful。如果是,那么我建议继续方法一并创建新的 ReactJS 应用程序,它将使用 rails 上 Ruby 中创建的所有端点,这将在 React 端应用程序上做更多工作,而在 [=38] 上工作更少=] 在 Rails 上。即使您发现某些端点不存在,您也可以遵循已创建的端点编码和操作,您将在其中完成详细信息。我知道会有两个不同的项目,但是在 Rails 上学习 Ruby 并将其与 React 集成的学习曲线不仅仅是两个不同的项目。