React mit Vite auf Lizard bereitstellen

Lizard erstellt eine React-App, die Vite verwendet, und liefert ihr Verzeichnis dist/ über nginx auf Port 80 aus. Diese Anleitung behandelt eine im Browser gerenderte App. Für React-Seiten, die einen Server benötigen, folge der Next.js-Anleitung oder stelle einen Produktionsserver für dein gewähltes React-Framework bereit.

Build vorbereiten

Verwende ein bestehendes React- und Vite-Projekt mit einer eingecheckten Lockfile. Seine package.json benötigt ein Produktions-Build-Skript:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Wenn dein Scaffold vor vite build TypeScript-Prüfungen ausführt, behalte diese Prüfungen bei. Behalte Vites Standard-Ausgabeverzeichnis dist bei. Ein benutzerdefiniertes build.outDir benötigt ein passendes Dockerfile, weil der Standard-Erkennungspfad dist kopiert.

Lokal testen

npm ci
npm run build
npm run preview

Öffne die lokale Preview-URL und teste eine Seite, die deine API aufruft. Der Preview-Befehl prüft den Build lokal; setze vite preview nicht als Produktions-Startbefehl. Siehe Vite deployment.

Den Quellcode bereitstellen

Führe nach dem CLI-Setup im Verzeichnis mit package.json Folgendes aus:

lizard init --name react-app
lizard add --service web
lizard up --service web --port 80
lizard logs --build --service web --json
lizard ps --json

Lade den Quellcode und die Lockfile hoch, aber schließe node_modules/, dist/ und Secrets aus. Lasse Überschreibungen für Service-Build/Start deaktiviert, um den statischen Erkennungspfad zu verwenden. Der nginx-Container lauscht auf Port 80, obwohl die Entwicklungs- und Preview-Server andere Ports verwenden.

Eine API verbinden

Verwende eine öffentliche Variable wie VITE_API_URL für die per HTTPS im Browser erreichbare Adresse der API. Lies sie als import.meta.env.VITE_API_URL aus. Konfiguriere diesen Wert über Variablen und Secrets und erstelle die App neu, wenn er sich ändert. Stelle niemals eine Datenbank-URL, API-Zugangsdaten oder eine nur intern erreichbare Service-Adresse über eine Variable vom Typ VITE_* bereit.

Für eine API auf einer anderen Origin konfiguriere die erlaubten Origins so, dass sie die Frontend-URL einschließen. Ein privater Service-Hostname, der zwischen Backend-Services funktioniert, wird im Browser eines Besuchers nicht aufgelöst.

Routing prüfen

Öffne die Live-App, folge einer Client-Route und lade diese URL dann direkt neu. Der Standard-Static-Server fällt auf index.html zurück, damit der Client-Router eine interne Route rendern kann. Füge auch in der React-App eine Route für unbekannte Pfade hinzu. Dieser Fallback liefert weiterhin HTTP 200 zurück; verwende statische Routen und 404s, um eine Serverrichtlinie für Seiten zu wählen, die echte HTTP-404-Antworten benötigen.

Wenn ein Asset HTML zurückgibt oder die Seite leer bleibt, prüfe Vites base, die angeforderte Asset-URL und das Ausgabeverzeichnis. Wenn die App nie healthy wird, prüfe, ob der Service-Port 80 ist und ob keine alte Überschreibung des Startbefehls einen anderen Build-Pfad ausgewählt hat.

Prüfe bei Seiten, die in der Suche erscheinen sollen, die anfängliche HTML-Antwort. Eine im Browser gerenderte Shell enthält möglicherweise nicht den Text, den eine Suchmaschine oder Answer Engine lesen soll. Wähle Prerendering oder ein Server-Framework, wenn du diesen Text in der Antwort benötigst.

Siehe getestete Versionen und Cloud-Ergebnisse für die Bereitstellungsprüfungen vom 9. September 2026 und ihre Grenzen.