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

Ruby on Rails v7 und React: Einrichten eines modernen Webprojekts unter Ubuntu 20.04

Einleitung

In der heutigen dynamischen Webentwicklungsumgebung ist es unerlässlich, moderne Technologien einzusetzen, um leistungsstarke und ansprechende Webanwendungen zu erstellen. Ruby on Rails v7 und React sind zwei solche Technologien, die zusammen eine hervorragende Grundlage für die Entwicklung skalierbarer und benutzerfreundlicher Webanwendungen bieten. In diesem ausführlichen Tutorial führen wir Sie durch die Einrichtung eines Ruby on Rails v7-Projekts mit einem React-Frontend unter Ubuntu 20.04.

Voraussetzungen

* Ubuntu 20.04-Server
* Ruby >= 2.7
* Node.js >= 14
* PostgreSQL >= 12
* Docker Compose

Einrichtung von Ruby on Rails v7

1. Installation von Ruby und Rails

Führen Sie die folgenden Befehle aus, um Ruby und Rails zu installieren:

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

2. Erstellen Sie ein neues Rails-Projekt

Erstellen Sie ein neues Rails-Projekt mit dem folgenden Befehl:

bash
rails new my_app

3. Datenbank einrichten

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

bash
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. Konfigurieren Sie die Datenbank in der Rails-Konfiguration

  C++ vs. Java: Eine detaillierte Vergleichsanalyse

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

yaml
production:
<<: *default
database: my_app
username: rails_user
password: <YOUR_PASSWORD>

Einrichtung des React-Frontends

1. Erstellen eines neuen React-Projekts

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

bash
cd my_app
yarn create react-app frontend

2. Integration in Rails

Fügen Sie die folgende Zeile zur Datei config/webpack/environment.js hinzu, um das React-Projekt in Rails zu integrieren:

javascript
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 dem folgenden Befehl:

bash
cd frontend
yarn start

Docker-Konfiguration

1. Erstellen Sie eine Dockerfile

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

docker
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. Erstellen Sie eine docker-compose.yml-Datei

Erstellen Sie eine Datei mit dem Namen docker-compose.yml im Stammverzeichnis Ihres Rails-Projekts mit folgendem Inhalt:

yaml
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 Sie die Docker-Container

Starten Sie die Docker-Container mit dem folgenden Befehl:

bash
docker-compose up -d

2. Öffnen Sie die Anwendung

Öffnen Sie die Rails-Anwendung in Ihrem Browser unter http://localhost:3000.

Schlussfolgerung

In diesem Tutorial haben wir Ihnen eine schrittweise Anleitung zur Einrichtung eines modernen Webprojekts mit Ruby on Rails v7 und React unter Ubuntu 20.04 gegeben. Diese Kombination aus Technologien bietet Ihnen leistungsstarke und benutzerfreundliche Funktionen, die den Entwicklungsprozess beschleunigen und die Gesamtleistung Ihrer Webanwendungen verbessern können. Indem Sie die beschriebenen Anweisungen befolgen, können Sie eine solide Grundlage für Ihre nächsten Webentwicklungsprojekte schaffen.

Häufig gestellte Fragen (FAQs)

1. Welche Vorteile bietet die Verwendung von Ruby on Rails v7?
* Verbesserte Leistung und Skalierbarkeit
* Moderne Architektur mit Hotwire
* Intuitive ActiveRecord-Syntax

2. Warum sollte ich React für das Frontend verwenden?
* Virtuelles DOM für effiziente Aktualisierungen
* Komponentenbasierte Architektur für einfache Wartbarkeit
* Große Community und Ökosystem mit vielen verfügbaren Bibliotheken

3. Was sind die Vorteile der Verwendung von Docker?
* Isolierte und reproduzierbare Entwicklungsumgebungen
* Einfache Skalierung und Bereitstellung
* Reduzierter Overhead im Vergleich zu virtuellen Maschinen

4. Wie kann ich meine Datenbank konfigurieren, um die Leistung zu verbessern?
* Indizes für häufig abgefragte Spalten erstellen
* Caching-Techniken wie Redis implementieren
* Aufwändige Abfragen optimieren

5. Wie stelle ich eine Verbindung zu meiner PostgreSQL-Datenbank her?
* Verwenden Sie die ActiveRecord-Gemme
* Führen Sie SQL-Abfragen mit der ActiveRecord-Syntax aus

6. Wie kann ich den React-Entwicklungsserver debuggen?
* Verwenden Sie Browser-Entwicklungstools wie Chrome DevTools
* Konfigurieren Sie die React-Entwicklungsumgebung mit DEBUG=true

7. Wie kann ich React-Komponenten in Rails-Views integrieren?
* Verwenden Sie den react_component-Helfer
* Geben Sie React-Komponenten als JavaScript-Markups weiter

8. Wie aktualisiere ich meine Rails-Anwendung auf eine neuere Version?
* Führen Sie rails update aus
* Überprüfen Sie die Versionshinweise und passen Sie die Konfiguration bei Bedarf an