Home » Как настроить проект Ruby on Rails v7 с фронтендом на React на Ubuntu 24

Как настроить проект Ruby on Rails v7 с фронтендом на React на Ubuntu 24

Современный веб-разработчик неизбежно сталкивается с задачей объединения мощного backend-фреймворка Ruby on Rails с современным React-фронтендом. Особенно это актуально, когда нужно развернуть всё это хозяйство на свежей Ubuntu 24. Если ты один из тех, кто ищет чёткое пошаговое руководство без лишней воды — добро пожаловать в реальность настройки production-ready окружения.

В этой статье разберём три ключевых аспекта: как работает связка Rails 7 + React на системном уровне, как быстро и без головной боли настроить всё с нуля, и какие подводные камни ждут в процессе. Покажу реальные команды, конфигурации и поделюсь опытом troubleshooting’а типичных проблем.

Архитектура и принципы работы

Rails 7 принёс революционные изменения в подходе к фронтенду. Теперь вместо Webpacker используется новый инструмент — importmap-rails, который работает с ES6 модулями нативно. Однако для React-приложений часто всё равно требуется более серьёзная сборка.

Основные варианты интеграции:

API-режим — Rails работает как чистый API, React как отдельное SPA
Гибридный подход — Rails отвечает за routing и рендеринг, React встраивается в отдельные компоненты
Monorepo — всё в одном репозитории с общей системой сборки

Подготовка Ubuntu 24 к работе

Первым делом обновляем систему и ставим базовые зависимости:

sudo apt update && sudo apt upgrade -y
sudo apt install -y curl wget gnupg2 software-properties-common apt-transport-https ca-certificates

# Устанавливаем build-essential для компиляции нативных gem'ов
sudo apt install -y build-essential libssl-dev libreadline-dev zlib1g-dev libsqlite3-dev libpq-dev

# Git если ещё не установлен
sudo apt install -y git

Для комфортной работы с множественными проектами рекомендую сразу настроить надёжный VPS с достаточным объёмом RAM — минимум 2GB, а лучше 4GB для development-окружения.

Установка Ruby и Rails

Используем rbenv для управления версиями Ruby — это проверенное временем решение:

# Устанавливаем rbenv
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash

# Добавляем в .bashrc или .zshrc
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
source ~/.bashrc

# Устанавливаем Ruby 3.2.0 (рекомендуемая версия для Rails 7)
rbenv install 3.2.0
rbenv global 3.2.0

# Устанавливаем Rails 7
gem install rails -v 7.0.4
gem install bundler

Установка Node.js и npm

Для React нужен современный Node.js. Используем официальный репозиторий:

# Устанавливаем Node.js 18.x
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# Проверяем версии
node --version
npm --version

# Устанавливаем yarn (опционально, но рекомендуется)
npm install -g yarn

Создание и настройка Rails-проекта

Создаём новый Rails-проект с поддержкой React:

# Создаём проект
rails new myapp --database=postgresql --css=tailwind

cd myapp

# Добавляем в Gemfile
echo 'gem "react-rails"' >> Gemfile
echo 'gem "webpacker", "~> 5.0"' >> Gemfile

bundle install

# Генерируем конфигурацию для React
rails generate react:install

Структура проекта будет выглядеть так:

myapp/
├── app/
│   ├── javascript/
│   │   ├── components/
│   │   └── packs/
│   └── views/
├── config/
│   └── webpacker.yml
└── package.json

Конфигурация Webpacker для React

Редактируем config/webpacker.yml:

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

development:
  <<: *default
  compile: true
  cache_manifest: false
  extract_css: false
  dev_server:
    https: false
    host: 0.0.0.0
    port: 3035
    public: localhost:3035
    hmr: true
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

production:
  <<: *default
  compile: false
  extract_css: true
  cache_manifest: true

Создание React-компонента

Создаём простой компонент для тестирования:

# app/javascript/components/HelloWorld.jsx
import React from 'react';

const HelloWorld = ({ name }) => {
  return (
    
      
        Hello, {name}!
      
      
        Rails 7 + React работает отлично!
      
    
  );
};

export default HelloWorld;

Регистрируем компонент в app/javascript/packs/application.js:

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

// React
import React from 'react'
import ReactDOM from 'react-dom'
import HelloWorld from '../components/HelloWorld'

Rails.start()
Turbolinks.start()
ActiveStorage.start()

