So richten Sie ein Ruby on Rails v7-Projekt mit einem React-Frontend unter Ubuntu 20.04 ein

Einführung

In der heutigen schnelllebigen Welt der Webentwicklung ist die Verwendung aktueller Technologien entscheidend, um leistungsstarke und ansprechende Webanwendungen zu entwickeln. Ruby on Rails v7 und React sind zwei solcher Technologien, die in Kombination eine exzellente Basis für die Entwicklung skalierbarer und nutzerfreundlicher Webanwendungen bieten. Dieses detaillierte Tutorial führt Sie durch die Einrichtung eines Ruby on Rails v7-Projekts mit einem React-Frontend unter Ubuntu 20.04.

Grundvoraussetzungen

Ubuntu 20.04-Server
Ruby Version 2.7 oder höher
Node.js Version 14 oder höher
PostgreSQL Version 12 oder höher
Docker Compose

Konfiguration von Ruby on Rails v7

1. Installation von Ruby und Rails

Verwenden Sie die folgenden Befehle, um Ruby und Rails zu installieren:


sudo apt update && sudo apt install ruby-full
gem install rails -v 7.0.4

2. Erstellung eines neuen Rails-Projekts

Erstellen Sie ein neues Rails-Projekt mit diesem Befehl:


rails new my_app

3. Datenbank einrichten

Führen Sie die folgenden Befehle aus, um PostgreSQL zu installieren und zu konfigurieren:


sudo apt update && sudo apt install postgresql
sudo service postgresql start
sudo -u postgres createuser -s rails_user
psql -d postgres -c "CREATE DATABASE my_app;"

4. Datenbankkonfiguration in Rails

Aktualisieren Sie die Datei config/database.yml mit diesen Einstellungen:


production:
  <<: *default
  database: my_app
  username: rails_user
  password: <IHR_PASSWORT>

Einrichtung des React-Frontends

1. Erstellung eines neuen React-Projekts

Wechseln Sie in das Hauptverzeichnis Ihres Rails-Projekts und erstellen Sie ein neues React-Projekt mit dem folgenden Befehl:


cd my_app
yarn create react-app frontend

2. Integration in Rails

Fügen Sie diese Zeilen zur Datei config/webpack/environment.js hinzu, um das React-Projekt mit Rails zu verbinden:


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

environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default'],
  })
);

3. Starten des React-Entwicklungsservers

Starten Sie den React-Entwicklungsserver mit diesem Befehl:


cd frontend
yarn start

Docker-Konfiguration

1. Erstellen einer Dockerfile

Erstellen Sie eine Datei namens Dockerfile im Stammverzeichnis Ihres Rails-Projekts mit folgendem Inhalt:


FROM ruby:3.0.4
RUN gem install bundler rails-controller-testing rails-view-testing
WORKDIR /usr/src/app
COPY Gemfile.lock ./
COPY Gemfile ./
RUN bundle install
COPY . ./
CMD ["rails", "server", "-b", "0.0.0.0"]

2. Erstellung einer docker-compose.yml-Datei

Erstellen Sie eine Datei namens docker-compose.yml im Stammverzeichnis Ihres Rails-Projekts mit diesem Inhalt:


version: '3'

services:
  app:
    container_name: rails
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/usr/src/app
    command: bash -c "rm -f tmp/pids/server.pid && rails s -b 0.0.0.0"
  db:
    image: "postgres:14"
    container_name: postgres
    command: bash -c "createdb my_app && psql my_app -c \"CREATE EXTENSION IF NOT EXISTS pg_trgm;\" && psql my_app -c \"CREATE EXTENSION IF NOT EXISTS fuzzystrmatch;\" && psql my_app -c \"ALTER SYSTEM SET plugins = fuzzystrmatch;\" && psql my_app -c \"ALTER SYSTEM SET plugins = pg_trgm;\" && psql my_app -c \"CREATE EXTENSION pg_trgm\""
    volumes:
      - mydb:/var/lib/postgresql/data
    ports:
      - "5432:5432"
  frontend:
    image: nginx:latest
    container_name: nginx
    volumes:
      - ./frontend/build:/usr/share/nginx/html
    ports:
      - "80:80"

volumes:
  mydb:

Ausführen der Anwendung

1. Starten der Docker-Container

Starten Sie die Docker-Container mit folgendem Befehl:


docker-compose up -d

2. Zugriff auf die Anwendung

Öffnen Sie Ihre Rails-Anwendung im Browser unter https://localhost:3000.

Zusammenfassung

In diesem Tutorial haben wir Ihnen eine detaillierte Anleitung zur Einrichtung eines modernen Webprojekts mit Ruby on Rails v7 und React unter Ubuntu 20.04 gegeben. Diese Technologiekombination bietet Ihnen leistungsstarke und benutzerfreundliche Funktionen, die den Entwicklungsprozess beschleunigen und die Gesamtleistung Ihrer Webanwendungen verbessern können. Mit Befolgung dieser Anleitung schaffen Sie eine solide Grundlage für Ihre kommenden Webentwicklungsprojekte.

Häufig gestellte Fragen (FAQs)

1. Welche Vorteile bietet Ruby on Rails v7?

Verbesserte Leistung und Skalierbarkeit
Moderne Architektur mit Hotwire
Intuitive ActiveRecord-Syntax

2. Warum sollte man React für das Frontend verwenden?

Virtuelles DOM für effiziente Aktualisierungen
Komponentenbasierte Architektur für einfache Wartbarkeit
Umfangreiche Community und Ökosystem mit zahlreichen Bibliotheken

3. Welche Vorteile bietet die Nutzung von Docker?

Isolierte und reproduzierbare Entwicklungsumgebungen
Einfache Skalierung und Bereitstellung
Geringerer Overhead im Vergleich zu virtuellen Maschinen

4. Wie kann ich meine Datenbank konfigurieren, um die Leistung zu steigern?

Indizes für häufig abgefragte Spalten erstellen
Caching-Mechanismen wie Redis implementieren
Optimierung aufwändiger Datenbankabfragen

5. Wie stelle ich eine Verbindung zur PostgreSQL-Datenbank her?

Verwenden Sie das ActiveRecord-Gem
Führen Sie SQL-Abfragen mit der ActiveRecord-Syntax aus

6. Wie kann ich den React-Entwicklungsserver debuggen?

Nutzen Sie Browser-Entwicklungswerkzeuge wie Chrome DevTools
Konfigurieren Sie die React-Entwicklungsumgebung mit DEBUG=true

7. Wie integriere ich React-Komponenten in Rails-Views?

Nutzen Sie den react_component-Helper
Übergeben Sie React-Komponenten als JavaScript-Markups

8. Wie aktualisiere ich meine Rails-Anwendung auf eine neuere Version?

Führen Sie rails update aus
Prüfen Sie die Versionshinweise und passen Sie die Konfiguration ggf. an

Weitere Artikel: