Dies ist ein Beispiel dafür, wie du eine React-Anwendung oder eine statische Seite für die Bereitstellung auf den Hosting-Diensten von Kinsta für Anwendungen oder statische Seiten von einem GitHub-Repository aus einrichtest.
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.
Kinsta installiert die in deiner package.json Datei definierten Abhängigkeiten automatisch während des Deployment-Prozesses.
Statisches Seiten Hosting
- Melde dich bei GitHub an und erstelle ein neues Repository mit diesem Template (Dieses Template verwenden > Ein neues Repository erstellen): Kinsta – Hello World – React.
- Füge in MyKinsta eine statische Seite mit dem Hello World – React Repository und den folgenden Build-Einstellungen hinzu:
- Build-Befehl:
npm run build - Node Version: 18.16.0
- Öffentliches Verzeichnis: build
- Build-Befehl:
- Die Seite ist verfügbar, sobald die Erstellung abgeschlossen ist und die Kinsta-Willkommensseite unter der URL deiner Seite geladen wird.
Anwendungs-Hosting
- Melde dich bei GitHub an und erstelle ein neues Repository aus dieser Vorlage (Diese Vorlage verwenden > Neues Repository erstellen): Kinsta – Hello World – React.
- Füge in MyKinsta eine Anwendung mit dem Hello World – React Repository hinzu. Der Start-Befehl kann für den Webprozess leer gelassen werden, da Kinsta den erforderlichen Befehl beim ersten Einsatz automatisch erkennt.
- Die App ist verfügbar, sobald der Build 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 codieren.
Startbefehl
Kinsta erstellt beim Deployment einer Anwendung automatisch einen Webprozess, der auf dem Befehl npm start in der Datei package.json basiert.
Deployment-Lebenszyklus
Immer, wenn eine Bereitstellung initiiert wird (durch die Erstellung einer Anwendung oder eine erneute Bereitstellung aufgrund eines eingehenden Commits), werden die Befehle npm start und npm build ausgeführt.
Willkommensseite
Die App oder Seite ist verfügbar, sobald der Build abgeschlossen ist und die Kinsta-Willkommensseite unter der URL deiner Anwendung oder statischen Seite geladen wird.
