الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

TheIndex

الواجهة الأمامية ، لوحة المحرر ، و API من TheIndex.

ابدء

أسهل طريقة هي البدء في استخدام Docker Compose. تحتاج إلى نسخ ملف docker-compose.yml و example.env من github. إعادة تسمية example.env إلى .env وضبط متغيرات البيئة كما تحتاج. مع الأمر التالي: 

docker-compose up -d

ستحتاج إلى تغيير <host-port> إلى منفذ اختيارك. لا يتم تأمين خادم الويب عبر SSL/TLS ، ويقع في مسؤوليتك وضع وكيل عكسي أمام هذه الحاوية. عندما تقوم بتشغيل الصورة لأول مرة ، لا تنسَ تعيين معرف Discord الخاص بك في Env SETUP_WHITELIST_DISCORD_ID لتتمكن من تسجيل الدخول والتعديل. بمجرد أن تقوم الحاوية بإعداد نفسها مرة واحدة ، يمكنك إزالة متغير ENV من الإعداد الخاص بك.

قاعدة البيانات

نستخدم MongoDB كخادم قاعدة البيانات لدينا. يمكنك نشر إعداد Mongo الخاص بك كخدمة HA أو مجرد حاوية Docker واحدة بسيطة عبر على سبيل المثال:

ملاحظة: ستبدأ قاعدة البيانات فارغة ، عليك ملء البيانات بنفسك. 

docker run -d 
    --name mongo 
    -v ./db:/data/db 
    mongo

لأغراض التطوير أو الاختبار ، يوصى بشدة باستخدام Mongo-Express للوصول إلى الحالة الحالية وقاعدة البيانات الحالية وعرضها وتحريرها. إذا جعلتها متاحة للجمهور ، فلا تنسَ تأمينها باستخدام بيانات اعتماد تسجيل الدخول .

لتدوير حاوية مينغو مونغو التعبير ، قم بتشغيلها: 

docker run -d 
    --name mongo-express 
    -p 8081:8081 
    mongo-express

يمكنك أيضًا إلقاء نظرة على ملف docker-compose المقدم حول كيفية إعداده.

ذاكرة التخزين المؤقت

لزيادة الأداء ، نستخدم Redis لتخزين ذاكرة التخزين المؤقت من MongoDB. يتم تشييد ذاكرة التخزين المؤقت على ذاكرة التخزين المؤقت.

يمكنك إنشاء مثيل جديد مع Docker عن طريق التشغيل: 

docker run -d 
    --name redis 
    redis

تم تضمين Redis DB بالفعل في ملف docker-compose

تحديث صورة الحاوية

تحذير: كن على دراية ، أننا لا نقدم أي نوع من الدعم الرسمي وقد يكون كل تحديث مع كسر التغييرات. تأكد من إجراء نسخ احتياطية قبل التحديث

للحصول على أحدث إصدار من صورة الحاوية ، ستحتاج إلى تشغيل: 

docker pull ghcr.io/snaacky/theindex:latest

بعد ذلك ، ستحتاج إلى إيقاف وإزالة مثيل التشغيل الحالي وبدء تشغيله مرة أخرى.

حدود

فيما يلي مجموعة من متغيرات البيئة المحتملة مع قيمها الافتراضية التي يجب تعيينها في ملف .env الخاص بك:

المعلمة وظيفة تقصير
NEXT_PUBLIC_SITE_NAME اسم موقعك "The Index"
NEXT_PUBLIC_DOMAIN مجالك أو عنوان IP ، قم بإزالة المقطع الزائد "https://theindex.moe"
DATABASE_URL ألق نظرة على مستندات MongoDB "mongodb://mongo:27017/index"
CACHE_URL سلسلة اتصال لقاعدة بيانات Redis Cache "redis://redis:6379"
CHROME_URL عنوان URL WebSocket إلى مثيل Chrome قيد التشغيل "ws://chrome:3300"
AUDIT_WEBHOOK webhook-url للتدقيق ، اترك فارغًا لتعطيل الدعم ""
AUTH_DISCORD_ID Discord Oauth2 معرف العميل "your_discord_oauth_client_id"
AUTH_DISCORD_SECRET Discord Oauth2 سر العميل "your_discord_oauth_client_secret"
DISCORD_BOT_TOKEN مطلوب للوصول إلى موارد الروبوت "your_discord_bot_token"
SETUP_WHITELIST_DISCORD_ID إذا كنت بحاجة إلى مساعدة في الحصول على هويتك ، تحقق من هذا الدليل "your_discord_id"

ومتغيرات ENV التالية مطلوبة فقط عندما تكون في وضع dev وتصحيح تصحيح DB

