theindex
1.0.0
Das Frontend, das Editor -Panel und die API des TheIndex.
Am einfachsten ist es, den Einstieg zu erstellen, indem Sie Docker Compose verwenden. Sie müssen die Datei docker-compose.yml und example.env von GitHub kopieren. Benennen Sie das example.env um .env mit dem folgenden Befehl:
docker-compose up -d Sie müssen <host-port> in Ihren Wahlhafen ändern. Der Webserver ist nicht über SSL/TLS gesichert, sondern in Ihrer Verantwortung, einen umgekehrten Proxy vor diesen Container zu stellen. Wenn Sie das Bild zum ersten Mal ausführen, vergessen Sie nicht, Ihre eigene Discord-ID im env SETUP_WHITELIST_DISCORD_ID festzulegen, um sich anzumelden und zu bearbeiten. Sobald sich Ihr Container einmal eingerichtet hat, können Sie die Env -Variable aus Ihrem Setup entfernen.
Wir verwenden MongoDB als unseren Datenbankserver. Sie können Ihr eigenes Mongo -Setup als HA -Dienst oder nur einen einfachen Einzelkletterncontainer über EG bereitstellen:
Hinweis: Die Datenbank beginnt leer, Sie müssen die Daten selbst füllen.
docker run -d
--name mongo
-v ./db:/data/db
mongoFür Entwicklungs- oder Testzwecke wird dringend empfohlen, Mongo-Express für den Zugriff auf, anzeigen und bearbeitet, den aktuellen Status der Datenbank. Wenn Sie es öffentlich zugänglich machen, vergessen Sie nicht, es mit Anmeldeinformationen zu sichern.
Um einfach einen Mongo-Express-Docker-Container zu spinnen, rennen Sie:
docker run -d
--name mongo-express
-p 8081:8081
mongo-express Sie können sich auch unsere bereitgestellte docker-compose Datei ansehen, um sie einzurichten.
Um die Leistung zu erhöhen, verwenden wir Redis zum Cache -Ergebnisse aus dem MongoDB. Der Cache wird auf Cache-Missen autopopuliert.
Sie können eine neue Instanz mit Docker erstellen, indem Sie ausführen:
docker run -d
--name redis
redis Die Redis DB ist bereits in der Beispieldocker docker-compose Datei enthalten
Warnung: Seien Sie sich bewusst, dass wir keine offizielle Unterstützung anbieten, und jedes Update kann mit Break -Änderungen ausmachen. Stellen Sie sicher, dass Sie Backups erstellen, bevor Sie aktualisieren
Um die neueste Version des Containerbildes zu erhalten, müssen Sie ausführen:
docker pull ghcr.io/snaacky/theindex:latestDanach müssen Sie anhalten und Ihre aktuelle Laufinstanz entfernen und erneut starten.
Hier finden Sie eine Sammlung der möglichen Umgebungsvariablen mit ihren Standardwerten, die Sie in Ihrer .env -Datei festlegen sollten:
| Parameter | Funktion | Standard |
|---|---|---|
NEXT_PUBLIC_SITE_NAME | Der Name Ihrer Website | "The Index" |
NEXT_PUBLIC_DOMAIN | Ihre Domain oder IP, entfernen Sie den nachverfolgenden Schrägstrich | "https://theindex.moe" |
DATABASE_URL | Schauen Sie sich MongoDB -Dokumente an | "mongodb://mongo:27017/index" |
CACHE_URL | Verbindungszeichenfolge für die Redis -Cache -Datenbank | "redis://redis:6379" |
CHROME_URL | Websocket -URL zu einer laufenden Chrome -Instanz | "ws://chrome:3300" |
AUDIT_WEBHOOK | Webhook-URL für Audit-Log, lassen Sie leer, um die Unterstützung zu deaktivieren | "" |
AUTH_DISCORD_ID | Discord OAuth2 Client ID | "your_discord_oauth_client_id" |
AUTH_DISCORD_SECRET | Discord OAuth2 Client Secret | "your_discord_oauth_client_secret" |
DISCORD_BOT_TOKEN | Erforderlich, um auf Bot -Ressourcen zuzugreifen | "your_discord_bot_token" |
SETUP_WHITELIST_DISCORD_ID | Wenn Sie Hilfe benötigen, um Ihre ID zu erhalten | "your_discord_id" |
Und die folgenden Env -Variablen werden nur benötigt, wenn Sie sich im Dev -Modus befinden und die DB debuggen
| Parameter | Funktion | Standard |
|---|---|---|
ME_CONFIG_BASICAUTH_USERNAME | Mongo-Express-Benutzername | "admin" |
ME_CONFIG_BASICAUTH_PASSWORD | Mongo-Express-Passwort | "Super_secret" |
Wenn Sie überprüfen möchten, wie die Docker-Compose-Datei die Envs ausfüllt, verwenden Sie docker-compose config
Der Start ist nicht so einfach. Sie müssen die neueste Version von Docker mit Docker-Compose auf Ihrem Computer installiert haben.
Beginnen Sie mit dem Klonen des Repo über einen grafischen Git -Client (sehr empfohlen) oder verwenden Sie die CLI über
git clone https://github.com/snaacky/theindexexample.env in .env .NEXT_PUBLIC_DOMAIN NEXTAUTH_URL http://localhost:3000NEXTAUTH_SECRET . Sie können Generatoren verwenden, z. 1Password oder selbst erstellen.mongodb://localhost:27017 DATABASE_URL , CACHE_URL und CHROME_URL mongodb://mongo:27017 Localhost anstelle von mongo , redis und chrome zu verwenden.https://discord.com/developers -> Erstellen Sie eine neue Anwendung -> Auth2 in Ihr Anwendungsbereich -> Kopieren Sie die CLIENT ID und CLIENT SECRET in die Datei .env .Auth2 Redirects in Auth2 kopieren und einfügen die folgende URL, die erforderlich ist, um Ihre Discord -Login zu überprüfen http://localhost:3000/api/auth/callback/discordSETUP_WHITELIST_DISCORD_ID ein, um ein Admin -Konto zu haben, wenn Sie sich anmelden.MEILI_MASTER_KEY . Sie können Generatoren verwenden, z. 1Password oder selbst erstellen.docker-compose Datei die folgenden Ports hinzu:| Service | Portmapping |
|---|---|
mongo | 27017:27017 |
redis | 6379:6379 |
meili | 7700:7700 |
chrome | 3300:3000 |
Beispielsweise sollte das Setup für mongo ähnlich aussehen:
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-expressAlternativ können Sie auch den Indexdienst nur kommentieren oder entfernen und den Befehl ausführen
docker-compose up -dUm auf dem Frontend zu beginnen, müssen Sie sicherstellen, dass Sie die neueste Version von node.js korrekt installiert haben. So installieren Sie alle erforderlichen Abhängigkeiten einmal:
bun installHinweis: Wir haben uns entschlossen, uns bei NPM anstelle von Garn zu halten, um Abhängigkeiten zu verwalten.
Sie sollten jetzt einen Ordner namens node_modules haben, der alle Abhängigkeiten enthält, die wir benötigen. Wir verwenden Next.js als Framework für unseren React -Webdienst. Um den Webdienst zu testen, müssen Sie einen DB -Server im Hintergrund ausführen und das Frontend über:
bun run devNach dem Kompilieren können Sie http: // localhost: 3000 in Ihrem Browser Ihrer Wahl öffnen und die laufende Webanwendung sehen.
Während wir als nächstes.js verwenden, unterstützt der Frontend das heiße Nachladen, sodass Sie die Seite einfach öffnen lassen, während Sie den Code ändern und die Änderungen in Ihrem Browser in der Fliege sehen.
Um ein fertiges Docker-Bild zu erstellen, laufen Sie einfach aus:
docker build . -t index Sie haben jetzt ein lokales Bild mit Tag index , das eine verteilbare Version des Codes enthält, die jetzt ausgeführt werden kann.
Wir verwenden hübscher, um einen konsistenten Codestil für alle Teilnehmer zu gewährleisten. Sie können einfach alles automatisch alles formatieren, wobei z. B. den Befehl ausführt
bunx prettier --write . Wenn möglich, verwenden wir ISR, um alle öffentlich zugänglichen Seiten für das Caching durch CDNs oder Proxies vorzubereiten und gleichzeitig neue Daten mit SWR zu validieren und zu holen, um unsere eigene API anzufordern.
Wir bedienen jede API -Anfrage über den Endpunkt /api , der entsprechende Code kann auf Seiten /API angezeigt werden.
/api/auth ist für NextAuth.js reserviert./api/edit/... erfordert einen angemeldeten Benutzer und normalerweise (zumindest) Editorrechte und dient zum Ändern oder Erstellen neuer Inhalte. Das _id -Schlüsselwort _new ist für das Erstellen neuer Inhalte reserviert./api/delete/... erfordert einen angemeldeten Benutzer und normalerweise (zumindest) die Editorrechte und dient zum Löschen von Inhalten./api/[content]s sind öffentliche Endpunkte, um eine Liste aller Elemente eines bestimmten Inhalts abzurufen./api/[content]/... sind öffentliche Endpunkte zum Abholen von Informationen zu einem bestimmten Inhalt. Jede Seitenanforderung muss zuerst _app.ts durchgehen, wobei ein grundlegendes Layout angewendet wird. Wenn eine Seite eine auth -Eigenschaft hat, wird auch bestätigt, ob der Benutzer auf die angegebene Seite zugreifen kann. Gültige AUTH -Attribute sind:
auth selbst ist null oder typeof auth === "undefined" , keine Einschränkungen. Dies scheint eine öffentliche Seite zu sein.requireLogin , nicht wirklich benötigt, sondern aus logischen Gründen festlegen. Der Benutzer muss angemeldet sein.requireAdmin , nur ein Benutzer mit Administratorrechten kann auf diese Seite zugreifen.requireEditor können nur Redakteure diese Seite anzeigen. Pull-Requests sind immer willkommen, können aber nicht immer zusammengeführt werden, da es sich um unsere Vorstellung vom Index handelt. Wenn Sie eine bestimmte Funktion möchten oder eine Idee haben, können Sie jederzeit eine Feature -Anfrage in Problemen eröffnen oder sie auf unserer Zwietracht in #index melden. Wenn es nicht schlecht ist, entspricht wir unseren Ideen und wir finden einige Zeit, wir werden Ihre angeforderte Funktion sicherlich (irgendwann ...) implementieren.
Und vor allem:
Die Hilfe unserer großartigen Community: 3
Editor -Views vereinheitlichenfunc(_id, dataObject) und aktualisieren Sie nur bei Bedarf. GraphQL wäre schön ...add und müssen Sie die API remove , anstatt ganze Arrays zu senden, um Listen zu aktualisieren -> GraphQL?
