Wöchentliches GitHub-Projekt: NewsNow – Elegantes Lesen von Trendnachrichten in Echtzeit

*Wöchentliches GitHub-Projekt: NewsNow – Elegantes Lesen von Echtzeit-Trends *

Projekteinführung

Diese Woche stellen wir NewsNow vor, eine Plattform zur Nachrichtenaggregation, mit der Sie Trendnachrichten in Echtzeit elegant lesen können. NewsNow aggregiert schnell Echtzeitnachrichten aus mehreren Datenquellen und bietet so ein reibungsloses Leseerlebnis, das Benutzern den einfachen Zugriff auf die neuesten Trendinformationen erleichtert. Dieses Projekt unterstützt die GitHub-OAuth-Anmeldung und nutzt die Cloudflare D1-Datenbank zum Verwalten und Speichern von Daten.

In diesem Leitfaden werde ich Sie Schritt für Schritt durch den Prozess der Bereitstellung dieses Open-Source-Projekts auf Cloudflare Pages führen. Sie erfahren, wie Sie die GitHub-OAuth-Anmeldung einrichten, die Cloudflare D1-Datenbank konfigurieren und das Projekt erfolgreich bereitstellen.

Bereitstellungshandbuch

1. Vorbereitung

1.1 Erforderliche Konten

• GitHub-Konto: Zum Forken und Verwalten des Projektcodes.
• Cloudflare-Konto: Zum Bereitstellen und Hosten des Projekts.

1.2 GitHub OAuth-Anwendungs-Setup

Um die GitHub-Anmeldung zu aktivieren, müssen Sie eine OAuth-Anwendung auf GitHub erstellen.

1. Melden Sie sich bei GitHub an und gehen Sie zu den Entwicklereinstellungen.
2. Wählen Sie OAuth-Apps und klicken Sie auf Neue OAuth-App.
3. Geben Sie die Bewerbungsdaten ein:
   • Anwendungsname: NewsNow (oder ein beliebiger Name, den Sie bevorzugen).
   • Homepage-URL: Verwenden Sie vorerst die URL Ihres geforkten GitHub-Repositorys, z. B. https://github.com/your-username/newsnow. Sie können dies später in die bereitgestellte URL ändern.
   • Autorisierungs-Rückruf-URL: Verwenden Sie das Format https://your-cloudflare-pages-url/api/auth/callback und ersetzen Sie Ihre-cloudflare-pages-url nach der Bereitstellung durch Ihre Cloudflare Pages-URL.
4. Speichern Sie nach der Registrierung die Kunden-ID und das Kundengeheimnis.

2. Forken Sie das GitHub-Projekt

1. Gehen Sie zur ursprünglichen Projektseite auf GitHub: NewsNow Project.
2. Klicken Sie oben rechts auf die Schaltfläche Fork, um das Projekt in Ihr GitHub-Konto zu verzweigen.

3. Cloudflare Pages-Bereitstellung

3.1 GitHub verbinden

1. Melden Sie sich bei Ihrem Cloudflare-Konto an.
2. Gehen Sie im Cloudflare-Dashboard im linken Menü zu „Arbeiter & Seiten“.
3. Klicken Sie auf „Projekt erstellen“ und wählen Sie „Mit Git verbinden“.
4. Autorisieren Sie Cloudflare für den Zugriff auf Ihr GitHub-Konto und wählen Sie das Newsnow-Repository aus, das Sie geforkt haben.

3.2 Cloudflare Pages-Projekt konfigurieren

1. Wählen Sie das Newsnow-Repository und fahren Sie mit der Seite mit den Build-Einstellungen fort.
2. Richten Sie die Build-Parameter ein:
   • Framework-Voreinstellung: Wählen Sie „Keine“.
   • Build-Befehl: Geben Sie pnpm install && pnpm build ein.
   • Ausgabeverzeichnis erstellen: Geben Sie dist.
   ein

3.3 Umgebungsvariablen konfigurieren