المعلمة وظيفة تقصير
ME_CONFIG_BASICAUTH_USERNAME Mongo-express اسم المستخدم "مسؤل"
ME_CONFIG_BASICAUTH_PASSWORD كلمة مرور mongo-express "super_secret"

إذا كنت ترغب في التحقق من كيفية ملء ملف Docker docker-compose config

البدء في رمز

الإعداد حول تطبيق الويب

  1. البدء ليس هذا مستقيم للأمام. ستحتاج إلى تثبيت أحدث إصدار من Docker مع Docker-Corms على جهازك.

  2. ابدأ باستنساخ الريبو عبر عميل GIT الرسومي (موصى به للغاية) أو استخدم CLI عبر 

git clone https://github.com/snaacky/theindex
  1. انسخ ملف example.env إلى .env .

كيفية ملء .env

  • استبدل NEXT_PUBLIC_DOMAIN و NEXTAUTH_URL بـ http://localhost:3000
  • قم بإنشاء سلسلة عشوائية قوية لا تقل عن 32 حرفًا واستخدمها لـ NEXTAUTH_SECRET . يمكنك استخدام المولدات على سبيل المثال 1Password أو إنشاءها بنفسك.
  • تغيير DATABASE_URL و CACHE_URL و CHROME_URL لاستخدام مضيف محلي بدلاً من mongo و redis و chrome على سبيل المثال: mongodb://mongo:27017 -> يصبح mongodb://localhost:27017
  • انتقل إلى https://discord.com/developers -> إنشاء تطبيق جديد -> انتقل إلى Auth2 داخل لوحة التطبيق الخاصة بك -> انسخ CLIENT ID CLIENT SECRET في ملف .env .
  • في Redirects في Auth2 Copy والصق عنوان URL التالي اللازم للتحقق من تسجيل الدخول إلى تسجيل الدخول http://localhost:3000/api/auth/callback/discord .
  • Fill SETUP_WHITELIST_DISCORD_ID مع معرف الخلاف الخاص بك للحصول على حساب مسؤول عند تسجيل الدخول.
  • قم بإنشاء سلسلة قوية عشوائية أخرى من 32 حرفًا على الأقل واستخدمها لـ MEILI_MASTER_KEY . يمكنك استخدام المولدات على سبيل المثال 1Password أو إنشاءها بنفسك.
  • أخيرًا ، إذا كنت ترغب في تغيير كلمة المرور لـ Mongo-Express ، فيمكنك القيام بذلك مع المتغيرين الأخيرين ، وعادة ما لا يفعله أي منا أثناء التطور محليًا.
  1. أضف المنافذ التالية إلى الصور الموجودة في ملف docker-compose :
خدمة رسم خرائط للمنفذ
mongo 27017:27017
redis 6379:6379
meili 7700:7700
chrome 3300:3000

على سبيل المثال ، يجب أن يبدو الإعداد لـ mongo مشابهًا لهذا: 

 mongo :
  image : mongo
  container_name : index-db
  restart : unless-stopped
  ports :
    - ' 27017:27017 '
  volumes :
    - ./db:/data/db
  1. قم الآن بتشغيل الأمر لبدء جميع عمليات الخلفية المطلوبة 
docker-compose up -d mongo redis meili chrome mongo-express

بدلاً من ذلك ، يمكنك أيضًا التعليق أو إزالة خدمة الفهرس وتشغيل الأمر 

docker-compose up -d

خدمة الويب

لبدء الترميز على الواجهة الأمامية ، ستحتاج إلى التأكد من تثبيت أحدث إصدار من Node.js بشكل صحيح. لتثبيت جميع التبعيات المطلوبة يتم تشغيلها مرة واحدة: 

bun install

ملاحظة: قررنا التمسك بـ NPM بدلاً من الغزل لإدارة التبعيات.

يجب أن يكون لديك الآن مجلد يسمى node_modules ، والذي يحتوي على جميع التبعيات التي نحتاجها. نحن نستخدم next.js كإطار لخدمة الويب React الخاصة بنا. لاختبار خدمة الويب ، سيتعين عليك تشغيل خادم DB في الخلفية وبدء الواجهة الأمامية عبر: 

bun run dev

بعد التجميع ، يمكنك فتح http: // localhost: 3000 في متصفحك المفضل ومشاهدة تطبيق الويب قيد التشغيل.

بينما نستخدم next.js ، تدعم الواجهة الأمامية إعادة تحميل الساخنة ، بحيث يمكنك فقط ترك الصفحة مفتوحة ، بينما تقوم بتعديل الكود ورؤية التغييرات الموجودة في متصفحك.

صورة Docker

