JavaScript-Frameworks
Im Folgenden findest du Beispiele dafür, wie du Anwendungen mit JavaScript-Frameworks so einrichtest, dass sie über ein GitHub-Repository auf den Anwendungs-Hosting-Diensten von Kinsta bereitgestellt werden können. Dazu gehören:
Wir haben auch Beispiele für Node.js-Anwendungen.
Voraussetzungen
- Die Schnellstartvorlagen von Kinsta werden auf GitHub gespeichert und verwaltet. Daher brauchst du ein GitHub-Konto, um darauf zuzugreifen.
- Du musst ein MyKinsta-Konto erstellen, um die Anwendung bereitzustellen.
Astro SSR
Dieses Beispiel zeigt, wie du eine Astro-Site mit serverseitigem Rendering (SSR) auf den Anwendungs-Hosting-Diensten von Kinsta aus einem GitHub-Repository einrichtest.
Standardmäßig ist Astro ein statischer Site Builder, der sich auf inhaltsreiche Websites konzentriert, um mit weniger JavaScript schnellere Ladezeiten zu erreichen. Wenn du SSR in Astro aktivierst, kannst du dynamische Funktionen wie Sessions für die Anmeldung, die Verbindung mit einer Datenbank und mehr zu deiner Website hinzufügen. Weitere Informationen findest du auf der Astro-Website.
- Melde dich bei GitHub an und erstelle ein neues Repository aus dieser Vorlage (Diese Vorlage verwenden > Neues Repository erstellen): Kinsta – Hello World – SSR Site With Astro.
- Klicke in MyKinsta auf Anwendungen > Anwendung hinzufügen > wähle GitHub, klicke auf Git-Anbieter verbinden > Autorisieren und melde dich bei deinem GitHub-Konto an.
- Wähle das Hello World Astro SSR-Repository und einen Standort für das Rechenzentrum. Belasse alle anderen Einstellungen als Standard und klicke bei jedem Schritt auf Weiter.
- Klicke im Schritt Zusammenfassung auf Jetzt bereitstellen.
Während der Bereitstellung erkennt Kinsta automatisch den Startbefehl für den Webprozess und installiert die in deiner package.json-Datei definierten Abhängigkeiten. Die App ist verfügbar, sobald die Bereitstellung abgeschlossen ist und die Kinsta-Willkommensseite unter der URL deiner Anwendung geladen wird.
Willst du lieber die Videoversion sehen?
Webserver-Einrichtung
Port
Kinsta setzt automatisch die Umgebungsvariable PORT. Du solltest sie nicht selbst definieren oder in der Anwendung fest einprogrammieren.
Startbefehl
Wenn du die Anwendung bereitstellst, erstellt Kinsta automatisch einen Webprozess mit npm start als Startbefehl. Achte darauf, dass du diesen Befehl verwendest, um deinen Server zu starten.
Lebenszyklus der Bereitstellunf
Jedes Mal, wenn eine Bereitstellung gestartet wird (durch das Erstellen einer Anwendung oder ein erneutes Deployment aufgrund eines eingehenden Commits), wird der Befehl npm build ausgeführt, gefolgt von dem Befehl npm start.
Deno
Dieses Beispiel zeigt, wie du eine Deno-Anwendung einrichtest, um sie von einem GitHub-Repository aus auf den Anwendungs-Hosting-Diensten von Kinsta bereitzustellen.
Deno ist eine JavaScript-, TypeScript- und WebAssembly-Laufzeitumgebung, mit der du Code außerhalb eines Webbrowsers ausführen und sichere serverseitige Anwendungen erstellen kannst. Weitere Informationen findest du auf der Deno-Website.
- Melde dich bei GitHub an und erstelle ein neues Repository aus dieser Vorlage (Diese Vorlage verwenden > Neues Repository erstellen): Kinsta – Hello World – Deno.
- Klicke in MyKinsta auf Anwendungen > Anwendung hinzufügen > wähle GitHub, klicke auf Git-Anbieter verbinden > Autorisieren und melde dich bei deinem GitHub-Konto an.
- Wähle das Hello World – Deno Repository und einen Standort für das Rechenzentrum. Belasse alle anderen Einstellungen als Standard und klicke bei jedem Schritt auf Weiter.
- Klicke im Schritt Zusammenfassung auf Jetzt bereitstellen.
Während der Bereitstellung erkennt Kinsta automatisch den Startbefehl für den Webprozess und installiert die in deiner package.json-Datei definierten Abhängigkeiten. Die Anwendung ist verfügbar, sobald die Bereitstellung abgeschlossen ist und eine Hello World-Seite unter der URL deiner Anwendung geladen wird.
Webserver-Einrichtung
Port
Kinsta setzt automatisch die Umgebungsvariable PORT. Du brauchst sie nicht zu definieren oder fest in die Anwendung zu programmieren.
Startbefehl
Wenn du die Anwendung bereitstellst, erstellt Kinsta automatisch einen Webprozess mit npm start als Startbefehl.
Lebenszyklus der Bereitstellung
Jedes Mal, wenn eine Bereitstellung gestartet wird (durch das Erstellen einer Anwendung oder ein Re-Deployment aufgrund eines eingehenden Commits), wird npm build command ausgeführt, gefolgt von dem Befehl npm start.
Next.js mit Prisma ORM
Dieses Beispiel zeigt, wie du eine Next.js-Anwendung mit Prisma einrichtest, um sie von einem GitHub-Repository aus auf den Anwendungs-Hosting- und Datenbank-Hosting-Diensten von Kinsta bereitzustellen.
Prisma ist ein Open-Source-Datenbank-Toolkit, das den Datenbankzugriff für Entwickler durch eine typsichere und intuitive API vereinfacht. Es unterstützt mehrere Datenbanken und generiert effiziente, optimierte SQL-Abfragen für eine schnellere Leistung. Weitere Informationen findest du auf der Website prisma.io.
Diese Anwendung benötigt eine PostgreSQL-Datenbank, um zu funktionieren.
- Klicke in MyKinsta auf Datenbanken > Datenbank hinzufügen > gib einen Namen ein > wähle unter DatenbanktypPostgreSQL aus, wähle einen Speicherort für das Rechenzentrum und die Größe und klicke auf Weiter > Datenbank erstellen.
- Melde dich bei GitHub an und erstelle ein neues Repository aus dieser Vorlage (Diese Vorlage verwenden > Neues Repository erstellen): Kinsta – Hello World – Prisma.
- Klicke in MyKinsta auf Anwendungen > Anwendung hinzufügen > wähle GitHub, klicke auf Git-Anbieter verbinden > Autorisieren und melde dich bei deinem GitHub-Konto an.
- Wähle das Hello World – Prisma Repository und denselben Rechenzentrumsstandort wie deine Datenbank. Belasse alle anderen Einstellungen als Standard und klicke bei jedem Schritt auf Weiter.
- Klicke im Schritt Zusammenfassung auf Jetzt bereitstellen.
- Sobald die Datenbank für Verbindungen bereit ist (es wird ein grünes Häkchen daneben angezeigt), musst du die interne Verbindung zwischen deiner Anwendung und der Datenbank hinzufügen. Klicke auf Anwendungen > anwendungsname > Einstellungen > Verbindung hinzufügen.
- Wähle deine Datenbank > wähle Umgebungsvariablen hinzufügen… > wähle Umgebungsvariablen zur Anwendung hinzufügen > klicke auf Verbindung hinzufügen.
- Gehe auf die Seite Bereitstellungen der Anwendung und klicke auf Jetzt bereitstellen > Anwendung bereitstellen.
Während der Bereitstellung erkennt Kinsta automatisch den Startbefehl für den Webprozess und installiert die in deiner package.json-Datei definierten Abhängigkeiten. Die Anwendung ist verfügbar, sobald die Bereitstellung abgeschlossen ist und die Kinsta-Willkommensseite unter der URL deiner Anwendung geladen wird.
Webserver-Einrichtung
Port
Kinsta setzt automatisch die Umgebungsvariable PORT. Du solltest sie nicht selbst definieren und auch nicht fest in die Anwendung programmieren.
Startbefehl
Kinsta erstellt automatisch einen Webprozess, wenn du eine Anwendung mit npm start als Startbefehl bereitstellst. Achte darauf, dass du diesen Befehl verwendest, um deinen Server zu starten.
Bereitstellungs-Lebenszyklus
Immer wenn eine Bereitstellunf initiiert wird (durch das Erstellen einer Anwendung oder ein Redeployment aufgrund eines eingehenden Commits), wird der Befehl npm build ausgeführt, gefolgt von dem Befehl npm start.
React
Das folgende Beispiel zeigt, wie du eine React-Anwendung einrichtest, um sie von einem GitHub-Repository aus auf den Anwendungs-Hosting-Diensten von Kinsta bereitzustellen.
React ist eine beliebte JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen. Sie ermöglicht es Entwicklern, wiederverwendbare UI-Komponenten zu erstellen und die UI als Reaktion auf Datenänderungen effizient zu aktualisieren. Weitere Informationen findest du auf der React-Website.
- Melde dich bei GitHub an und erstelle ein neues Repository aus dieser Vorlage (Verwende diese Vorlage > Erstelle ein neues Repository): Kinsta – Hello World – React.
- Klicke in MyKinsta auf Anwendungen > Anwendung hinzufügen > wähle GitHub, klicke auf Git-Anbieter verbinden > Autorisieren und melde dich bei deinem GitHub-Konto an.
- Wähle das Hello World – React Repository und einen Standort für das Rechenzentrum. Belasse alle anderen Einstellungen als Standard und klicke bei jedem Schritt auf Weiter.
- Klicke im Schritt Zusammenfassung auf Jetzt bereitstellen.
Während der Bereitstellung erkennt Kinsta automatisch den Start-Befehl für den Webprozess und installiert die in deiner package.json-Datei definierten Abhängigkeiten. Die Anwendung ist verfügbar, sobald die Bereitstellung abgeschlossen ist und die Kinsta-Willkommensseite unter der URL deiner Anwendung geladen wird.
Webserver-Einrichtung
Port
Kinsta setzt automatisch die Umgebungsvariable PORT. Du solltest sie nicht selbst definieren und auch nicht fest in die Anwendung programmieren.
Start-Befehl
Kinsta erstellt beim Deployment einer Anwendung automatisch einen Webprozess, der auf dem Befehl npm start in der Datei package.json basiert.
Bereitstellungs-Lebenszyklus
Jedes Mal, wenn eine Bereitstellung gestartet wird (durch das Erstellen einer Anwendung oder ein Redeployment aufgrund eines eingehenden Commits), werden die Befehle npm start und npm build ausgeführt.
React mit Vite
Das folgende Beispiel zeigt, wie du eine React-Anwendung mit Vite einrichtest, um sie über ein GitHub-Repository auf den Anwendungs-Hosting-Diensten von Kinsta bereitzustellen.
Vite ist ein Tool, mit dem du dezentrale Anwendungen erstellen kannst. Es bietet Entwickler-Tools und APIs, um den Entwicklungsprozess zu vereinfachen und unterstützt mehrere Programmiersprachen. Weitere Informationen findest du auf der Vite-Website.
React ist eine beliebte JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen. Sie ermöglicht es Entwicklern, wiederverwendbare UI-Komponenten zu erstellen und die UI als Reaktion auf Datenänderungen effizient zu aktualisieren. Weitere Informationen findest du auf der React-Website.
- Melde dich bei GitHub an und erstelle ein neues Repository aus dieser Vorlage (Verwende diese Vorlage > Erstelle ein neues Repository): Kinsta – Hello World – Vite + React.
- Klicke in MyKinsta auf Anwendungen > Anwendung hinzufügen > wähle GitHub, klicke auf Git-Anbieter verbinden > Autorisieren und melde dich bei deinem GitHub-Konto an.
- Wähle das Hello World – Vite + React Repository und einen Standort für das Rechenzentrum. Belasse alle anderen Einstellungen als Standard und klicke bei jedem Schritt auf Weiter.
- Klicke im Schritt Zusammenfassung auf Jetzt bereitstellen.
Während der Bereitstellung erkennt Kinsta automatisch den Startbefehl für den Webprozess und installiert die in deiner package.json-Datei definierten Abhängigkeiten. Die App ist verfügbar, sobald die Bereitstellung abgeschlossen ist und die Kinsta-Willkommensseite unter der URL deiner Anwendung geladen wird.
Webserver-Einrichtung
Port
Kinsta setzt automatisch die Umgebungsvariable PORT. Du solltest sie nicht selbst definieren und auch nicht fest in die Anwendung programmieren.
Start-Befehl
Kinsta erstellt bei der Bereitstellung einer Anwendung automatisch einen Webprozess, der auf dem Befehl npm start in der Datei package.json basiert.
Bereitstellungs-Lebenszyklus
Immer, wenn eine Bereitstellung initiiert wird (durch die Erstellung einer Anwendung oder eine erneute Bereitstellung aufgrund eines eingehenden Commits), werden die Befehle npm install und npm build ausgeführt.