Projet GitHub hebdomadaire : NewsNow - Lire avec élégance les actualités tendances en temps réel

*Projet GitHub hebdomadaire : NewsNow - Lecture élégante des tendances en temps réel *

Présentation du projet

Cette semaine, nous présentons NewsNow, une plateforme d'agrégation d'actualités qui vous permet de lire élégamment les actualités tendances en temps réel. NewsNow regroupe rapidement les actualités en temps réel provenant de plusieurs sources de données, offrant une expérience de lecture fluide qui aide les utilisateurs à accéder facilement aux dernières informations sur les tendances. Ce projet prend en charge la connexion GitHub OAuth et utilise la base de données Cloudflare D1 pour gérer et stocker les données.

Dans ce guide, je vais vous guider pas à pas à travers le processus de déploiement de ce projet open source sur Pages Cloudflare. Vous apprendrez comment configurer la connexion GitHub OAuth, configurer la base de données Cloudflare D1 et déployer avec succès le projet.

Guide de déploiement

1. Préparation

1.1 Comptes requis

• Compte GitHub : pour créer et gérer le code du projet.
• Compte Cloudflare : Pour déployer et héberger le projet.

1.2 Configuration de l'application GitHub OAuth

Pour activer la connexion à GitHub, vous devez créer une application OAuth sur GitHub.

1. Connectez-vous à GitHub et accédez aux paramètres du développeur.
2. Choisissez Applications OAuth et cliquez sur Nouvelle application OAuth.
3. Remplissez les détails de la candidature :
   • Nom de l'application : NewsNow (ou tout autre nom que vous préférez).
   • URL de la page d'accueil : utilisez pour l'instant l'URL de votre référentiel GitHub forké, par exemple https://github.com/your-username/newsnow. Vous pourrez modifier cela ultérieurement par l'URL déployée.
   • URL de rappel d'autorisation : utilisez le format https://your-cloudflare-pages-url/api/auth/callback, en remplaçant votre-cloudflare-pages-url par l'URL de vos pages Cloudflare après le déploiement.
4. Après l'inscription, enregistrez le ID client et le Secret client.

2. Forkez le projet GitHub

1. Accédez à la page du projet original sur GitHub : NewsNow Project.
2. Cliquez sur le bouton Fork en haut à droite pour transférer le projet vers votre compte GitHub.

3. Déploiement des pages Cloudflare

3.1 Connectez GitHub

1. Connectez-vous à votre compte Cloudflare.
2. Dans le tableau de bord Cloudflare, accédez à "Workers & Pages" dans le menu de gauche.
3. Cliquez sur "Créer un projet" et choisissez « Se connecter à Git ».
4. Autorisez Cloudflare à accéder à votre compte GitHub et sélectionnez le référentiel newsnow que vous avez créé.

3.2 Configurer le projet Cloudflare Pages

1. Choisissez le référentiel newsnow et accédez à la page des paramètres de build.
2. Configurez les paramètres de construction :
   • Framework preset : Choisissez Aucun.
   • Commande Build : Entrez pnpm install && pnpm build.
   • Construire le répertoire de sortie : Entrez dist.

3.3 Configurer les variables d'environnement

1. Sur la page des paramètres de build, cliquez sur "Variables d'environnement (avancées)".
2. Ajoutez les variables d'environnement suivantes :
   • G_CLIENT_ID : ID client de votre application GitHub OAuth.
   • G_CLIENT_SECRET : le secret client de votre application GitHub OAuth.
   • JWT_SECRET : Il est recommandé d'utiliser la même valeur que G_CLIENT_SECRET.
   • INIT_TABLE : défini sur true pour le premier déploiement pour initialiser la base de données.

4. Créer une base de données Cloudflare D1

4.1 Créer la base de données

1. Dans le tableau de bord Cloudflare, accédez à "Workers & Pages" -> "Base de données SQL D1".
2. Cliquez sur « Créer une base de données » et entrez un nom, par exemple newsnow_db.
3. Notez l'ID de la base de données et le Nom de la base de données.

4.2 Configurer le fichier wrangler.toml

1. Dans votre référentiel GitHub, créez ou modifiez le fichier wrangler.toml dans le répertoire racine du projet.
2. Ajoutez la configuration suivante au fichier wrangler.toml :

   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. Validez les modifications sur GitHub.

4.3 Redéployer le projet

1. Retournez à la page du projet Cloudflare Pages.
2. Cliquez sur le bouton « Déployer » pour redéployer le projet.

5. Vérification du déploiement

5.1 Accéder au projet

1. Attendez la fin du déploiement.
2. Visitez l'URL fournie par Cloudflare Pages pour vous assurer que la page se charge correctement.

5.2 Ajuster les paramètres d'initialisation de la base de données

1. Si le projet est déployé avec succès et que les données se chargent correctement, revenez aux paramètres du projet Cloudflare Pages.
2. Modifiez la variable d'environnement INIT_TABLE de true à false pour empêcher la base de données de se réinitialiser lors des déploiements futurs.

5.3 Tester la connexion GitHub OAuth

1. Essayez de vous connecter avec votre compte GitHub.
2. Si la connexion échoue, vérifiez si l'URL de rappel d'autorisation dans les paramètres GitHub OAuth correspond à l'URL des pages Cloudflare.

6. Configuration et extensions facultatives

6.1 Domaine personnalisé

• Si vous possédez votre propre domaine, vous pouvez configurer un domaine personnalisé dans Cloudflare Pages.

6.2 Étendre les sources de données

• Modifiez ou ajoutez de nouvelles sources de données en éditant les répertoires partagés/métadonnées, partagés/sources et serveur/sources selon vos besoins.

6.3 Débogage et journaux

• Utilisez les outils de débogage et de journalisation fournis par Cloudflare pour surveiller les performances du projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!