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
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 https://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