1. Klicken Sie auf der Seite mit den Build-Einstellungen auf „Umgebungsvariablen (erweitert)“.
2. Fügen Sie die folgenden Umgebungsvariablen hinzu:
   • G_CLIENT_ID: Die Client-ID Ihrer GitHub OAuth-Anwendung.
   • G_CLIENT_SECRET: Das Client-Geheimnis Ihrer GitHub-OAuth-Anwendung.
   • JWT_SECRET: Es wird empfohlen, denselben Wert wie G_CLIENT_SECRET zu verwenden.
   • INIT_TABLE: Wird für die erste Bereitstellung zur Initialisierung der Datenbank auf „true“ gesetzt.

4. Erstellen Sie eine Cloudflare D1-Datenbank

4.1 Erstellen Sie die Datenbank

1. Navigieren Sie im Cloudflare-Dashboard zu „Arbeiter & Seiten“ -> "D1 SQL-Datenbank".
2. Klicken Sie auf „Datenbank erstellen“ und geben Sie einen Namen ein, z. B. newsnow_db.
3. Notieren Sie sich die Datenbank-ID und den Datenbanknamen.

4.2 Konfigurieren Sie die wrangler.toml-Datei

1. Erstellen oder bearbeiten Sie in Ihrem GitHub-Repository die Datei wrangler.toml im Stammverzeichnis des Projekts.
2. Fügen Sie die folgende Konfiguration zur Datei wrangler.toml hinzu:

   name = "newsnow-project"  # Your project name
   type = "javascript"

   [[d1_databases]]
   binding = "NEWSNOW_DB"
   database_name = "your_database_name"  # Replace with your created database name
   database_id = "your_database_id"      # Replace with your created database ID

1. Übertragen Sie die Änderungen an GitHub.

4.3 Stellen Sie das Projekt erneut bereit

1. Gehen Sie zurück zur Cloudflare Pages-Projektseite.
2. Klicken Sie auf die Schaltfläche „Bereitstellen“, um das Projekt erneut bereitzustellen.

5. Bereitstellungsüberprüfung

5.1 Auf das Projekt zugreifen

1. Warten Sie, bis die Bereitstellung abgeschlossen ist.
2. Besuchen Sie die von Cloudflare Pages bereitgestellte URL, um sicherzustellen, dass die Seite korrekt geladen wird.

5.2 Datenbankinitialisierungseinstellung anpassen

1. Wenn das Projekt erfolgreich bereitgestellt wurde und die Daten korrekt geladen werden, kehren Sie zu den Cloudflare Pages-Projekteinstellungen zurück.
2. Ändern Sie die Umgebungsvariable INIT_TABLE von true in false, um zu verhindern, dass die Datenbank bei zukünftigen Bereitstellungen neu initialisiert wird.

5.3 Testen Sie die GitHub-OAuth-Anmeldung

1. Versuchen Sie, sich mit Ihrem GitHub-Konto anzumelden.
2. Wenn die Anmeldung fehlschlägt, überprüfen Sie, ob die Autorisierungsrückruf-URL in den GitHub-OAuth-Einstellungen mit der Cloudflare Pages-URL übereinstimmt.

6. Optionale Konfiguration und Erweiterungen

6.1 Benutzerdefinierte Domäne

• Wenn Sie über eine eigene Domäne verfügen, können Sie in Cloudflare Pages eine benutzerdefinierte Domäne einrichten.

6.2 Datenquellen erweitern

• Ändern oder fügen Sie neue Datenquellen hinzu, indem Sie die Verzeichnisse „shared/metadata“, „shared/sources“ und „server/sources“ entsprechend Ihren Anforderungen bearbeiten.

6.3 Debugging und Protokolle

• Verwenden Sie die von Cloudflare bereitgestellten Debugging- und Protokollierungstools, um die Leistung des Projekts zu überwachen.

Das obige ist der detaillierte Inhalt vonWöchentliches GitHub-Projekt: NewsNow – Elegantes Lesen von Trendnachrichten in Echtzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!