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

Вступ

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

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

Передумови

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

Налаштування

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

У терміналі перейдіть до каталогу, де потрібно створити проект RoR, і введіть наступну команду:

shell rails new rails-react

2. Додавання React до проекту

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

shell yarn add create-react-app@latest

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

shell npx create-react-app client

3. Налаштування RoR для React

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

shell bundle install

Створіть файл config/webpack/environment.js зі следующим вмістом:

javascript 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 і додайте:

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

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

javascript import axios from "axios";

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

5. Підключення фронтенду та бекенду

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

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

У моделі вашого ресурсу додайте:

ruby


your_model.rb

class YourModel < ApplicationRecord def api_json { id: id, name: name, description: description } end end

У React-компоненті додайте:

javascript 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 виконайте:

shell rails s

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

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

shell 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 до RoR, створіть файл config/routes.rb у вашому проекті RoR і додайте маршрути, використовуючи метод Rails.application.routes.draw.

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

5. Як покращити продуктивність React-додатка?
Щоб покращити продуктивність React-додатка, ви можете використовувати методику компонентного підходу, мемоїзацію, планування ключа та інші техніки оптимізації. React DevTools є корисним інструментом для виявлення проблем із продуктивністю.

6. Як забезпечити безпеку React-додатка?
Щоб забезпечити безпеку React-додатка, використовуйте методики безпечного кодування, такі як екранування вхідних даних, фільтрація вихідних даних і захист від атак міжсайтових сценаріїв (XSS). Ви також можете використовувати бібліотеки безпеки React для додаткового захисту.

7. Як розгорнути React-додаток із RoR бекендом у виробниче середовище?
Щоб розгорнути React-додаток з RoR бекендом у виробниче середовище, ви можете використовувати служби хостингу, такі як Heroku, AWS Elastic