Як налаштувати проект Ruby on Rails v7 з фронтендом React на Ubuntu 20.04

Автор

Вступ

Ruby on Rails (RoR) – це фреймворк з відкритим вихідним кодом, призначений для розробки веб-застосунків. Він використовує мову програмування Ruby і базується на архітектурній парадигмі Model-View-Controller (MVC). React, у свою чергу, є JavaScript-бібліотекою з відкритим кодом, що дозволяє створювати інтерактивні та високопродуктивні інтерфейси користувача. Поєднання RoR для потужного бекенду та React для ефективного фронтенду надає комплексне рішення для розробки веб-застосунків.

Цей посібник поетапно проведе вас через процес налаштування проєкту RoR версії 7 із фронтендом React на сервері Ubuntu 20.04. Основна увага буде приділена оптимальній конфігурації та найкращим практикам, щоб забезпечити плавну та ефективну розробку вашого веб-застосунку.

Передумови

Для початку вам знадобиться:

  • Сервер Ubuntu 20.04 з правами адміністратора (sudo).
  • Встановлена Node.js (версія 16 або вище рекомендована).
  • Встановлений Yarn (версія 1.22 або вище рекомендована).
  • Встановлена Ruby (версія 2.7 або вище рекомендована).
  • Встановлений Rails (версія 7.0 або вище рекомендована).

Процес налаштування

1. Створення проєкту RoR

Відкрийте термінал, перейдіть до каталогу, де ви хочете розмістити свій проєкт RoR, та виконайте команду:

rails new rails-react

2. Інтеграція React у проєкт

Перейдіть до щойно створеного каталогу проєкту та виконайте команду:

yarn add create-react-app@latest

Створіть новий React-додаток у каталозі client:

npx create-react-app client

3. Конфігурація RoR для React

Додайте gem 'jsbundling-rails' до файлу Gemfile вашого проєкту RoR та виконайте встановлення:

bundle install

Створіть файл config/webpack/environment.js з наступним вмістом:

const { environment } = require('@rails/webpacker')

const customConfig = {
  resolve: {
    fallback: {
      "buffer": require.resolve("buffer/"),
      "stream": require.resolve("stream-browserify"),
      "assert": require.resolve("assert/"),
      "crypto": require.resolve("crypto-browserify"),
      "http": require.resolve("stream-http"),
      "https": require.resolve("https-browserify"),
      "os": require.resolve("os-browserify/browser"),
      "url": require.resolve("url/"),
      "path": require.resolve("path-browserify")
    }
  }
}

environment.config.merge(customConfig)

module.exports = environment

4. Налаштування React для взаємодії з Rails

У каталозі client React-додатка, відкрийте файл package.json та додайте:

"proxy": "http://localhost:3000"

У файлі src/index.js React-додатка, імпортуйте axios та задайте базову URL-адресу:

import axios from "axios";

axios.defaults.baseURL = "http://localhost:3000/api/v1";

5. З’єднання фронтенду та бекенду

У файлі config/routes.rb проєкту RoR додайте:

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :your_resources
    end
  end
end

У моделі вашого ресурсу додайте метод для форматування API-відповіді:


# your_model.rb
class YourModel < ApplicationRecord
  def api_json
    { id: id, name: name, description: description }
  end
end

У React-компоненті додайте код для отримання даних з API:

import { useState, useEffect } from "react";
import axios from "axios";

const YourComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get("/api/v1/your_resources");
      setData(response.data);
    };
    fetchData();
  }, []);

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name} - {item.description}</p>
      ))}
    </div>
  );
};

export default YourComponent;

Запуск проєкту

1. Запуск сервера RoR

У терміналі, в каталозі проєкту RoR, виконайте команду:

rails s

2. Запуск React-додатка

У терміналі, в каталозі React-додатка, виконайте команду:

cd client
yarn start

Відкрийте http://localhost:3000/ у вашому браузері. Ви побачите фронтенд React, який взаємодіє з бекендом RoR.

Висновок

Ви успішно налаштували проєкт RoR v7 з фронтендом React на сервері Ubuntu 20.04. Ця конфігурація забезпечує високу продуктивність та ефективність розробки веб-застосунків. Використовуючи цей підхід, ви зможете створювати потужні та гнучкі веб-додатки, які відповідають потребам ваших користувачів.

Подальші дослідження та експерименти допоможуть вам покращити конфігурацію та оптимізувати проєкт. Використовуйте можливості RoR і React для створення виняткових веб-додатків з інтерактивними інтерфейсами.

Часті запитання

1. Чому варто використовувати RoR з React?

RoR надає потужний бекенд з інструментами для управління базами даних, автентифікації користувачів і реалізації бізнес-логіки. React забезпечує ефективний фронтенд для створення динамічних і чутливих інтерфейсів. Поєднання цих технологій забезпечує комплексне рішення для розробки веб-застосунків, яке дозволяє розділити відповідальність між бекендом і фронтендом.

2. Як оновити проєкт до останньої версії RoR?

Для оновлення проєкту до останньої версії RoR, виконайте команду rails upgrade у терміналі, знаходячись в каталозі проєкту. Обов’язково ознайомтесь з документацією щодо оновлення, щоб бути в курсі всіх змін, які необхідно внести.

3. Як додати маршрути React до RoR?

Маршрути React налаштовуються всередині React-додатка. Для інтеграції з RoR, ви можете налаштувати проксі-сервер, щоб запити до певних URL-адрес перенаправлялися на ваш React-додаток, а всі інші запити оброблялися бекендом RoR.

4. Як використовувати сторонні бібліотеки React у проєкті RoR?

Щоб використовувати сторонні бібліотеки React, додайте їх до файлу package.json у директорії вашого React-додатка та встановіть їх за допомогою Yarn. Ви можете використовувати yarn add <назва-бібліотеки> або yarn add -D <назва-бібліотеки> залежно від того, чи потрібна бібліотека для розробки, чи в якості залежності.

5. Як покращити продуктивність React-додатка?

Для покращення продуктивності React-додатка можна використовувати різноманітні методи, такі як мемоїзація, оптимізація рендерингу компонентів, ледаче завантаження зображень, а також оптимізація коду. Використання React DevTools може допомогти в ідентифікації проблемних місць.

6. Як забезпечити безпеку React-додатка?

Безпека React-додатка забезпечується через методи безпечного кодування, такі як екранування вхідних даних, захист від XSS (Cross-site scripting) атак, а також регулярне оновлення залежностей. Використання відповідних бібліотек безпеки також може підвищити захищеність вашого застосунку.

7. Як розгорнути React-додаток із RoR бекендом у виробниче середовище?

Для розгортання React-додатка разом з RoR бекендом у виробниче середовище, можна використовувати хостинг-платформи, такі як Heroku, AWS Elastic Beanstalk, Google Cloud Platform або DigitalOcean. Зазвичай потрібно налаштувати окремий сервер для RoR бекенду та налаштувати проксі-сервер для з’єднання з React фронтендом.