لإنشاء صورة Docker جاهزة ، ما عليك سوى تشغيل: 

docker build . -t index

لديك الآن صورة محلية مع index العلامة التي تحتوي على نسخة قابلة للتوزيع من الكود يمكن تشغيلها الآن.

شكل تلقائي

نستخدم أجمل لضمان نمط رمز ثابت في جميع المشاركين. يمكنك ببساطة تنسيق كل شيء مع تشغيل الأمر على سبيل المثال 

bunx prettier --write .

تصميم تطبيق الويب

ISR/SSR

حيثما أمكن ، نستخدم ISR لإنشاء جميع الصفحات التي يمكن الوصول إليها للجمهور لتخزين مؤقت للتخزين المؤقت عن طريق CDN أو الوكلاء مع التحقق من صحة وجلب بيانات جديدة مع SWR تطلب واجهة برمجة تطبيقات الخاصة بنا.

API

نحن نخدم كل طلب API على نقطة النهاية /api ، يمكن عرض الكود المقابل في الصفحات /API.

  • /api/auth محجوز لـ Nextauth.js.
  • /api/edit/... يتطلب مستخدمًا مسجلاً وعادة ما يكون (على الأقل) حقوق المحرر ويتم تعديل محتوى جديد أو إنشاء محتوى جديد. الكلمة الرئيسية _id _new محفوظة لإنشاء محتوى جديد.
  • /api/delete/... يتطلب مستخدمًا مسجلاً وعادة ما يكون (على الأقل) حقوق المحرر وهو لحذف المحتوى.
  • /api/[content]s هي نقاط نهاية عامة لجلب قائمة بجميع عناصر محتوى معين.
  • /api/[content]/... هي نقاط نهاية عامة لجلب معلومات حول محتوى معين.

قيود الصفحة

يجب أن يمر كل طلب صفحة أولاً من خلال _app.ts ، حيث يتم تطبيق تخطيط أساسي وإذا كانت الصفحة تحتوي على خاصية auth ، فإنها تتحقق أيضًا مما إذا كان المستخدم يمكنه الوصول إلى الصفحة المحددة. سمات المصادقة الصحيحة هي:

  • auth نفسها هي null أو typeof auth === "undefined" ، لا قيود. يبدو أن هذه صفحة عامة.
  • requireLogin ، غير مطلوب حقًا ، ولكن قم بتعيينه لأسباب منطقية. يجب تسجيل المستخدم.
  • requireAdmin ، فقط المستخدم الذي يحمل حقوق المسؤول يمكنه الوصول إلى هذه الصفحة.
  • requireEditor ، يمكن للمحررين فقط عرض هذه الصفحة.

مساهمة

دائمًا ما تكون عمليات السحب موضع ترحيب ، ولكن قد لا يتم دمجها دائمًا حيث يجب أن تتماشى مع فكرتنا عن الفهرس. إذا كنت تريد ميزة معينة أو لديك فكرة ، فيمكنك دائمًا فتح طلب ميزة في المشكلات أو الإبلاغ عن ذلك عن Discord في #index تتم مناقشته. إذا لم يكن الأمر سيئًا ، في توافق مع أفكارنا ، ونجد بعض الوقت ، فسنقوم بالتأكيد بتنفيذ الميزة المطلوبة (في وقت ما ...).

الأشياء التي نستخدمها

  • Next.js كخادم ويب
  • رد فعل كإطار JS
  • أنماط من bootstrap
  • أيقونات من الخط رائع
  • نخبز كل شيء في صورة Docker
  • تشغيل على العقدة JS
  • مصادقة المستخدم عبر Nextauth.js
  • MongoDB كواجهة قاعدة بيانات
  • redis كما ذاكرة التخزين المؤقت
  • Puppeteer لإنشاء لقطات شاشة للمواقع الإلكترونية
  • Browserless/Chrome لتشغيل مثيل Chrome الخاص بنا
  • React in-Viewport للتحقق مما إذا كانت المكونات مرئية أم لا
  • React-dragggged لسحب المكونات بواسطة المستخدم النهائي
  • رد فعل على التعامل مع الإخطارات
  • ISO-639-3 للغات

والأهم من ذلك:

مساعدة مجتمعنا الرائع: 3

الديون الفنية

  • نستخدم JS بدلاً من TS (حاليًا في الترحيل)
  • توحيد Editor -وجهات نظر
  • توحيد DB إدراج وتحديثات إلى تنسيق func(_id, dataObject) والتحديث فقط حسب الحاجة ، سيكون GraphQL لطيفًا ...
  • انتقل add ، remove API بدلاً من الاضطرار إلى إرسال صفائف كاملة لتحديث القوائم -> GraphQL؟
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل