หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

Theindex

ส่วนหน้าแผงแก้ไขและ API ของ TheIndex

เริ่มต้น

วิธีที่ง่ายที่สุดคือการเริ่มต้นคือการใช้ Docker Compose คุณต้องคัดลอกไฟล์ docker-compose.yml และ example.env จาก GitHub Rename example.env เป็น .env และปรับตัวแปรสภาพแวดล้อมตามที่คุณต้องการ ด้วยคำสั่งต่อไปนี้: 

docker-compose up -d

คุณจะต้องเปลี่ยน <host-port> เป็นพอร์ตที่คุณเลือก เว็บเซิร์ฟเวอร์ไม่ได้รับการรักษาความปลอดภัยผ่าน SSL/TLS มันอยู่ในความรับผิดชอบของคุณที่จะวางพร็อกซีย้อนกลับไว้หน้าคอนเทนเนอร์นี้ เมื่อคุณเรียกใช้ภาพเป็นครั้งแรกอย่าลืมตั้งค่า discord-id ของคุณเองใน Env SETUP_WHITELIST_DISCORD_ID เพื่อให้สามารถเข้าสู่ระบบและแก้ไขได้ เมื่อคอนเทนเนอร์ของคุณตั้งค่าตัวเองหนึ่งครั้งคุณสามารถลบตัวแปร Env ออกจากการตั้งค่าของคุณ

ฐานข้อมูล

เราใช้ MongoDB เป็นเซิร์ฟเวอร์ฐานข้อมูลของเรา คุณสามารถปรับใช้การตั้งค่า Mongo ของคุณเองเป็นบริการ HA หรือเพียงแค่คอนเทนเนอร์ Docker Single Single อย่างง่าย ๆ ผ่านเช่น:

หมายเหตุ: ฐานข้อมูลจะเริ่มว่างเปล่าคุณต้องกรอกข้อมูลด้วยตัวเอง 

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

เพื่อการพัฒนาหรือการทดสอบขอแนะนำอย่างยิ่งให้ใช้ Mongo-Express สำหรับการเข้าถึงการดูและแก้ไขสถานะปัจจุบันของฐานข้อมูล หากคุณทำให้สามารถเข้าถึงได้แบบสาธารณะ อย่าลืม ที่จะรักษาความปลอดภัยด้วย ข้อมูลรับรองการเข้าสู่ระบบ

หากต้องการหมุนคอนเทนเนอร์ Docker Mongo-Express เพียงอย่างเดียว Run: 

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

นอกจากนี้คุณยังสามารถดูไฟล์ docker-compose ที่เราให้ไว้เกี่ยวกับวิธีการตั้งค่า

แคช -DB

เพื่อเพิ่มประสิทธิภาพเราใช้ 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 ของคุณลบ Slash ต่อท้าย "https://theindex.moe"
DATABASE_URL ดูเอกสาร MongoDB "mongodb://mongo:27017/index"
CACHE_URL สตริงการเชื่อมต่อสำหรับฐานข้อมูลแคช REDIS "redis://redis:6379"
CHROME_URL WebSocket URL ไปยังอินสแตนซ์ 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 หากคุณต้องการความช่วยเหลือในการรับ ID ของคุณลองดูคู่มือนี้ "your_discord_id"

และตัวแปร env ต่อไปนี้จำเป็นก็ต่อเมื่อคุณอยู่ในโหมด dev และการดีบัก db

พารามิเตอร์ การทำงาน ค่าเริ่มต้น
ME_CONFIG_BASICAUTH_USERNAME ชื่อผู้ใช้ Mongo-Express "ผู้ดูแลระบบ"
ME_CONFIG_BASICAUTH_PASSWORD รหัสผ่าน Mongo-Express "super_secret"

หากคุณต้องการตรวจสอบว่าไฟล์ compose docker เติม envs เข้ามาอย่างไรให้ใช้ docker-compose config

เริ่มต้นใช้รหัส

