Dies ist ein Beispiel dafür, wie du eine React-Anwendung oder eine statische Seite mit Vite einrichtest, um sie über ein GitHub-Repository auf den Leistungen von Kinsta für das Hosting von Anwendungen oder statischen Seiten 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.
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 – Vite + React.
- Füge in MyKinsta eine statische Seite mit dem Hello World – Vite + React Repository und den folgenden Build-Einstellungen hinzu:
- Build-Befehl:
npm run build - Node Version: 18.16.0
- Öffentliches Verzeichnis: dist
- 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 – Vite + React.
- Füge in MyKinsta eine Anwendung mit dem Hello World – Vite + React Repository hinzu. Der Startbefehl kann für den Webprozess leer gelassen werden, da Kinsta den erforderlichen Befehl bei der ersten Bereitstellung 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 sie 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 install 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.
