Statische React-App-Bereitstellung mit Vite

React-Apps, die mit Vite erstellt wurden, sind für ihre Geschwindigkeit und Effizienz bekannt. Die Bereitstellung dieser Anwendungen als statische Websites gewährleistet schnelle Leistung und Skalierbarkeit. In diesem Blog führen wir Sie durch die Bereitstellung einer statischen React-App mit Vite und nutzen moderne Plattformen, um den Prozess zu vereinfachen.

Was ist Vite?

Vite ist ein Front-End-Tool-Framework der nächsten Generation, das die Entwicklungsgeschwindigkeit durch sofortigen Serverstart und blitzschnellen Hot Module Swapping (HMR) optimiert. Es ist ideal für moderne Webanwendungen, einschließlich React-Projekte.

Warum statische Bereitstellung?

Statische Bereitstellungen sind ideal für Projekte, die:

• Sie benötigen kein serverseitiges Rendering (SSR).
• Hosting ist kostengünstig (oft kostenlos).
• Bieten schnelleres Laden und hervorragende Caching-Funktionen.

Erste Schritte

Lassen Sie uns Schritt für Schritt eine mit Vite erstellte React-Anwendung bereitstellen.

Schritt 1: Projekteinrichtung

1. Erstellen Sie eine Vite React App

Führen Sie den folgenden Befehl aus, um eine neue React-App mit Vite zu erstellen:

npm create vite@latest my-vite-app --template react
cd my-vite-app
npm install

2. Starten Sie den Entwicklungsserver

Testen Sie Ihre Anwendung vor Ort:

npm run dev

Schritt 2: Erstellen Sie ein Projekt für die Produktion

1. Bearbeiten Sie die Datei vite.config.js, um den Basispfad bei der Bereitstellung in einem Unterverzeichnis festzulegen.

Beispiel:

export default defineConfig({
    base: '/your-subdirectory/',
    plugins: [react()],
});

Erstellen Sie die Anwendung:

npm run build

Dadurch wird ein dist-Ordner mit optimierten statischen Dateien generiert.

Schritt 3: Statische Dateien bereitstellen

Sie können Ihre Anwendung auf jeder dieser Plattformen bereitstellen. Wir werden die Bereitstellung mit FAB Builder und beliebten Cloud-Plattformen untersuchen.

Option 1: Bereitstellung mit FAB Builder

FAB Builder bietet eine effiziente Bereitstellungslösung, ideal für Benutzer mit minimaler Programmiererfahrung.

Schritte:

1. Statische Dateien hochladen

• Melden Sie sich bei FAB Builder an.
• Gehen Sie zum Abschnitt Bereitstellung.
• Laden Sie den von Vite generierten dist-Ordner hoch.

2. Domänenkonfiguration und -einstellungen

• Richten Sie Ihre eigene Domain ein oder verwenden Sie die Standard-URL von FAB Builder.
• Bestätigen Sie Konfigurationen wie SSL und Cache.

3. Bereitstellung

Klicken Sie auf die Schaltfläche Bereitstellen und Ihre statische React-App ist in wenigen Minuten betriebsbereit!

Option 2: Auf anderen Plattformen bereitstellen

Netlify

1. Installieren Sie Netlify CLI:

npm create vite@latest my-vite-app --template react
cd my-vite-app
npm install

2. Bereitstellung:

npm run dev

3. Befolgen Sie die Anweisungen zum Hochladen des Dist-Ordnerser.

Vercel

1. Vercel CLI installieren:

export default defineConfig({
    base: '/your-subdirectory/',
    plugins: [react()],
});

1. Bereitstellung:

npm run build

1. Vercel erkennt automatisch die Vite-Einstellungen und stellt Ihre Anwendung bereit.

GitHub-Seiten

1. Installieren Sie das GitHub Pages-Plugin:

npm install -g netlify-cli

1. Fügen Sie das Bereitstellungsskript zur Datei package.json hinzu:

netlify deploy --prod

1. Bereitstellung:

npm install -g vercel

FAB Builder: Zusätzliche Funktionen

FAB Builder bietet erweiterte Bereitstellungsfunktionen:

• Multi-Cloud-Hosting: Wählen Sie zwischen AWS, GCP, Azure oder FAB Cloud.
• Ein-Klick-Bereitstellung: Vereinfachen Sie die Bereitstellung von mit Vite erstellten Anwendungen.
• Git-Integration: Schieben Sie Ihren Code direkt in Git-Repositorys.

Vorteile der Verwendung von FAB Builder für die Bereitstellung

1. Keine harte Codierung: Vereinfachte Arbeitsabläufe für Entwickler auf allen Ebenen.
2. Kosteneffizienz: Sparen Sie erhebliche Entwicklungskosten durch Bereitstellungsautomatisierung.
3. Multi-Plattform-Unterstützung: Nahtlose Bereitstellung von Web-, Mobil- und Backend-Anwendungen.
4. Schnelle Bereitstellung: Mit minimalem Einrichtungs- und Konfigurationsaufwand einsatzbereit.

Fazit

Die Bereitstellung einer statischen React-App mit Vite ist unkompliziert, insbesondere mit Plattformen wie FAB Builder, die den Prozess vereinfachen. Egal, ob Sie Anfänger oder erfahrener Entwickler sind, diese Schritte helfen Ihnen, Ihre App schnell und effizient zum Laufen zu bringen.

Beginnen Sie noch heute mit der Erstellung Ihrer App mit FAB Builder und revolutionieren Sie Ihren Bereitstellungsprozess!

Das obige ist der detaillierte Inhalt vonStatische React-App-Bereitstellung mit Vite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!