การตั้งค่ารอบ ๆ เว็บแอป

  1. การเริ่มต้นไม่ได้ตรงไปตรงมา คุณจะต้องติดตั้ง Docker เวอร์ชันล่าสุดพร้อม Docker-compose บนเครื่องของคุณ

  2. เริ่มต้นด้วยการโคลน repo ผ่านไคลเอนต์ 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 เพื่อใช้ LocalHost แทน mongo , redis และ chrome ตัวอย่างเช่น: mongodb://mongo:27017 -> กลายเป็น mongodb://localhost:27017
  • ไปที่ https://discord.com/developers -> สร้างแอปพลิเคชันใหม่ -> ไปที่ Auth2 ภายในแผงแอปพลิเคชันของคุณ -> คัดลอก CLIENT ID และ CLIENT SECRET ลงในไฟล์. .env
  • ใน Redirects ในการคัดลอก Auth2 และวาง URL ต่อไปนี้ที่จำเป็นในการตรวจสอบการเข้าสู่ระบบ Discord ของคุณ http://localhost:3000/api/auth/callback/discord
  • เติม SETUP_WHITELIST_DISCORD_ID ด้วย ID Discord ของคุณเพื่อให้มีบัญชีผู้ดูแลระบบเมื่อคุณเข้าสู่ระบบ
  • สร้างสตริงที่แข็งแกร่งแบบสุ่มอีกครั้งอย่างน้อย 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 build . -t index

ตอนนี้คุณมีรูปภาพในเครื่องพร้อม index แท็กที่มีรหัสเวอร์ชันแบบกระจายได้ซึ่งสามารถเรียกใช้ได้

รูปแบบอัตโนมัติ

เราใช้ Prettier เพื่อให้แน่ใจว่ารูปแบบรหัสที่สอดคล้องกันในผู้เข้าร่วมทั้งหมด คุณสามารถจัดรูปแบบอัตโนมัติทุกอย่างด้วยการเรียกใช้คำสั่ง 

bunx prettier --write .

การออกแบบเว็บแอป

ISR/SSR

หากเป็นไปได้เราจะใช้ ISR เพื่อสร้างหน้าเว็บที่เข้าถึงได้ทั้งหมดสำหรับการแคชโดย CDN หรือพร็อกซีในขณะที่ตรวจสอบและดึงข้อมูลใหม่ด้วย SWR ขอ API ของเราเอง

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 เพียงบรรณาธิการเท่านั้นที่สามารถดูหน้านี้ได้

ผลงาน

ยินดีต้อนรับแบบดึงกลับมาเสมอ แต่อาจไม่รวมอยู่เสมอเพราะมันจะต้องสอดคล้องกับแนวคิดของเราเกี่ยวกับดัชนี หากคุณต้องการคุณสมบัติบางอย่างหรือมีความคิดคุณสามารถเปิดคำขอคุณสมบัติในปัญหาหรือรายงานในความไม่ลงรอยกันของเราใน #index ที่จะกล่าวถึง หากมันไม่เลวสอดคล้องกับความคิดของเราและเราหาเวลาเราจะใช้คุณสมบัติที่คุณร้องขออย่างแน่นอน (บางครั้ง ... )

สิ่งที่เราใช้

  • next.js เป็นเว็บเซิร์ฟเวอร์
  • ตอบสนองเป็น JS Framework
  • สไตล์จาก bootstrap
  • ไอคอนจาก Font Awesome
  • เราอบทุกอย่างเป็นภาพนักเทียบท่า
  • ทำงานบนโหนด JS
  • การตรวจสอบผู้ใช้ผ่าน nextauth.js
  • MongoDB เป็นแบ็กเอนด์ฐานข้อมูล
  • Redis เป็นแคช
  • Puppeteer เพื่อสร้างภาพหน้าจอของเว็บไซต์
  • เบราว์เซอร์/โครเมี่ยมเพื่อเรียกใช้อินสแตนซ์ Chrome ของเรา
  • React-in-Viewport สำหรับการตรวจสอบว่าส่วนประกอบสามารถมองเห็นได้หรือไม่
  • React-Draggable สำหรับการลากส่วนประกอบโดยผู้ใช้ปลายทาง
  • ตอบสนองต่อการจัดการการแจ้งเตือน
  • ISO-639-3 สำหรับภาษา

และที่สำคัญที่สุด:

ความช่วยเหลือของชุมชนที่ยอดเยี่ยมของเรา: 3

หนี้ทางเทคนิค

  • เราใช้ JS แทน TS (ปัจจุบันอยู่ในการย้ายถิ่น)
  • Unify Editor -Views
  • รวม DB แทรกและอัปเดตเป็นรูปแบบของ func(_id, dataObject) และอัปเดตเฉพาะตามต้องการ graphQl จะดี ...
  • ย้ายเพื่อ add remove API แทนที่จะต้องส่งอาร์เรย์ทั้งหมดไปยังรายการอัปเดต -> GraphQl?
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด