theindex
1.0.0
El frontend, el panel editor y la API del TheIndex.
La forma más fácil es comenzar es usar Docker Compose. Debe copiar el archivo docker-compose.yml y example.env de GitHub. Cambie el nombre de example.env a .env y ajuste las variables de entorno como sea necesario. Con el siguiente comando:
docker-compose up -d Deberá cambiar <host-port> a su puerto de elección. El servidor web no está asegurado a través de SSL/TLS, es en su responsabilidad poner un proxy inverso frente a este contenedor. Cuando ejecute la imagen por primera vez, no olvide establecer su propio Discord-ID en la configuración de SETUP_WHITELIST_DISCORD_ID para poder iniciar sesión y editar. Una vez que su contenedor se haya configurado una vez, puede eliminar la variable Env de su configuración.
Utilizamos MongoDB como nuestro servidor de base de datos. Puede implementar su propia configuración de Mongo como servicio HA o simplemente un simple contenedor de Docker a través de EG:
Nota: La base de datos comenzará vacía, debe llenar los datos usted mismo.
docker run -d
--name mongo
-v ./db:/data/db
mongoPara fines de desarrollo o prueba, se recomienda usar Mongo-Express para acceder, ver y editar el estado actual de la base de datos. Si lo hace públicamente accesible, no olvide asegurarlo con credenciales de inicio de sesión .
Simplemente girar un contenedor Docker de Mongo-Express, ejecute:
docker run -d
--name mongo-express
-p 8081:8081
mongo-express También puede echar un vistazo a nuestro archivo docker-compose proporcionado sobre cómo configurarlo.
Para aumentar el rendimiento, usamos Redis para almacenar los resultados del MongoDB. El caché se está autopopulando en las misiones de caché.
Puede crear una nueva instancia con Docker ejecutando:
docker run -d
--name redis
redis El Redis DB ya está incluido en el ejemplo docker-compose .
ADVERTENCIA: Tenga en cuenta que no ofrecemos ningún tipo de soporte oficial y cada actualización puede ser con cambios de ruptura. Asegúrese de hacer copias de seguridad antes de actualizar
Para obtener la versión más reciente de la imagen del contenedor, deberá ejecutar:
docker pull ghcr.io/snaacky/theindex:latestLuego, deberá detener y eliminar su instancia de ejecución actual y comenzarla nuevamente.
Aquí hay una colección de las posibles variables de entorno con sus valores predeterminados que debe establecer en su archivo .env :
| Parámetro | Función | Por defecto |
|---|---|---|
NEXT_PUBLIC_SITE_NAME | El nombre de su sitio | "The Index" |
NEXT_PUBLIC_DOMAIN | Su dominio o IP, elimine la barra de arrastre | "https://theindex.moe" |
DATABASE_URL | Echa un vistazo a los documentos de MongoDB | "mongodb://mongo:27017/index" |
CACHE_URL | Cadena de conexión para la base de datos de Redis Cache | "redis://redis:6379" |
CHROME_URL | URL de WebSocket a una instancia de Chrome en ejecución | "ws://chrome:3300" |
AUDIT_WEBHOOK | Webhook-URL para la sesión de auditoría, deje vacío para deshabilitar el soporte | "" |
AUTH_DISCORD_ID | Discord OAuth2 ID de cliente | "your_discord_oauth_client_id" |
AUTH_DISCORD_SECRET | Discord OAuth2 Secreto del cliente | "your_discord_oauth_client_secret" |
DISCORD_BOT_TOKEN | Requerido para acceder a recursos de bot | "your_discord_bot_token" |
SETUP_WHITELIST_DISCORD_ID | Si necesita ayuda para obtener su identificación, consulte esta guía | "your_discord_id" |
Y las siguientes variables Env solo se necesitan cuando estás en modo de desarrollo y depuración del DB
| Parámetro | Función | Por defecto |
|---|---|---|
ME_CONFIG_BASICAUTH_USERNAME | Mongo-Express UserName | "administración" |
ME_CONFIG_BASICAUTH_PASSWORD | contraseña de Mongo-Express | "Super_Secret" |
Si desea verificar cómo el archivo Docker-Compose llena los envs, use docker-compose config
Comenzar no es tan sencillo. Deberá haber instalado la última versión de Docker con Docker-Compose en su máquina.
Comience clonando el repositorio a través de un cliente Git gráfico (muy recomendable) o use la CLI a través de
git clone https://github.com/snaacky/theindexexample.env a .env .NEXT_PUBLIC_DOMAIN y NEXTAUTH_URL con http://localhost:3000NEXTAUTH_SECRET . Puede usar generadores, por ejemplo, Password o crearlo usted mismo.DATABASE_URL , CACHE_URL y CHROME_URL para usar localhost en lugar de mongo , redis y chrome por ejemplo: mongodb://mongo:27017 -> se convierte en mongodb://localhost:27017https://discord.com/developers -> Crear una nueva aplicación -> Vaya a Auth2 dentro de su panel de aplicaciones -> Copie la CLIENT ID y CLIENT SECRET en el archivo .env .Redirects en Auth2 Copie y pegue la siguiente URL necesaria para verificar su inicio de sesión de Discord http://localhost:3000/api/auth/callback/discord .SETUP_WHITELIST_DISCORD_ID con su ID de Discord para tener una cuenta de administrador cuando inicie sesión.MEILI_MASTER_KEY . Puede usar generadores, por ejemplo, Password o crearlo usted mismo.docker-compose :| servicio | mapeo portuaria |
|---|---|
mongo | 27017:27017 |
redis | 6379:6379 |
meili | 7700:7700 |
chrome | 3300:3000 |
Como ejemplo, la configuración para mongo debería parecer similar a esto:
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-expressAlternativamente, también puede comentar o eliminar el servicio de índice y ejecutar el comando
docker-compose up -dPara comenzar a codificar en la parte delantera, deberá asegurarse de que tiene la última versión de Node.js correctamente instalada. Para instalar todas las dependencias requeridas se ejecutan una vez:
bun installNota: Decidimos seguir con NPM en lugar de hilo para administrar las dependencias.
Ahora debe tener una carpeta llamada node_modules , que contiene todas las dependencias que necesitamos. Utilizamos Next.js como marco para nuestro servicio web React. Para probar el servicio web, deberá ejecutar un servidor DB en segundo plano e iniciar el frontend a través de:
bun run devDespués de compilar, puede abrir http: // localhost: 3000 en su navegador de elección y ver la aplicación web en ejecución.
Como usamos Next.js, el frontend admite la recarga en caliente, por lo que puede dejar la página abierta, mientras modifica el código y vea los cambios en la marcha en su navegador.
Para crear una imagen de Docker preparada, simplemente ejecute:
docker build . -t index Ahora tiene una imagen local con index de etiqueta que contiene una versión distribuible del código que ahora se puede ejecutar.
Utilizamos más bonitos para garantizar un estilo de código constante en todos los participantes. Simplemente puede formatear automáticamente todo con EG ejecutando el comando
bunx prettier --write . Siempre que sea posible, usamos ISR para generar todas las páginas de acceso público para el almacenamiento en caché por parte de CDN o proxies mientras validamos y obtiene nuevos datos con SWR solicitando nuestra propia API.
Servimos a todas las solicitudes de API sobre el punto final /api , el código correspondiente se puede ver en páginas /API.
/api/auth está reservado para NextAuth.js./api/edit/... requiere un usuario registrado y, por lo general, (al menos) los derechos del editor y es para modificar o crear contenido nuevo. La palabra clave _id _new está reservada para crear un nuevo contenido./api/delete/... requiere un usuario registrado y, por lo general, (al menos) los derechos del editor y es para eliminar contenido./api/[content]s son puntos finales públicos para obtener una lista de todos los elementos de un determinado contenido./api/[content]/... son puntos finales públicos para obtener información sobre un contenido específico. Cada solicitud de página primero tiene que pasar por _App.ts, donde se aplica un diseño básico y si una página tiene una propiedad auth , también valida si el usuario puede acceder a la página dada. Los atributos de autenticación válidos son:
auth en sí es null o typeof auth === "undefined" , sin restricciones. Esta parece ser una página pública.requireLogin , no es realmente necesario, pero configúrelo por razones lógicas. El usuario debe iniciarse registrado.requireAdmin , solo un usuario con derechos de administrador puede acceder a esta página.requireEditor , solo los editores pueden ver esta página. Las solicitudes de extracción siempre son bienvenidas, pero no siempre se fusionará, ya que tiene que estar alineada con nuestra idea del índice. Si desea una determinada característica o tiene una idea, siempre puede abrir una solicitud de función en los problemas o informarla sobre nuestra discordia en #index para ser discutido. Si no está mal, alinee con nuestras ideas, y encontramos algo de tiempo, sin duda implementaremos su función solicitada (en algún momento ...).
Y lo más importante:
La ayuda de nuestra increíble comunidad: 3
Editor -Viewsfunc(_id, dataObject) y actualizar solo según sea necesario, GraphQL sería bueno ...add , remove API en lugar de tener que enviar matrices completas para actualizar listas -> GraphQL?