// Регистрируем компоненты
document.addEventListener('DOMContentLoaded', () => {
  const helloWorldElement = document.getElementById('hello-world');
  if (helloWorldElement) {
    ReactDOM.render(
      ,
      helloWorldElement
    );
  }
});

Интеграция с Rails Views

Создаём контроллер и представление:

# Генерируем контроллер
rails generate controller Pages home

# app/controllers/pages_controller.rb
class PagesController < ApplicationController
  def home
    @message = "Добро пожаловать в Rails + React!"
  end
end

Обновляем app/views/pages/home.html.erb:


  <%= @message %>
  
  
  
  
    Системная информация:
    
      Rails версия: <%= Rails.version %>
      Ruby версия: <%= RUBY_VERSION %>
      Окружение: <%= Rails.env %>
    
  


<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Настройка базы данных

Устанавливаем PostgreSQL:

sudo apt install -y postgresql postgresql-contrib libpq-dev

# Создаём пользователя для приложения
sudo -u postgres createuser --interactive --pwprompt myapp_user

# Настраиваем config/database.yml

default: &default
  adapter: postgresql
  encoding: unicode
  host: localhost
  username: myapp_user
  password: your_password
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  database: myapp_development

test:
  <<: *default
  database: myapp_test

production:
  <<: *default
  database: myapp_production
  username: myapp_user
  password: <%= ENV['DATABASE_PASSWORD'] %>

# Создаём и мигрируем базу
rails db:create
rails db:migrate

Настройка production окружения

Для production-деплоя на выделенный сервер настраиваем Nginx и Passenger:

# Устанавливаем Nginx и Passenger
sudo apt install -y nginx
sudo apt install -y passenger

# Включаем модуль Passenger
sudo vim /etc/nginx/nginx.conf
# Добавляем в http блок:
# include /etc/nginx/passenger.conf;

# Создаём конфигурацию сайта
sudo vim /etc/nginx/sites-available/myapp

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/myapp/public;

    passenger_enabled on;
    passenger_app_env production;
    passenger_ruby /home/user/.rbenv/versions/3.2.0/bin/ruby;

    # Gzip compression
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # Assets caching
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";
    add_header X-XSS-Protection "1; mode=block";
}

Автоматизация деплоя

Создаём скрипт для автоматического деплоя:

#!/bin/bash
# deploy.sh

set -e

echo "🚀 Начинаем деплой Rails + React приложения..."

# Обновляем код
git pull origin main

# Устанавливаем зависимости
bundle install --without development test
yarn install --production

# Компилируем assets
RAILS_ENV=production bundle exec rails assets:precompile

# Мигрируем базу
RAILS_ENV=production bundle exec rails db:migrate

# Перезапускаем Passenger
sudo passenger-config restart-app /var/www/myapp

echo "✅ Деплой завершён успешно!"

Сравнение подходов к интеграции

Подход	Преимущества	Недостатки	Когда использовать
API + SPA	Полная независимость фронтенда, масштабируемость	Сложность настройки, CORS, аутентификация	Большие приложения, мобильные версии
Встроенные компоненты	Простота интеграции, SEO-дружественность	Ограниченная интерактивность	Традиционные web-приложения
Гибридный	Баланс между простотой и возможностями	Сложность управления состоянием	Средние проекты с интерактивными элементами

Troubleshooting типичных проблем

Проблема: Webpacker не компилирует React-компоненты

# Решение:
rm -rf node_modules
rm yarn.lock
yarn install
rails webpacker:install:react

Проблема: Ошибки с Babel при компиляции

# Добавляем в .babelrc
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
    "@babel/preset-react"
  ]
}

Проблема: Медленная сборка в development

# Используем webpack-dev-server
bin/webpack-dev-server

# В отдельном терминале
rails server

Мониторинг и производительность

Для мониторинга производительности интегрируем несколько инструментов:

# Gemfile
gem 'rack-mini-profiler'
gem 'flamegraph'
gem 'stackprof'
gem 'memory_profiler'

# Для мониторинга фронтенда
npm install --save-dev webpack-bundle-analyzer

Анализ bundle size:

# Добавляем в package.json
{
  "scripts": {
    "analyze": "npx webpack-bundle-analyzer public/packs/manifest.json"
  }
}

Интеграция с CI/CD

Пример GitHub Actions для автоматического тестирования:

