โครงสร้างโปรเจกต์
TomeCMS เป็นแอป Astro ตัวเดียว หน้าเว็บสาธารณะ แอดมิน API ของแอดมินเอง และ API เนื้อหาสาธารณะ ทำงานอยู่ใน process ของ Node.js ตัวเดียวกันทั้งหมด หน้าTomeCMS คืออะไร มีแผนภาพว่าส่วนเหล่านี้ต่อกันอย่างไร
เทคโนโลยีที่ใช้
หัวข้อที่มีชื่อว่า “เทคโนโลยีที่ใช้”| ชั้น | ใช้อะไร |
|---|---|
| แอป | Astro 7 ที่เรนเดอร์ทุกคำขอบนเซิร์ฟเวอร์ รันบน Node.js 22 ผ่าน @astrojs/node |
| แอดมิน | island ของ React 18 และใช้ Tiptap 3 เป็นตัวแก้ไขบทความ |
| สไตล์ | Tailwind CSS 3 บน design token ใน src/styles/installer-tokens.css |
| ฐานข้อมูล | PostgreSQL 17 ผ่าน Kysely |
| การลงชื่อเข้าใช้ | Better Auth กับพาสคีย์ |
| ไฟล์ | ที่เก็บไฟล์แบบ S3 ผ่าน AWS SDK ตอนพัฒนาบนเครื่องและบนเซิร์ฟเวอร์ที่ดูแลเองใช้ SeaweedFS 4.46 ส่วนการย่อขนาดภาพใช้ sharp |
| การติดตั้งใช้งาน | Docker Compose |
| การทดสอบ | ตัวรันเทสต์ที่มากับ Node เอง และ Playwright สำหรับเทสต์ในเบราว์เซอร์ |
src/styles/installer-tokens.css เป็นเจ้าของ token ทุกตัว ทั้งสี ระยะห่าง ความโค้งมุม และตัวอักษร DESIGN.md อธิบาย token เหล่านี้ และ npm run check จะไม่ผ่านถ้าสองไฟล์นี้ไม่ตรงกัน
อะไรอยู่ตรงไหน
หัวข้อที่มีชื่อว่า “อะไรอยู่ตรงไหน”| ที่อยู่ | เก็บอะไร |
|---|---|
src/pages/ |
ทุกเส้นทางของเว็บ ทั้งหน้าเว็บสาธารณะ แอดมิน ตัวติดตั้ง และจุดตรวจสถานะ |
src/pages/admin/ |
หน้าจอต่าง ๆ ของแอดมิน |
src/pages/api/admin/ |
API ของแอดมินเอง สำหรับเจ้าของเว็บที่ลงชื่อเข้าใช้แล้วจาก origin เดียวกัน |
src/pages/api/v1/ |
API สาธารณะ คือเนื้อหาที่เผยแพร่แล้ว และตัวนับของสถิติ |
src/middleware.ts |
ทำงานก่อนทุกเส้นทาง ดูแลเรื่องตัวติดตั้ง การลงชื่อเข้าแอดมิน โหมดปิดปรับปรุง และโหมด headless |
src/layouts/ |
กรอบของหน้าเว็บสาธารณะ และกรอบของหน้าจอแอดมิน |
src/components/admin/ |
island ของ React ในแอดมิน รวมถึงตัวแก้ไขบทความ |
src/components/blog/ |
แท็กใน <head> ที่ทุกธีมใช้ร่วมกัน |
src/themes/ |
template กับ CSS ของหน้าเว็บสาธารณะ ธีมละหนึ่งโฟลเดอร์ |
src/plugins/ |
ข้อตกลงของปลั๊กอิน และปลั๊กอินที่ทำตามข้อตกลงนั้น |
src/lib/ |
โค้ดช่วยที่ใช้ทั่วทั้งแอป และไฟล์ข้อความสองภาษาทั้งสองไฟล์ |
src/styles/ |
design token กับสไตล์ชีตที่ใช้ร่วมกัน |
src/server/ |
โค้ดที่รันบนเซิร์ฟเวอร์เท่านั้น |
src/update/, src/updater/ |
ตัวอัปเดตแบบ managed ซึ่งเป็นบริการแยกบนเครื่องเซิร์ฟเวอร์ |
scripts/ |
สคริปต์ช่วยสำหรับเตรียมเครื่อง ติดตั้ง ปรับฐานข้อมูล สำรองข้อมูล และกู้คืน |
tests/ |
เทสต์ระดับหน่วย เทสต์ integration เทสต์งานปฏิบัติการ และเทสต์ในเบราว์เซอร์ |
docs/specs/, docs/plans/ |
เอกสารออกแบบ และแผนการลงมือทำ |
docs/releases/ |
บันทึกประจำรุ่น รุ่นละหนึ่งไฟล์ |
website/ |
เว็บเอกสารที่คุณกำลังอ่านอยู่ |
ข้อความที่แอดมินแสดงอยู่ใน src/lib/admin-i18n.ts ส่วนข้อความของหน้าเว็บสาธารณะอยู่ใน src/lib/i18n.ts ทั้งสองไฟล์เขียนไว้ทั้งภาษาอังกฤษและภาษาไทย
ข้างใน src/server
หัวข้อที่มีชื่อว่า “ข้างใน src/server”| โฟลเดอร์ | เก็บอะไร |
|---|---|
auth/ |
Better Auth พาสคีย์ การลงทะเบียนพาสคีย์ การกู้คืน และการติดตั้ง |
content/ |
บทความ เพจ หมวดหมู่ เมนู สไลด์หน้าแรก การตั้งค่า การเปลี่ยนเส้นทาง และโหมดปิดปรับปรุง ที่เก็บใน PostgreSQL |
db/ |
schema ของ Kysely ตัวเชื่อมฐานข้อมูล และ migration |
http/ |
คำตอบและข้อผิดพลาดของ API สาธารณะ และเอกสาร OpenAPI ใน openapi.ts |
media/ |
ส่วนที่คุยกับที่เก็บไฟล์แบบ S3 และคลังไฟล์ |
plugins/ |
การตั้งค่าของปลั๊กอิน การเข้ารหัสค่าที่เป็นความลับ และงานฝั่งแกนของระบบในแต่ละ hook |
stats/ |
การนับจำนวนเข้าชมและจำนวนอ่าน และรายงาน |
themes/ |
การตั้งค่าที่เก็บไว้ของแต่ละธีม |
update/ |
การตรวจหารุ่นใหม่ที่เมนู “ระบบ” และตัวที่คุยกับตัวอัปเดต |
การเปลี่ยนโครงสร้างฐานข้อมูลแต่ละครั้งคือไฟล์ใหม่ที่มีหมายเลขกำกับใน src/server/db/migrations/ หน้าวิธีร่วมพัฒนา บอกว่าต้องลงทะเบียนไฟล์นั้นไว้ที่ไหนอีกบ้าง
ไฟล์รอบ ๆ โค้ด
หัวข้อที่มีชื่อว่า “ไฟล์รอบ ๆ โค้ด”| ไฟล์หรือโฟลเดอร์ | คืออะไร |
|---|---|
compose.yaml |
PostgreSQL กับ SeaweedFS สำหรับพัฒนา และตัวแอปด้วยเมื่อใช้ profile production ซึ่งการติดตั้งแบบ build จากซอร์สโค้ดใช้อยู่ |
compose.managed.yaml |
การติดตั้งแบบ managed ตั้งแต่ 1.0.0 ซึ่งรันแอปจาก image ทางการ |
compose.test.yaml |
PostgreSQL กับ SeaweedFS แบบใช้แล้วทิ้ง ที่เทสต์ integration และเทสต์ในเบราว์เซอร์เปิดขึ้นมาใช้ |
Dockerfile |
image ของแอป |
config/ |
การตั้งค่า S3 ของ SeaweedFS และ unit ของ systemd สำหรับตัวอัปเดต |
playwright.config.ts |
สอง project ของเทสต์ในเบราว์เซอร์ คือเดสก์ท็อปกับโทรศัพท์ |
ตัวอัปเดตใน src/update/ กับ src/updater/ คอมไพล์แยกด้วย npm run build:updater และรันคู่กับแอปบนเซิร์ฟเวอร์แบบ managed หน้าการอัปเดต บอกว่าตัวอัปเดตทำอะไร ตัวอัปเดตมากับการติดตั้งแบบ managed ตั้งแต่ 1.0.0 เป็นต้นไป
หน้าการทดสอบ บอกว่าแต่ละโฟลเดอร์ใต้ tests/ ตรวจอะไร และต้องมีอะไรก่อนจึงจะรันได้

