theindex
1.0.0
Le frontend, le panneau de l'éditeur et l'API de TheIndex.
Le moyen le plus simple est de commencer est d'utiliser Docker Compose. Vous devez copier le fichier docker-compose.yml et example.env à partir de GitHub. Renommez example.env à .env et ajustez les variables d'environnement comme vous en avez besoin. avec la commande suivante:
docker-compose up -d Vous devrez changer <host-port> pour votre port de choix. Le serveur Web n'est pas sécurisé via SSL / TLS, il est de votre responsabilité de mettre un proxy inversé devant ce conteneur. Lorsque vous exécutez l'image pour la première fois, n'oubliez pas de définir votre propre Discord-ID dans le SETUP_WHITELIST_DISCORD_ID pour pouvoir se connecter et modifier. Une fois que votre conteneur s'est configuré une fois, vous pouvez supprimer la variable Env de votre configuration.
Nous utilisons MongoDB comme serveur de base de données. Vous pouvez déployer votre propre configuration Mongo en tant que service HA ou simplement un simple conteneur Docker unique via par exemple:
Remarque: La base de données commencera vide, vous devez remplir les données vous-même.
docker run -d
--name mongo
-v ./db:/data/db
mongoÀ des fins de développement ou de test, il est fortement recommandé d'utiliser des mongo-express pour accéder, visualiser et modifier l'état actuel de la base de données. Si vous le rendez publiquement accessible, n'oubliez pas de le sécuriser avec des informations d'identification de connexion .
Pour simplement tourner un conteneur Docker Mongo Express, exécutez:
docker run -d
--name mongo-express
-p 8081:8081
mongo-express Vous pouvez également jeter un œil à notre fichier docker-compose fourni sur la façon de le configurer.
Pour augmenter les performances, nous utilisons Redis pour mettre en cache les résultats du MongoDB. Le cache est en cours d'autopoppection sur les missions de cache.
Vous pouvez créer une nouvelle instance avec Docker en exécutant:
docker run -d
--name redis
redis Le redis DB est déjà inclus dans l'exemple de fichier docker-compose
AVERTISSEMENT: Sachez que nous n'offrons aucun type de support officiel et que chaque mise à jour peut être avec les changements de rupture. Assurez-vous de faire des sauvegardes avant de mettre à jour
Pour obtenir la dernière version de l'image de conteneur, vous devrez fonctionner:
docker pull ghcr.io/snaacky/theindex:latestEnsuite, vous devrez vous arrêter et supprimer votre instance en cours d'exécution et recommencer.
Voici une collection des variables d'environnement possibles avec leurs valeurs par défaut que vous devez définir dans votre fichier .env :
| Paramètre | Fonction | Défaut |
|---|---|---|
NEXT_PUBLIC_SITE_NAME | Le nom de votre site | "The Index" |
NEXT_PUBLIC_DOMAIN | Votre domaine ou IP, supprimez la barre de fin | "https://theindex.moe" |
DATABASE_URL | Jetez un œil aux documents MongoDB | "mongodb://mongo:27017/index" |
CACHE_URL | Chaîne de connexion pour la base de données de cache redis | "redis://redis:6379" |
CHROME_URL | URL WebSocket vers une instance chromée en cours d'exécution | "ws://chrome:3300" |
AUDIT_WEBHOOK | Webhook-url pour audit-log, laissez vide pour désactiver le support | "" |
AUTH_DISCORD_ID | ID client Discord Oauth2 | "your_discord_oauth_client_id" |
AUTH_DISCORD_SECRET | Discord Oauth2 Client Secret | "your_discord_oauth_client_secret" |
DISCORD_BOT_TOKEN | Requis pour accéder aux ressources bot | "your_discord_bot_token" |
SETUP_WHITELIST_DISCORD_ID | Si vous avez besoin d'aide pour obtenir votre identifiant, consultez ce guide | "your_discord_id" |
Et les variables env
| Paramètre | Fonction | Défaut |
|---|---|---|
ME_CONFIG_BASICAUTH_USERNAME | nom d'utilisateur de mongo | "admin" |
ME_CONFIG_BASICAUTH_PASSWORD | mot de passe mongo-exprime | "Super_Secret" |
Si vous souhaitez vérifier comment le fichier docker-compose remplit les envs, utilisez docker-compose config
Commencer n'est pas si simple. Vous devrez avoir installé la dernière version de Docker avec Docker-Compose sur votre machine.
Commencez par cloner le repo via un client Git graphique (fortement recommandé) ou utilisez la CLI via
git clone https://github.com/snaacky/theindexexample.env sur .env .NEXT_PUBLIC_DOMAIN et NEXTAUTH_URL par http://localhost:3000NEXTAUTH_SECRET . Vous pouvez utiliser des générateurs, par exemple 1 Password ou le créer vous-même.DATABASE_URL , CACHE_URL et CHROME_URL pour utiliser LocalHost au lieu de mongo , redis et chrome par exemple: mongodb://mongo:27017 -> devient mongodb://localhost:27017https://discord.com/developers -> Créez une nouvelle application -> Accédez à Auth2 dans votre panneau d'application -> Copiez l' CLIENT ID et CLIENT SECRET dans le fichier .env .Redirects dans Auth2 Copy and Coller L'URL suivante nécessaire pour vérifier votre connexion Discord http://localhost:3000/api/auth/callback/discord .SETUP_WHITELIST_DISCORD_ID avec votre ID Discord pour avoir un compte d'administration lorsque vous vous connectez.MEILI_MASTER_KEY . Vous pouvez utiliser des générateurs, par exemple 1 Password ou le créer vous-même.docker-compose :| service | mappage |
|---|---|
mongo | 27017:27017 |
redis | 6379:6379 |
meili | 7700:7700 |
chrome | 3300:3000 |
Par exemple, la configuration de mongo devrait ressembler à ceci:
mongo :
image : mongo
container_name : index-db
restart : unless-stopped
ports :
- ' 27017:27017 '
volumes :
- ./db:/data/dbdocker-compose up -d mongo redis meili chrome mongo-expressVous pouvez également commenter ou supprimer le service d'index et exécuter la commande
docker-compose up -dPour commencer le codage sur le frontend, vous devrez vous assurer que vous avez correctement installé la dernière version de Node.js. Pour installer toutes les dépendances requises, exécutez une fois:
bun installRemarque: Nous avons décidé de nous en tenir à NPM au lieu du fil pour gérer les dépendances.
Vous devriez maintenant avoir un dossier appelé node_modules , qui contient toutes les dépendances dont nous avons besoin. Nous utilisons Next.js comme cadre pour notre service Web React. Pour tester le service Web, vous devrez exécuter un serveur DB en arrière-plan et démarrer le frontend via:
bun run devAprès avoir compilé, vous pouvez ouvrir http: // localhost: 3000 dans votre navigateur de choix et voir l'application Web en cours d'exécution.
Comme nous utilisons Next.js, le frontend prend en charge le rechargement chaud, afin que vous puissiez simplement laisser la page ouverte, pendant que vous modifiez le code et voyez les modifications à la volée de votre navigateur.
Pour créer une image Docker prête à l'emploi, il suffit d'exécuter:
docker build . -t index Vous avez maintenant une image locale avec index de balise qui contient une version distribuable du code qui peut maintenant être exécutée.
Nous utilisons plus joli pour assurer un style de code cohérent à tous les participants. Vous pouvez simplement tout format automatiquement avec EG exécutant la commande
bunx prettier --write . Dans la mesure du possible, nous utilisons ISR pour avant générer toutes les pages accessibles au public pour la mise en cache par CDNS ou proxys tout en validant et en récupérant de nouvelles données avec SWR demandant notre propre API.
Nous servons chaque demande d'API sur le point de terminaison /api , le code correspondant peut être affiché à Pages / API.
/api/auth est réservé à NextAuth.js./api/edit/... nécessite un utilisateur connecté et généralement (généralement) les droits de l'éditeur et est pour modifier ou créer de nouveaux contenus. Le mot-clé _id _new est réservé à la création de nouveaux contenus./api/delete/... nécessite un utilisateur connecté et généralement (généralement) les droits de l'éditeur et consiste à supprimer du contenu./api/[content]s sont des points de terminaison publics pour récupérer une liste de tous les éléments d'un certain contenu./api/[content]/... sont des points de terminaison publics pour récupérer des informations sur un contenu spécifique. Chaque demande de page doit d'abord passer par _App.ts, où une disposition de base est appliquée et si une page a une propriété auth , il valide également si l'utilisateur peut accéder à la page donnée. Les attributs d'autheurs valides sont:
auth lui-même est null ou typeof auth === "undefined" , pas de restrictions. Cela semble être une page publique.requireLogin , pas vraiment nécessaire, mais définissez-le pour des raisons logiques. L'utilisateur doit être connecté.requireAdmin , seul un utilisateur avec des droits d'administration peut accéder à cette page.requireEditor , seuls les éditeurs peuvent afficher cette page. Les requêtes de traction sont toujours les bienvenues, mais peuvent ne pas être toujours fusionnées car elles doivent être alignées sur notre idée de l'indice. Si vous voulez une certaine fonctionnalité ou avez une idée, vous pouvez toujours ouvrir une demande de fonctionnalité dans les problèmes ou le signaler sur notre discorde dans #index à discuter. Si ce n'est pas mal, en alignant nos idées et que nous trouvons du temps, nous implémenterons certainement votre fonctionnalité demandée (parfois ...).
Et surtout:
L'aide de notre communauté géniale: 3
Editor -Viewsfunc(_id, dataObject) et de mise à jour uniquement au besoin, GraphQL serait bien ...add , remove l'API au lieu d'avoir à envoyer des tableaux entiers pour mettre à jour les listes -> GraphQL?