# .github/workflows/test.yml
name: Test

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    
    services:
      postgres:
        image: postgres:13
        env:
          POSTGRES_PASSWORD: postgres
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5

    steps:
    - uses: actions/checkout@v3
    
    - name: Set up Ruby
      uses: ruby/setup-ruby@v1
      with:
        ruby-version: 3.2.0
        
    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 18
        
    - name: Install dependencies
      run: |
        bundle install
        yarn install
        
    - name: Run tests
      run: |
        bundle exec rails test
        yarn test
        
    - name: Build assets
      run: |
        bundle exec rails assets:precompile

Продвинутые возможности

Server-Side Rendering (SSR) с React:

# Устанавливаем react-rails с SSR
gem 'react-rails'
gem 'execjs'
gem 'therubyracer'

# В application.html.erb
<%= react_component('HelloWorld', { name: 'SSR User' }, { prerender: true }) %>

Интеграция с Redux:

yarn add redux react-redux @reduxjs/toolkit

# store/index.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Использование React Router:

yarn add react-router-dom

# Настраиваем Rails routes для SPA
# config/routes.rb
Rails.application.routes.draw do
  root 'pages#home'
  
  # Catch all route для React Router
  get '*path', to: 'pages#home', constraints: ->(req) do
    !req.xhr? && req.format.html?
  end
end

Безопасность

Настраиваем Content Security Policy:

# config/initializers/content_security_policy.rb
Rails.application.config.content_security_policy do |policy|
  policy.default_src :self, :https
  policy.font_src    :self, :https, :data
  policy.img_src     :self, :https, :data
  policy.object_src  :none
  policy.script_src  :self, :https
  policy.style_src   :self, :https, :unsafe_inline
  
  # Разрешаем webpack-dev-server в development
  if Rails.env.development?
    policy.connect_src :self, :https, "ws://localhost:3035", "http://localhost:3035"
  end
end

Полезные gem'ы и npm-пакеты

Ruby gems для улучшения интеграции:

jbuilder — для создания JSON API
fast_jsonapi — быстрая сериализация
actioncable — WebSocket для real-time функций
image_processing — обработка изображений

npm-пакеты для React:

axios — HTTP-клиент
react-query — управление состоянием сервера
react-hook-form — работа с формами
react-hot-toast — уведомления

Статистика и бенчмарки

По данным State of JS 2023, React остаётся лидером среди фронтенд-фреймворков с долей рынка 67.8%. Rails 7 показывает улучшение производительности на 15-20% по сравнению с предыдущими версиями благодаря:

Новому asset pipeline
Улучшенной работе с JavaScript
Оптимизации Active Record
Встроенной поддержке HTTP/2

Время первоначальной загрузки страницы для типичного приложения Rails 7 + React составляет 1.2-1.8 секунды на сервере с 2 CPU и 4GB RAM.

Заключение и рекомендации

Связка Rails 7 + React на Ubuntu 24 — это мощное решение для создания современных web-приложений. Ключевые рекомендации:

Для небольших проектов — используйте встроенные React-компоненты с react-rails
Для средних проектов — гибридный подход с частичным использованием SPA
Для крупных проектов — полноценное API + отдельное React-приложение

Обязательно настройте мониторинг производительности с первого дня, используйте CDN для статики и не забывайте про кеширование. При правильной настройке такая связка способна обслуживать тысячи пользователей одновременно.

Помните: лучший код — это код, который работает стабильно в production. Тестируйте всё локально, используйте staging-окружение и всегда имейте план отката изменений.

В этой статье собрана информация и материалы из различных интернет-источников. Мы признаем и ценим работу всех оригинальных авторов, издателей и веб-сайтов. Несмотря на то, что были приложены все усилия для надлежащего указания исходного материала, любая непреднамеренная оплошность или упущение не являются нарушением авторских прав. Все упомянутые товарные знаки, логотипы и изображения являются собственностью соответствующих владельцев. Если вы считаете, что какой-либо контент, использованный в этой статье, нарушает ваши авторские права, немедленно свяжитесь с нами для рассмотрения и принятия оперативных мер.

Данная статья предназначена исключительно для ознакомительных и образовательных целей и не ущемляет права правообладателей. Если какой-либо материал, защищенный авторским правом, был использован без должного упоминания или с нарушением законов об авторском праве, это непреднамеренно, и мы исправим это незамедлительно после уведомления. Обратите внимание, что переиздание, распространение или воспроизведение части или всего содержимого в любой форме запрещено без письменного разрешения автора и владельца веб-сайта. Для получения разрешений или дополнительных запросов, пожалуйста, свяжитесь с нами.