Viele Entwickler finden es schwierig, React-Apps bereitzustellen, insbesondere diejenigen, die mit dem Ökosystem nicht vertraut sind. Mit GitHub Pages können Sie Ihre statischen Webseiten, einschließlich React-Apps, kostenlos und einfach hosten. Mithilfe dieses ausführlichen Tutorials, das Sie durch jeden Schritt des Prozesses führt, wird die Bereitstellung Ihrer React-Apps auf GitHub-Seiten einfach und problemlos.

1. Einführung in GitHub-Seiten

GitHub Pages ist ein statischer Site-Hosting-Dienst, der darauf ausgelegt ist, Ihre persönlichen, Organisations- oder Projektseiten direkt aus einem GitHub-Repository zu hosten. Es bietet eine nahtlose Integration in Ihren GitHub-Workflow und ist somit die ideale Wahl für das Hosten von React-Apps.

Hauptvorteile:

Kostenlos und einfach zu verwenden.

Unterstützt benutzerdefinierte Domänen.

Erstellt und stellt Ihre Website automatisch bereit.

Weitere Informationen finden Sie in der GitHub Pages-Dokumentation.

1. Einrichten Ihrer React-App

Bevor Sie Ihre React-App auf GitHub Pages bereitstellen, stellen Sie sicher, dass Sie über eine funktionierende React-Anwendung verfügen. Wenn Sie noch keine haben, können Sie mit Create React App (CRA) eine neue React-App erstellen.

npx create-react-app my-react-app
cd my-react-app

Dieser Befehl richtet ein neues React-Projekt mit allen erforderlichen Konfigurationen ein.

1. Vorbereiten Ihrer React-App für die Bereitstellung

Um eine React-App auf GitHub Pages bereitzustellen, müssen Sie einige Änderungen an der Konfiguration Ihrer App vornehmen.

GitHub Pages-Paket installieren:

npm install gh-pages --save-dev

Paket.json aktualisieren:

Fügen Sie die folgenden Felder zu Ihrer package.json-Datei hinzu:

"homepage": "https://.github.io/",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Ersetzen Sie es durch Ihren GitHub-Benutzernamen und den Namen Ihres Repositorys.

1. Erstellen eines GitHub-Repositorys

Gehen Sie zu GitHub und erstellen Sie ein neues Repository.

Nennen Sie Ihr Repository und setzen Sie es auf öffentlich.

Nicht mit einer README-Datei, .gitignore oder einer Lizenz initialisieren, da diese später hinzugefügt werden.

1. Bereitstellen Ihrer React-App auf GitHub-Seiten

Jetzt, da Ihre React-App fertig ist und Sie über ein GitHub-Repository verfügen, ist es Zeit für die Bereitstellung.

Git initialisieren und an GitHub senden:

git init
git remote add origin https://github.com//.git
git add .
git commit -m "Initial commit"
git push -u origin master

Stellen Sie Ihre App bereit:

npm run deploy

Dieser Befehl erstellt Ihre App und stellt sie im gh-pages-Zweig Ihres Repositorys bereit.

1. Häufige Bereitstellungsprobleme und Fehlerbehebung

Bei der Bereitstellung von React-Apps auf GitHub-Seiten können manchmal Probleme auftreten. Hier sind häufige Probleme und ihre Lösungen:

404-Fehler: Stellen Sie sicher, dass das Homepage-Feld in package.json richtig eingestellt ist.

Build-Fehler: Überprüfen Sie Ihre Build-Skripte und stellen Sie sicher, dass alle Abhängigkeiten installiert sind.

CORS-Probleme: Stellen Sie sicher, dass Ihre API-Endpunkte CORS unterstützen, wenn Sie ursprungsübergreifende Anfragen stellen.

Weitere Tipps zur Fehlerbehebung finden Sie im GitHub Pages Troubleshooting Guide.

1. Bereitstellungen mit GitHub-Aktionen automatisieren

GitHub Actions bietet leistungsstarke CI/CD-Funktionen, die Ihren Bereitstellungsprozess automatisieren können. So richten Sie es ein:

Erstellen Sie eine Workflow-Datei:

Erstellen Sie in Ihrem Repository eine Datei mit dem Namen .github/workflows/deploy.yml.

Bereitstellungsskript hinzufügen:

Name: React-App auf GitHub-Seiten bereitstellen

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Build the React app
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

Dieser Workflow stellt Ihre React-App automatisch bereit, wenn Sie Änderungen an den Master-Zweig übertragen.

1. Erweiterte Bereitstellungstechniken

Über die Grundlagen hinaus gibt es mehrere fortgeschrittene Techniken, mit denen Sie Ihren Bereitstellungsprozess verbessern können:

Benutzerdefinierte Domänen: Sie können eine benutzerdefinierte Domäne mit Ihrer GitHub Pages-Site verwenden, indem Sie eine CNAME-Datei zu Ihrem Repository hinzufügen.

HTTPS-Erzwingung: Stellen Sie sicher, dass Ihre Website immer über HTTPS bereitgestellt wird, indem Sie die HTTPS-Option in Ihren Repository-Einstellungen aktivieren.

Branch-Bereitstellungen: Bereitstellung aus verschiedenen Branches für Staging- und Produktionsumgebungen.

Detaillierte Informationen finden Sie im GitHub Pages Custom Domain Guide.

1. Best Practices für die Bereitstellung von React Apps

Um eine erfolgreiche Bereitstellung und ein qualitativ hochwertiges Benutzererlebnis zu gewährleisten, befolgen Sie diese Best Practices:

Optimieren Sie Ihren Build: Verwenden Sie Tools wie Webpack und Babel, um Ihre JavaScript-Bundles zu optimieren.

Umgebungsvariablen verwenden: Verwalten Sie Ihre umgebungsspezifischen Einstellungen mithilfe von Umgebungsvariablen.

Leistung überwachen: Verwenden Sie Leistungsüberwachungstools, um die Leistung Ihrer bereitgestellten App zu verfolgen und zu verbessern.

Weitere Best Practices finden Sie im React Deployment Guide.

1. Abschluss

Die Bereitstellung von React-Apps auf GitHub-Seiten ist ein unkomplizierter Prozess, der das Hosting und die Verwaltung Ihrer statischen Websites erheblich vereinfachen kann. Indem Sie die in diesem Leitfaden beschriebenen Schritte befolgen, können Sie einen reibungslosen und effizienten Bereitstellungsprozess gewährleisten.

Wenn Sie diesem Leitfaden folgen, sind Sie bestens gerüstet, um Ihre React-Apps auf GitHub Pages bereitzustellen und die Leistungsfähigkeit der Hosting-Funktionen von GitHub zu nutzen, um Ihre Anwendungen der Welt bereitzustellen.