Im heutigen Tutorial lernen wir, wie wir unseren Server selbst hosten und einrichten, sodass wir jede Webanwendung online bereitstellen können. Es gibt verschiedene Möglichkeiten, Anwendungen online bereitzustellen. Zwei Strategien umfassen die Verwendung eines VPS, eines Virtual Private Servers und einer gemeinsam verwalteten Hosting-Plattform wie Vercel, Netlify, WordPress, GoDaddy usw.
Ein VPS ist eine virtuelle Maschine, die dedizierte Serverressourcen auf einem physisch gemeinsam genutzten Server mit anderen Benutzern bereitstellt. Es handelt sich eigentlich um ein Hosting der Mittelklasse für Websites und Anwendungen, das im Vergleich zu Shared Hosting mehr Kontrolle und Anpassung bietet. Beispiele für einige VPS-Hosting-Plattformen sind Hetzner, Akamai, Vultr, Cloudcone.
Andererseits ist es einfacher, Websites über eine Managed-Hosting-Plattform zu hosten. Solche Plattformen stellen Tools, Workflows und Infrastruktur zum Erstellen und Bereitstellen von Webanwendungen bereit. Diese Plattformen führen den Lastausgleich und das Caching selbst durch. Sie eignen sich gut für alle Entwickler, die Webanwendungen schnell und ohne weitere Konfigurationen erstellen und bereitstellen möchten.
Wie immer gibt es bei der Verwendung jeder Strategie Vor- und Nachteile. Einer der bedeutendsten Unterschiede besteht darin, dass Sie bei der Verwendung eines VPS eine vollständige Anpassung erhalten, da Sie die Kontrolle über den gesamten Server und alles, was dazu gehört, haben. Das bedeutet, dass Sie die Entwicklungsumgebung, Firewall-Regeln, Hosting usw. einrichten müssen. Diese Anpassung erhöht die Komplexität und Sie benötigen mehr technischen Support, da Sie alles selbst erledigen. Sie sollten wissen, dass eine Managed-Hosting-Plattform sehr einsteigerfreundlich ist, da die meisten Tools voreingestellt sind und Sie Support und Dokumentation erhalten. Da es bereits eingerichtet und verwaltet ist, erhalten Sie nicht den hohen Grad an Anpassungsmöglichkeiten, den Sie von VPS erhalten würden.
Außerdem müssen Sie den Preisunterschied berücksichtigen. Die meisten VPS sind kostenpflichtig, Sie können Ihren Server jedoch vollständig anpassen, um ihn leicht oder so robust zu machen, wie Sie es jemals benötigen. In Bezug auf die Leistung ist es damit jeder Managed-Hosting-Plattform einen Schritt voraus. Letzteres bietet kostenlose Pläne, Sie müssen sich also die Unterschiede ansehen. Der allgemeine Verbraucher würde sich Managed-Hosting-Plattformen wünschen, weil diese kostenlos sind. Wenn Sie jedoch mehr Leistung wünschen und erweiterte Anwendungen in einer Anwendung hosten möchten, ist VPS die richtige Wahl.
Unsere Watchlist Tracker-Anwendung ist eine unkomplizierte, aber leistungsstarke Full-Stack-CRUD-Anwendung, die zum Verfolgen von Film-Watchlists verwendet wird. Mit dieser Anwendung können Benutzer außerdem ganz einfach Filme oder Serien hinzufügen, die sie ansehen möchten, den Filmtitel oder die Bewertung aktualisieren und Filme entfernen, die sie bereits gesehen haben oder die sie nicht mehr verfolgen möchten. Die App bietet Benutzern Zugriff auf eine einfache Benutzeroberfläche zum Organisieren und Nachschlagen interessanter Filme und ist damit ein geeignetes Tool für Filmbegeisterte, die bei der Überwachung ihrer Beobachtungsliste immer einen Schritt voraus sein möchten.
Sie können unten sehen, wie die App aussieht:
Homepage
Film-/Serienartikelseite
Seite „Neues Element hinzufügen“
Bevor wir mit der Erstellung der Anwendung beginnen, ist es wichtig, dass Ihre Entwicklungsumgebung eingerichtet und funktionsfähig ist. Stellen Sie sicher, dass auf Ihrem Computer Folgendes installiert ist:
Es gibt eine hervorragende kostenlose SQLite Viewer-Erweiterung für VS Code, die neben der Verwendung der Befehlszeile ebenfalls hilfreich sein kann. Es ist gut, um die Daten in Ihrer Datenbank schnell anzuzeigen.
Unsere Watchlist Tracker-App basiert auf einem sehr modernen und zukunftsweisenden technischen Stack, der ein hervorragendes Entwicklungserlebnis bietet. Ich habe mich für Tools wie Bun, Hono, Vite, TanStack, Hetzner und DeployHQ entschieden, weil sie alle Entwicklern ein modernes Build-Erlebnis bieten.
Werfen wir einen Blick auf die Technologien, die wir in diesem Projekt verwenden werden:
Backend
Frontend
Hosting und Bereitstellung
Okay, fangen wir mit der Entwicklung unserer App an! Dieser Abschnitt wird in zwei Teile geteilt: Zuerst erstellen wir das Backend und dann erstellen wir das Frontend.
Bitte erstellen Sie auf Ihrem Computer einen neuen Ordner für das Projekt mit dem Namen „watchlist-tracker-app“ und kopieren Sie ihn dann per CD. Erstellen Sie nun ein neues Bun-Projekt für das Backend, indem Sie die hier gezeigten Befehle verwenden:
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Unser Projekt sollte nun eingerichtet sein. Wir müssen lediglich Abhängigkeiten installieren, an der Konfiguration arbeiten und etwas Servercode schreiben. Öffnen Sie das Projekt in Ihrem Code-Editor.
Jetzt installieren Sie die Abhängigkeiten für unseren Server mit diesem Befehl:
bun add hono prisma @prisma/client
Wir haben Bun als Laufzeitumgebung, Hono als unseren API-Server und Prisma als unser Datenbank-ORM hinzugefügt.
Lasst uns nun Prisma ORM und SQLite mit diesem Befehl einrichten:
npx prisma init
Prisma sollte jetzt für die Arbeit auf unserem Server konfiguriert sein, daher werden wir im nächsten Schritt unser Datenbankschema konfigurieren. Ersetzen Sie also den gesamten Code in prisma/schema.prisma durch diesen Code:
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Unser Datenbankschema ist eingerichtet und mit unserer SQLite-Datenbankdatei verbunden.
Führen Sie nun dieses Migrationsskript aus, um die SQLite-Datenbank zu erstellen:
npx prisma migrate dev --name init
Großartig, jetzt, da die Prisma-Migration abgeschlossen ist, können wir an unserer API-Datei arbeiten.
Lasst uns nun unsere Haupt-API-Datei erstellen, die Hono verwenden wird. Gehen Sie zur Serverdatei in src/server.ts und fügen Sie diesen Code zur Datei hinzu:
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
Mit dieser Datei verwendet unser Server Bun und Hono und läuft auf Port 8000. Wir haben auch alle CRUD-Endpunkte (Erstellen, Lesen, Aktualisieren, Löschen) für unseren Watchlist-Tracker. Alle unsere Daten werden in einer SQLite-Datenbank gespeichert.
Jetzt müssen nur noch die Ausführungs- und Build-Skripte für unseren Server erstellt werden. Anschließend können wir die Endpunkte testen, um sicherzustellen, dass sie wie erwartet funktionieren. Fügen Sie diese Ausführungsskripte zu unserer package.json-Datei hinzu:
"scripts": {
"start": "bun run src/server.ts",
"build": "bun build src/server.ts --outdir ./dist --target node"
},
Ok, wenn Sie jetzt den Befehl bun run start ausführen, sollten Sie Folgendes in Ihrem Terminal sehen, das bestätigt, dass der Server läuft:
Server is running on http://localhost:8000
Wenn Sie den Befehl bun run build ausführen, sollte ein dist-Ordner erstellt werden, der für die Produktion bereit ist. Wir benötigen dies, wenn wir unsere Anwendung auf Hetzner oder einem anderen Online-Server bereitstellen.
Okay, testen wir schnell unsere Backend-Endpunkte, um sicherzustellen, dass sie wie erwartet funktionieren. Dann können wir mit der Arbeit an unserem Frontend beginnen. Wir müssen fünf Endpunkte testen: zwei GET, ein POST, ein PUT und ein DELETE. Ich werde Postman verwenden, um die API zu testen.
Watchlist App API POST Endpoint
Methode: POST
Endpunkt: http://localhost:8000/watchlist
Dies ist unser POST-Endpunkt, der verwendet wird, um ein JSON-Objekt mit den Film-/Seriendaten an unsere Datenbank zu senden.
Watchlist-App-API GET All Endpoint
Methode: GET
Endpunkt: http://localhost:8000/watchlist
Dies ist unser primärer GET-Endpunkt, der ein Array von Objekten zurückgibt, die unser Frontend abruft. Es gibt ein Array von Objekten mit unseren Daten oder ein leeres Array zurück, wenn wir noch keine Daten in unserer Datenbank veröffentlicht haben.
Watchlist-App-API GET By ID Endpoint
Methode: GET
Endpunkt: http://localhost:8000/watchlist/3
Dies ist unser GET-Endpunkt zum Abrufen von Artikeln anhand ihrer ID. Es gibt nur dieses Objekt zurück und zeigt einen Fehler an, wenn das Element nicht existiert.
Watchlist App API PUT Endpoint
Methode: PUT
Endpunkt: http://localhost:8000/watchlist/3
Dies ist unser PUT-Endpunkt zum Aktualisieren von Elementen anhand ihrer ID. Es gibt nur dieses Objekt zurück und zeigt einen Fehler an, wenn das Element nicht existiert.
Watchlist App API DELETE Endpoint
Methode: DELETE
Endpunkt: http://localhost:8000/watchlist/3
Dies ist unser DELETE-Endpunkt zum Löschen von Elementen anhand ihrer ID. Es gibt ein Erfolgsobjekt zurück und zeigt einen Fehler an, wenn das Element nicht vorhanden ist.
Das heißt, unsere API ist betriebsbereit. Wir können jetzt mit dem Front-End-Code beginnen.
Stellen Sie sicher, dass Sie sich im Stammordner für watchlist-tracker-app befinden, und führen Sie dann die folgenden Skripte aus, um mit Vite ein React-Projekt zu erstellen, das für TypeScript mit allen unseren Paketen und Abhängigkeiten eingerichtet ist:
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Dieses Skript verwendet grundsätzlich die Bun-Laufzeitumgebung, um unser Projekt zu installieren und einzurichten. Alle notwendigen Dateien und Ordner wurden erstellt, wir müssen also nur noch den Code hinzufügen. Wir haben unser Vite-Projekt so eingerichtet, dass es Tailwind CSS für das Styling verwendet, und wir haben TanStack Router für das Seitenrouting mit Axios zum Abrufen von Daten und DayJS für die Datumskonvertierung in unserem Formular.
Dank dieses Build-Skripts ist unsere Arbeit jetzt deutlich einfacher, also beginnen wir mit dem Hinzufügen des Codes zu unseren Dateien. Zuerst werden einige Konfigurationsdateien angezeigt. Ersetzen Sie den gesamten Code in der Datei tailwind.config.js durch diesen Code:
bun add hono prisma @prisma/client
Diese Datei ist ziemlich erklärend. Wir benötigen diese Datei, damit Tailwind CSS in unserem gesamten Projekt funktioniert.
Ersetzen Sie nun den gesamten Code in unserer Datei src/index.css durch diesen Code. Wir müssen Tailwind-Anweisungen hinzufügen, damit wir sie in unseren CSS-Dateien verwenden können:
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Mit diesen hinzugefügten Anweisungen können wir in allen unseren CSS-Dateien auf Tailwind-CSS-Stile zugreifen. Als nächstes löschen Sie den gesamten CSS-Code in der App.css-Datei, da wir ihn nicht mehr benötigen.
Okay, jetzt zur endgültigen Konfigurationsdatei, und dann können wir an unseren Seiten und Komponenten arbeiten.
Fügen Sie diesen Code zur Datei api.ts im Stammordner hinzu:
bun add hono prisma @prisma/client
Diese Datei exportiert die Endpunkte, mit denen unser Frontend eine Verbindung zu unserem Backend herstellen muss. Denken Sie daran, dass sich unsere Backend-API unter http://localhost:8000 befindet.
Okay, gut, wir ersetzen den gesamten Code in unserer App.tsx-Datei durch diesen neuen Code:
npx prisma init
Dies ist unsere Haupteinstiegspunktkomponente für unsere App und diese Komponente enthält die Routen für alle unsere Seiten.
Als nächstes werden wir an den Hauptkomponenten und Seiten arbeiten. Wir haben drei Komponentendateien und drei Dateiseiten. Beginnen Sie mit den Komponenten und fügen Sie diesen Code zu unserer Datei in „components/AddItemForm.tsx“ hinzu:
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Diese Komponente wird zum Hinzufügen von Artikeln zu unserer Datenbank verwendet. Der Benutzer verwendet diese Formularkomponente, um eine POST-Anfrage an das Backend zu senden.
Jetzt fügen wir den Code für „components/FormField.tsx“ hinzu:
npx prisma migrate dev --name init
Dies ist eine wiederverwendbare Formularfeldkomponente für unser Formular. Dadurch bleibt unser Code trocken, da wir dieselbe Komponente einfach für mehrere Felder verwenden können, was bedeutet, dass unsere Codebasis kleiner ist.
Und schließlich fügen wir den Code für „components/Header.tsx“ hinzu:
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
Aufgrund dieser Header-Komponente verfügt jede Seite über einen Header mit einer Hauptnavigation.
Uns bleiben nur noch die drei Seiten und dann ist unsere App fertig. Fügen Sie also den folgenden Code zu „pages/AddItem.tsx“ hinzu:
"scripts": {
"start": "bun run src/server.ts",
"build": "bun build src/server.ts --outdir ./dist --target node"
},
Dies ist im Wesentlichen die Seite zum Hinzufügen von Elementen zu unserer Datenbank, die die Formularkomponente enthält.
Also gut, als nächstes fügen wir den Code für „pages/Home.tsx“ hinzu:
Server is running on http://localhost:8000
Wie Sie sich vorstellen können, wird dies unsere Homepage sein, die eine GET-Anfrage an das Backend sendet, das dann ein Array von Objekten für alle Artikel in unserer Datenbank abruft.
Fügen Sie abschließend den Code für „pages/ItemDetail.tsx“ hinzu:
bun create vite client --template react-ts
cd client
bunx tailwindcss init -p
bun install -D tailwindcss postcss autoprefixer tailwindcss -p
bun install @tanstack/react-router axios dayjs
cd src
mkdir components pages
touch api.ts
touch components/{AddItemForm,FormField,Header}.tsx pages/{AddItem,Home,ItemDetail}.tsx
cd ..
Auf dieser Seite werden einzelne Artikelseiten nach ihrer ID angezeigt. Es gibt auch ein Formular zum Bearbeiten und Löschen von Elementen aus der Datenbank.
Das ist es. Unsere Anwendung ist einsatzbereit. Stellen Sie sicher, dass sowohl der Backend- als auch der Client-Server ausgeführt werden. Sie sollten sehen, dass die App hier im Browser ausgeführt wird: http://localhost:5173/.
Führen Sie beide Server mit diesen Befehlen in ihren Ordnern aus:
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
Okay, gut gemacht. Unsere Bewerbung ist vollständig! Stellen wir es jetzt auf GitHub bereit!
Die Bereitstellung unserer Anwendung auf GitHub ist ziemlich einfach. Legen Sie zunächst eine .gitignore-Datei im Stammordner unserer Watchlist-Tracker-App ab. Sie können die .gitignore-Datei einfach aus dem Backend- oder Client-Ordner kopieren und einfügen. Gehen Sie nun zu Ihrem GitHub (erstellen Sie ein Konto, falls Sie noch keins haben) und erstellen Sie ein Repo für Ihre Watchlist-Tracker-App.
Verwenden Sie im Stammordner der Watchlist-Tracker-App die Befehlszeile, um Ihre Codebasis hochzuladen. Sehen Sie sich diesen Beispielcode an und passen Sie ihn für Ihr eigenes Repository an:
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Es gibt noch einen sehr wichtigen letzten Punkt, den Sie beachten sollten. Wenn wir unseren Code bei Hetzner hochladen, können wir über localhost nicht mehr auf das Backend zugreifen, sodass wir die API-Route aktualisieren müssen. Es gibt eine Variable namens const API_URL = 'http://localhost:8000'; in zwei Dateien oben. Die Dateien sind api.ts und Components/AddItemForm.tsx. Ersetzen Sie die variable API-URL durch die unten stehende und laden Sie dann Ihre Codebasis erneut auf GitHub hoch.
bun add hono prisma @prisma/client
Das ist alles. Ihre Codebasis sollte jetzt auf GitHub online sein, sodass wir jetzt an der Bereitstellung für Hetzner arbeiten können.
Nachdem unsere Watchlist-Tracker-App fertiggestellt ist, ist es nun an der Zeit, unsere Anwendung auf der Hetzner VPS-Plattform bereitzustellen. Hetzner ist eine kostenpflichtige Plattform, aber die Vielseitigkeit, die sie bietet, ist unübertroffen. Der günstigste Plan kostet etwa 4,51 €/4,88 $/3,76 £ pro Monat. Es lohnt sich, einen selbst gehosteten Online-Server zu haben, denn als Entwickler können Sie ihn zum Lernen, Üben, für Produktionseinsätze und vieles mehr nutzen. Sie können das Serverabonnement jederzeit kündigen und bei Bedarf zurückerhalten.
Die meisten VPS sind im Wesentlichen gleich, da es sich bei allen um Server handelt, auf denen unterschiedliche Betriebssysteme wie Linux ausgeführt werden können. Jeder VPS-Anbieter hat eine andere Schnittstelle und Einrichtung, aber die grundlegende Struktur ist ziemlich gleich. Indem Sie lernen, wie Sie eine Anwendung auf Hetzner selbst hosten, können Sie dieselben Fähigkeiten und Kenntnisse problemlos wiederverwenden, um eine Anwendung auf einer anderen VPS-Plattform bereitzustellen.
Einige Anwendungsfälle für einen VPS sind:
Wie die aktuelle Preisgestaltung für Hetzner aussieht, können Sie hier sehen:
Gehen Sie zur Hetzner-Website und klicken Sie auf die rote Schaltfläche „Anmelden“ in der Mitte der Seite. Alternativ können Sie auch auf den Login-Button oben rechts klicken. Sie sollten ein Menü mit Optionen für Cloud, Robot, konsoleH und DNS sehen. Klicken Sie auf eine davon, um zur Anmelde- und Registrierungsformularseite zu gelangen.
Jetzt sollten Sie die Anmelde- und Registrierungsformularseite sehen. Klicken Sie auf die Schaltfläche „Registrieren“, um ein Konto zu erstellen und den Anmeldevorgang abzuschließen. Sie müssen die Verifizierungsphase wahrscheinlich bestehen, indem Sie entweder Ihr PayPal-Konto verwenden oder Ihren Reisepass bereithalten.
Sie sollten sich jetzt bei Ihrem Konto anmelden und einen Server erstellen und kaufen können. Wählen Sie einen Ort in Ihrer Nähe und wählen Sie dann Ubuntu als Bild aus. Sehen Sie sich dieses Beispiel als Referenz an.
Wählen Sie unter Typ die Option „Freigegebene vCPU“ und dann eine Konfiguration für Ihren Server aus. Wir stellen eine einfache Anwendung bereit, die nur wenige Ressourcen benötigt. Wenn Sie möchten, können Sie sich gerne einen besseren Server besorgen – es liegt ganz bei Ihnen. Eine dedizierte vCPU bietet eine bessere Leistung, kostet aber mehr Geld. Sie können auch zwischen x86- (Intel/AMD) und Arm64-Prozessoren (Ampere) wählen.
Die Standardkonfiguration sollte akzeptabel sein. Siehe das Beispiel unten. Aus Sicherheitsgründen ist es jedoch wichtig, einen SSH-Schlüssel hinzuzufügen.
SSH-Schlüssel bieten eine sicherere Möglichkeit zur Authentifizierung bei Ihrem Server als ein herkömmliches Passwort. Der Schlüssel muss im OpenSSH-Format vorliegen, um ein hohes Maß an Sicherheit für Ihren Server zu gewährleisten. Abhängig von Ihrem Betriebssystem können Sie eine Google-Suche nach „Generate an SSH key on Mac“ oder „Generate an SSH key on Windows“ durchführen. Ich gebe Ihnen eine Kurzanleitung zum Generieren eines SSH-Schlüssels auf einem Mac.
Öffnen Sie zunächst Ihre Terminalanwendung und geben Sie dann den folgenden Befehl ein, wobei Sie „your_email@example.com“ durch Ihre tatsächliche E-Mail-Adresse ersetzen:
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Der Teil -b 4096 stellt sicher, dass der Schlüssel 4096 Bit lang ist, um die Sicherheit zu erhöhen. Speichern Sie anschließend den Schlüssel, nachdem Sie dazu aufgefordert werden. Sie können den Standardspeicherort akzeptieren oder einen benutzerdefinierten auswählen:
bun add hono prisma @prisma/client
Das Festlegen einer Passphrase ist optional. Sie können diesen Schritt überspringen. Laden Sie nun den SSH-Schlüssel in Ihren SSH-Agenten, indem Sie die folgenden Befehle ausführen:
Starten Sie zunächst den Agenten:
npx prisma init
Dann fügen Sie den SSH-Schlüssel hinzu:
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Um Ihren öffentlichen SSH-Schlüssel in Ihre Zwischenablage zu kopieren, führen Sie Folgendes aus:
npx prisma migrate dev --name init
Dadurch wird der öffentliche Schlüssel kopiert, sodass Sie ihn zu Hetzner oder einem anderen Dienst hinzufügen können, der einen SSH-Schlüssel erfordert. Fügen Sie Ihren SSH-Schlüssel in dieses Formularfeld ein und fügen Sie ihn hinzu.
Sie müssen sich keine Gedanken über Volumes, Platzierungsgruppen, Labels oder Cloud-Konfigurationen machen, da diese außerhalb des Umfangs dieses Projekts liegen. Backups können hilfreich sein, verursachen jedoch zusätzliche Kosten und sind daher für dieses Projekt optional. Wir werden die Firewall später einrichten, Sie müssen sich also jetzt keine Gedanken darüber machen. Wählen Sie einen Namen für Ihren Server, erstellen und kaufen Sie dann den Server mit Ihren aktuellen Einstellungen und schon ist Ihr Hetzner-Konto einsatzbereit.
Okay, gut. Wir haben jetzt einen Account bei Hetzner. Im nächsten Abschnitt richten wir unsere Firewall ein, konfigurieren unser Linux-Betriebssystem und stellen unsere Anwendung online.
Bevor wir eine SSH-Verbindung zu unserem Linux-Betriebssystem herstellen, richten wir zunächst unsere Firewall-Regeln ein. Wir müssen Port 22 öffnen, damit wir SSH verwenden können, und wir müssen Port 80 öffnen, da Port 80 ein TCP-Port ist, der der Standard-Netzwerkport für Webserver ist, die HTTP (Hypertext Transfer Protocol) verwenden. Es dient der Kommunikation zwischen Webbrowsern und Servern sowie der Bereitstellung und dem Empfang von Webinhalten. So bringen wir unsere Bewerbung online zum Laufen.
Navigieren Sie im Hauptmenü zu Firewalls und erstellen Sie dann eine Firewall mit den unten gezeigten Eingangsregeln:
Jetzt, da unsere Firewall funktioniert, können wir eine Linux-Umgebung einrichten und unsere Anwendung bereitstellen, also machen wir das als nächstes.
Die Verbindung zu unserem Remote-Hetzner-Server sollte ziemlich einfach sein, da wir einen SSH-Schlüssel zum Anmelden erstellt haben. Wir können eine Verbindung über das Terminal oder sogar einen Code-Editor wie VS Code herstellen, der uns die Möglichkeit gibt, unsere zu sehen und zu durchsuchen Dateien viel einfacher, ohne die Befehlszeile verwenden zu müssen. Wenn Sie die Erweiterung „Visual Studio Code Remote – SSH“ verwenden möchten, können Sie dies tun. Bei diesem Projekt bleiben wir beim Terminal.
Öffnen Sie Ihr Terminal und geben Sie diesen SSH-Befehl ein, um sich bei Ihrem Remote-Server anzumelden. Ersetzen Sie die Adresse 11.11.111.111 durch Ihre tatsächliche Hetzner-IP-Adresse, die Sie im Serverbereich finden:
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Sie sollten jetzt bei Ihrem Server angemeldet sein, der den Begrüßungsbildschirm und andere private Informationen wie Ihre IP-Adresse anzeigt. Ich zeige hier nur den Willkommensteil des Bildschirms:
bun add hono prisma @prisma/client
Okay, großartig. Jetzt können wir endlich damit beginnen, einige Befehle auszuführen, die unsere Entwicklungsumgebung einrichten, bevor wir unsere Anwendung online stellen. Wenn Sie die SSH-Verbindung zu Ihrem Server beenden und schließen möchten, können Sie übrigens entweder „exit“ eingeben und anschließend auf die Eingabetaste klicken oder die Tastenkombination „Strg D“ verwenden.
Als erstes müssen wir die Pakete auf unserem Linux-System aktualisieren und aktualisieren. Wir können das mit einem Befehl tun, also geben Sie diesen Befehl in das Terminal ein und drücken Sie die Eingabetaste:
npx prisma init
Jetzt müssen wir den Rest unserer Entwicklungspakete und Abhängigkeiten installieren. An erster Stelle stehen Node.js und npm, also installieren Sie sie mit diesem Befehl:
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Als nächstes kommt Nginx, das wir als Reverse-Proxy verwenden müssen. Ein Reverse-Proxy ist ein Server, der zwischen Clients und Backend-Servern sitzt, Client-Anfragen an den entsprechenden Backend-Server weiterleitet und dann die Antwort des Servers an den Client zurücksendet. Es fungiert als Vermittler und verwaltet und leitet eingehende Anfragen weiter, um Leistung, Sicherheit und Skalierbarkeit zu verbessern. Installieren Sie es also mit diesem Befehl:
npx prisma migrate dev --name init
Wir benötigen Git, wofür wir unseren Code von GitHub abrufen und auf unseren Remote-Server hochladen müssen. Installieren Sie es also mit diesem Befehl:
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
Die Bun-Laufzeit wird für die Ausführung unserer Anwendungen hilfreich sein. Zuerst müssen wir das Unzip-Paket nach Bedarf installieren, bevor wir Bun installieren können. Anschließend können wir Bun installieren. Das sind die Befehle, die wir brauchen:
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
bun add hono prisma @prisma/client
Um sowohl das React-Frontend als auch den Backend-Server auf demselben Hetzner-Server auszuführen, müssen wir beide Dienste gleichzeitig verwalten. Dies beinhaltet typischerweise die Einrichtung eines Prozessmanagers wie PM2 zum Ausführen des Backend-Servers und die Verwendung von Nginx als Reverse-Proxy, um eingehende Anfragen sowohl an das Front-End als auch an das Backend zu verarbeiten.
Installieren Sie PM2 mit diesem Befehl hier:
npx prisma init
Richtig, das kümmert sich um die Einrichtung unserer Linux-Umgebung. Im nächsten Abschnitt laden wir unsere Codebasis von GitHub auf unseren Remote-Server herunter und konfigurieren unseren Nginx-Server, damit unsere App online funktioniert.
Ich gehe davon aus, dass Sie bereits wissen, wie man in der Befehlszeile navigiert. Wenn nicht, können Sie es googeln. Wir werden Verzeichnisse ändern und Dateien verwalten. Klonen Sie zunächst das GitHub-Repository mit Ihrem Projekt und kopieren Sie es auf den Remote-Server. Verwenden Sie den folgenden Befehl als Referenz:
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Unsere Webanwendungsdateien werden in /var/www gespeichert. Sie können alle Dateien auf Ihrem Linux-Betriebssystem anzeigen, indem Sie die Befehle ls zum Auflisten von Dateien und pwd zum Drucken des Arbeitsverzeichnisses verwenden. Um mehr über die Linux-Befehlszeile zu erfahren, schauen Sie sich dieses Tutorial für die Linux-Befehlszeile für Anfänger an.
Da wir nun unsere Anwendung auf unserem Remote-Server haben, können wir einen Produktions-Build des Backends und Frontends erstellen. Dazu müssen wir lediglich in das Stammverzeichnis des Ordners Backend und Client innerhalb unseres Watchlist-Tracker-App-Projekts wechseln und die unten gezeigten Befehle ausführen:
npx prisma migrate dev --name init
Wir verwenden Bun als unsere Laufzeit, daher verwenden wir die Bun-Befehle für die Installations- und Erstellungsschritte.
Okay, jetzt konfigurieren wir unseren Nginx-Server. Wir werden den Nano-Terminal-Editor verwenden, um den Code in die Datei zu schreiben. Führen Sie diesen Befehl im Terminal aus, um eine Nginx-Datei für unsere Watchlist-Tracker-App zu öffnen:
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
Wenn Sie mit dem Nano-Code-Editor nicht vertraut sind, schauen Sie sich diesen Spickzettel an.
Sie müssen diese Konfiguration nur kopieren, in die Datei einfügen und speichern. Stellen Sie sicher, dass Sie die IP-Adresse server_name durch Ihre eigene Hetzner-IP-Adresse ersetzen:
"scripts": {
"start": "bun run src/server.ts",
"build": "bun build src/server.ts --outdir ./dist --target node"
},
Nginx wird sehr oft als Reverse-Proxy-Server verwendet. Ein Reverse-Proxy befindet sich zwischen dem Client-Browser Ihres Benutzers und Ihrem Backend-Server. Es empfängt Anfragen vom Client und leitet diese an einen oder mehrere Backend-Server weiter. Sobald das Backend die Anfrage verarbeitet, leitet der Reverse-Proxy die Antwort zurück an den Client. In einem solchen Setup wäre Nginx der Einstiegspunkt für eingehenden Datenverkehr und leitet Anfragen an bestimmte Dienste weiter, beispielsweise das Vite-Frontend oder das API-Backend.
Vite-Produktionsvorschau-Builds laufen auf Port 4173 und unser Backend-Server läuft auf Port 8000. Wenn Sie diese Werte ändern, stellen Sie sicher, dass Sie sie auch in dieser Nginx-Konfigurationsdatei aktualisieren; Andernfalls funktionieren die Server nicht.
Aktivieren Sie die Nginx-Site, falls sie noch nicht aktiviert ist, mit diesem Befehl:
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Testen Sie nun die Nginx-Konfiguration, um sicherzustellen, dass keine Syntaxfehler vorliegen, und starten Sie Nginx neu, um die Änderungen mit diesen Befehlen zu übernehmen:
bun add hono prisma @prisma/client
Wir sind fast fertig. Nur noch ein Schritt. Wenn Sie jetzt in einem Browser auf Ihre Hetzner-IP-Adresse zugreifen, sollte eine Fehlermeldung wie 502 Bad Gateway angezeigt werden. Das liegt daran, dass wir noch keinen laufenden Server haben; Zuerst müssen wir beide Server gleichzeitig mit PM2 betreiben. Daher müssen wir PM2 so einstellen, dass es beim Systemstart startet, damit unsere Anwendung immer online ist. Führen Sie dazu die folgenden Befehle im Terminal aus:
npx prisma init
Jetzt müssen wir die Backend- und Frontend-Server zum Laufen bringen. Führen Sie diese Befehle im Stammverzeichnis ihrer Ordner aus.
Beginnen wir mit dem Backend-Server, also führen Sie diesen Befehl im Terminal aus:
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Zuletzt bringen wir den Client-Frontend-Server zum Laufen, also führen Sie diesen Befehl im Terminal aus:
npx prisma migrate dev --name init
Sie können den Befehl pm2 status ausführen, um zu überprüfen, ob beide Server online sind und laufen, wie unten gezeigt. Um mehr über alle anderen PM2-Befehle zu erfahren, lesen Sie die Dokumentation zum PM2 Process Management Quick Start:
Sie können testen, ob die Server erreichbar sind, indem Sie diese Curl-Befehle im Terminal ausführen. Sie sollten den HTML-Code zurückerhalten, wenn sie funktionieren:
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
Gehen Sie zur IP-Adresse Ihres Hetzner-Servers. Wenn Sie alles richtig gemacht haben, sollte Ihre App bereitgestellt und online sein! Websites haben normalerweise Domänennamen und die IP-Adresse bleibt in der Suchleiste verborgen. Es ist durchaus üblich, dass Entwickler Domains kaufen und dann die Nameserver ändern, um sie mit dem Server eines Hosts zu verbinden. Dies würde den Rahmen dieses Tutorials sprengen, Sie können dies jedoch leicht erlernen, indem Sie eine Google-Suche durchführen. Namecheap ist mein bevorzugtes Domainregister.
Richtig, wir stehen kurz vor der Fertigstellung. Der letzte Schritt besteht nun darin, DeployHQ zu verwenden, um den Bereitstellungsprozess zu optimieren. DeployHQ erleichtert die Bereitstellung und ist aus Sicherheitsgründen viel besser. Der herkömmliche Weg, eine Codebasis auf einem Online-Server zu aktualisieren, besteht darin, git pull zu verwenden, um die neuesten Änderungen aus Ihrem GitHub-Repo abzurufen. Git Pull ist jedoch keine gute Vorgehensweise, da dadurch möglicherweise Git-Ordner offengelegt werden und die Website höchstwahrscheinlich nicht verkleinert, hässlich gemacht usw. wird.
DeployHQ spielt hier eine entscheidende Rolle. Es kopiert die geänderten Dateien sicher in den konfigurierten Ordner und stellt so sicher, dass in den Git-Protokollen auf Ihrem Server keine Änderungen sichtbar sind. Dies mag wie ein Kompromiss erscheinen, es handelt sich jedoch um eine Sicherheitsfunktion, die Ihnen die Sicherheit Ihrer Bereitstellung gewährleistet. Wenn Sie mit Plattformen wie Vercel oder Netlify vertraut sind, werden Sie feststellen, dass diese automatischen Bereitstellungen recht ähnlich sind. In diesem Fall haben Sie ein Setup, das mit jedem Online-Server auf einem VPS funktionieren kann.
Erwähnenswert ist, dass es wichtig ist, dass wir einen Nicht-Root-Benutzer für unseren Online-Linux-Remote-Server erstellen. Die Anmeldung als Root-Benutzer ist nicht immer die beste Vorgehensweise. Es ist besser, einen anderen Benutzer mit ähnlichen Rechten einzurichten. DeployHQ rät außerdem davon ab, den Root-Benutzer für die Anmeldung zu verwenden. Damit DeployHQ funktioniert, müssen wir uns über SSH bei unserem Konto anmelden. Wir werden dies tun, nachdem wir ein DeployHQ-Konto haben, da wir unseren öffentlichen DeployHQ-SSH-Schlüssel auf unserem Online-Ubuntu-Server platzieren müssen.
DeployHQ bietet Ihnen bei Ihrer ersten Anmeldung 10 Tage lang kostenlosen und unverbindlichen Zugriff auf alle Funktionen. Danach wird Ihr Konto auf einen kostenlosen Plan zurückgesetzt, der es Ihnen ermöglicht, ein einzelnes Projekt bis zu fünfmal am Tag bereitzustellen.
Beginnen Sie zunächst mit der DeployHQ-Website und erstellen Sie ein Konto, indem Sie auf eine der unten angezeigten Schaltflächen klicken:
Ok, Sie sollten jetzt den Willkommensbildschirm von DeployHQ mit der Schaltfläche „Projekt erstellen“ sehen. Klicken Sie auf die Schaltfläche, um ein Projekt wie hier gezeigt zu erstellen:
Auf dem nächsten Bildschirm müssen Sie ein neues Projekt erstellen. Geben Sie ihm also bitte einen Namen und wählen Sie Ihr GitHub-Repo aus. Wählen Sie außerdem eine Zone für Ihr Projekt und erstellen Sie dann ein Projekt:
Sie sollten nun den Serverbildschirm sehen, wie unten gezeigt. Dies bedeutet, dass es an der Zeit ist, einen weiteren Linux-Benutzer für unseren Remote-Server zu erstellen, damit wir uns nicht auf den Root-Benutzer verlassen müssen.
Melden Sie sich zunächst als Root-Benutzer bei Ihrem Server an und erstellen Sie dann mit dem folgenden Befehl einen neuen Benutzer. Ersetzen Sie new_username durch einen Benutzernamen, den Sie für den neuen Benutzer verwenden möchten:
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Sie werden aufgefordert, ein Passwort festzulegen, und Sie werden aufgefordert, Details wie Ihren vollständigen Namen, Ihre Zimmernummer usw. einzugeben. Sie müssen nur ein Passwort festlegen. Sie können die anderen Eingabeaufforderungsschritte überspringen und sie leer lassen, indem Sie die Eingabetaste drücken, bis sie alle verschwunden sind.
Es ist auch eine gute Idee, den neuen Benutzer zur Sudo-Gruppe hinzuzufügen, damit er über Administratorrechte wie der Root-Benutzer verfügt. Tun Sie dies mit dem hier gezeigten Befehl:
mkdir backend cd backend bun init -y mkdir src touch src/server.ts
Der neue Benutzer benötigt nun SSH-Zugriff für den Server. Wechseln Sie zunächst zum neuen Benutzer und erstellen Sie dann mit diesen Befehlen das .ssh-Verzeichnis für ihn:
bun add hono prisma @prisma/client
Jetzt müssen wir unseren lokalen öffentlichen Schlüssel zu „authorized_keys“ auf dem Server hinzufügen, also kopieren Sie Ihren öffentlichen Schlüssel auf Ihrem lokalen Computer mit diesem Befehl:
npx prisma init
Öffnen Sie nun auf dem Server die Datei „authorized_keys“, damit sie mit dem Nano-Editor bearbeitet werden kann:
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
generator client {
provider = "prisma-client-js"
}
model WatchlistItem {
id Int @id @default(autoincrement())
name String
image String
rating Float
description String
releaseDate DateTime
genre String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Fügen Sie den kopierten öffentlichen Schlüssel in diese Datei ein. Bevor Sie die Datei speichern, kopieren Sie den DeployHQ-SSH-Schlüssel von der Serverseite und fügen Sie ihn in dieselbe Datei ein. Sie können den SSH-Schlüssel sehen, wenn Sie das Kontrollkästchen SSH-Schlüssel statt Passwort zur Authentifizierung verwenden? aktivieren. Speichern Sie nun die Datei und legen Sie mit diesem Befehl die richtigen Berechtigungen für die Datei fest:
npx prisma migrate dev --name init
Sie können jetzt die SSH-Anmeldung für den neuen Benutzer testen. Melden Sie sich zunächst vom Remote-Server ab und versuchen Sie dann erneut, sich anzumelden, diesmal jedoch mit dem neuen Benutzer, den Sie erstellt haben, und nicht mit Root. Siehe das Beispiel unten:
import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { PrismaClient } from '@prisma/client';
const app = new Hono();
app.use(cors());
const prisma = new PrismaClient();
app.get('/watchlist', async (c) => {
const items = await prisma.watchlistItem.findMany();
return c.json(items);
});
app.get('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const item = await prisma.watchlistItem.findUnique({
where: { id: Number(id) },
});
return item ? c.json(item) : c.json({ error: 'Item not found' }, 404);
});
app.post('/watchlist', async (c) => {
const data = await c.req.json();
const newItem = await prisma.watchlistItem.create({ data });
return c.json(newItem);
});
app.put('/watchlist/:id', async (c) => {
const id = c.req.param('id');
const data = await c.req.json();
const updatedItem = await prisma.watchlistItem.update({
where: { id: Number(id) },
data,
});
return c.json(updatedItem);
});
app.delete('/watchlist/:id', async (c) => {
const id = c.req.param('id');
await prisma.watchlistItem.delete({ where: { id: Number(id) } });
return c.json({ success: true });
});
Bun.serve({
fetch: app.fetch,
port: 8000,
});
console.log('Server is running on http://localhost:8000');
export default app;
Vorausgesetzt, Sie haben alles richtig gemacht, sollten Sie sich jetzt mit Ihrem neuen Benutzer anmelden können.
Jetzt können wir endlich das Serverformular ausfüllen. Füllen Sie das Formular mit Ihren Informationen aus, siehe folgendes Beispiel:
Name: Watchlist-Tracker-App
Protokoll: SSH/SFTP
Hostname: 11.11.111.111
Hafen: 22
Benutzername: neuer_Benutzername
SSH-Schlüssel statt Passwort zur Authentifizierung verwenden?:markiert
Bereitstellungspfad: /var/www/watchlist-tracker-app
Der Bereitstellungspfad sollte der Speicherort auf Ihrem Server sein, an dem sich Ihr GitHub-Repo befindet. Jetzt können Sie fortfahren und einen Server erstellen. Wenn Sie auf Probleme stoßen, liegt das möglicherweise an Ihren Firewall-Einstellungen. Lesen Sie daher die Dokumentation zu „Welche IP-Adressen soll ich durch meine Firewall zulassen?“.
Sie sollten jetzt den Bildschirm „Neue Bereitstellung“ sehen, wie hier gezeigt:
Nach einer erfolgreichen Bereitstellung sollte Ihnen dieser Bildschirm angezeigt werden:
Der letzte Schritt besteht darin, automatische Bereitstellungen einzurichten, sodass, wenn Sie Änderungen von Ihrem lokalen Repository an GitHub übertragen, diese automatisch auf Ihrem Remote-Server bereitgestellt werden. Sie können dies über die Seite „Automatische Bereitstellungen“ tun, die sich in der linken Seitenleiste Ihres DeployHQ-Kontos befindet. Sehen Sie sich das Beispiel hier an:
Wir sind alle fertig; Herzlichen Glückwunsch, Sie haben gelernt, wie Sie eine Full-Stack-React-Anwendung erstellen, die Codebasis auf GitHub bereitstellen, die Anwendung auf einem VPS mit Linux Ubuntu hosten und automatische Bereitstellungen mit DeployHQ einrichten. Dein Entwicklerspiel ist aufgestiegen!
Es ist effizient und macht Spaß, eine Full-Stack-CRUD-App wie Watchlist Tracker mit modernen Tools und Technologien zu erstellen. Wir haben einen ziemlich starken Tech-Stack verwendet: Bun, Hono, Prisma ORM und SQLite im Back-End, während Vite, Tailwind CSS und TanStack Router im Front-End dazu beitragen, dass es reaktionsfähig und funktionsfähig ist. Hetzner stellt sicher, dass die App zuverlässig und leistungsstark ist, egal wo sich die Benutzer befinden.
Die Bereitstellung durch DeployHQ macht die Bereitstellung recht einfach. Sie müssen Updates lediglich direkt von Ihrem Git-Repository auf den Cloud-Server übertragen. Alle Änderungen, die Sie an Ihrem Repository vornehmen, werden automatisch auf Ihrem Produktionsserver bereitgestellt, sodass die neueste Version Ihrer Anwendung live ist. Dies spart Zeit, da automatisierte Bereitstellungen die Anzahl der mit der Bereitstellung verbundenen Fehler reduzieren. Daher lohnt es sich, sie in jede Form von Entwicklungsworkflow einzubauen.
Dieses Tutorial soll Ihnen dabei helfen, alle Arten von Anwendungen mithilfe eines VPS wie Hetzner mit automatischen Git-Bereitstellungen dank DeployHQ in der Produktion bereitzustellen.
Das obige ist der detaillierte Inhalt vonBereitstellen einer React Watchlist Tracker-App für die Produktion mit DeployHQ. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Mul-Anweisungsverwendung
Datei im DAT-Format
So passen Sie die Helligkeit des Computerbildschirms an
Wie man die Fans von Douyin schnell und effektiv steigert
So schließen Sie die App-Ressourcenbibliothek
Einführung in die Lightning-Schnittstelle
Vue verweist auf JS-Dateien
Häufig verwendete Permutations- und Kombinationsformeln
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
