ปล่อยของขึ้นเว็บให้ครบทุกขั้น

ภาพรวมขั้นตอน

ขั้นตอนเรียงตามลำดับ ถ้าเทสไม่ผ่านให้วนกลับไปแก้ ห้ามข้ามไป push

1 · เปลี่ยน version และ change log

เลข version ที่ป้ายมุมขวาล่างของเว็บมาจากรายการบนสุดของ CHANGELOG ใน app/index.html ที่เดียว ไม่มีไฟล์อื่นต้องแก้

1. ตั้งเลข version เป็นวันที่ (YYYY.MM.DD)

   รูปแบบเดียวกับที่มีอยู่ เช่น 2026.10.17 ใช้วันที่ที่ release จริง

   # วันที่วันนี้ = เลข version
   date +%Y.%m.%d                          # bash / Git Bash
   Get-Date -Format yyyy.MM.dd             # PowerShell
   
   # ดูรายการบนสุดของ CHANGELOG
   grep -n "version: '" app/index.html | head -3                          # bash
   Select-String "version: '" app/index.html | Select-Object -First 3     # PowerShell

2. เพิ่มรายการใหม่ไว้บนสุดของ CHANGELOG

   รายการใหม่อยู่ บนสุด ป้ายจะอ่านจากรายการแรก แต่ละข้อเป็นประโยคสั้นภาษาอังกฤษ (UI เป็นภาษาอังกฤษ) ขึ้นต้นด้วยหมวด เช่น Docs:, Tests:, Sign-in page:

   const CHANGELOG = [
     { version: '2026.10.18', changes: [
       'Docs: added the user journey page (Thai and English)',
       'Docs: added the release guide (Thai and English)',
     ] },
     { version: '2026.10.17', changes: [ /* ... */ ] },
   ];

3. ถ้า release ซ้ำวันเดิม

   เวอร์ชันเป็นวันที่ จึงซ้ำกันไม่ได้ ให้ เพิ่มข้อ ในรายการของวันนั้นแทนการสร้างรายการใหม่

4. เปิดดูผลในเว็บ

   npm start แล้วเปิด http://localhost:3000 ป้ายมุมขวาล่างต้องขึ้นเลขใหม่ กดค้างราว 0.6 วินาที (หรือโฟกัสแล้วกด Enter/Space) เพื่อเปิด change log ดูว่ารายการใหม่อยู่บนสุด

2 · รันเทสก่อน push

CI จะรันซ้ำให้อยู่แล้ว แต่รันในเครื่องก่อนจะรู้เร็วกว่าและไม่ทำให้ main แดง

# ดูสถานะและดึงของใหม่ก่อน
git status -sb
git pull --rebase origin main

npm ci                              # ครั้งแรก / เมื่อ package-lock เปลี่ยน
npm run test:unit                   # unit + contract
npm run test:smoke                  # เส้นทางหลัก
npm run test:characterization       # พฤติกรรมที่จดไว้ + golden master
npm run test:visual                 # เทียบภาพ (ต้องมี Docker รันอยู่)
npm test                            # ทั้งชุด (ทางเลือก ก่อน release ใหญ่)
npm run build:pages                 # ลองสร้าง dist/ เหมือนที่ขึ้น Pages

ถ้าเทสภาพ (visual) ไม่ผ่านเพราะ UI เปลี่ยนจริง

ภาพอ้างอิงต้องสร้างใน Docker เพื่อให้เป็น Linux เหมือน CI เท่านั้น (ภาพจาก Windows จะไม่ตรง) สร้างใหม่แล้วเปิดดูภาพก่อน commit

npm run test:visual:update          # สร้างภาพอ้างอิงใหม่ใน Docker (Linux เหมือน CI)
git status -sb tests/__screenshots__    # เปิดดูภาพที่เปลี่ยนก่อน commit

ถ้าแก้เอกสาร

ตัวเลขจำนวนเทสเปลี่ยนบ่อย นับใหม่ก่อนอ้างตัวเลขในเอกสาร: npx playwright test --list · npm run test:unit

3 · commit และ push

ข้อความ commit ใช้รูปแบบ <type>: <description> โดย type คือ feat, fix, refactor, docs, test, chore, perf, ci

git status -sb                                 # ดูว่ามีไฟล์อะไรบ้าง
git add app/index.html docs/ .github/pages/    # ระบุชื่อไฟล์ ไม่ใช้ git add -A
git diff --cached --stat                       # ตรวจอีกรอบ
git commit -m "feat: add the user journey and release guide pages (th/en)"
git push origin main

4 · Deploy ขึ้น Cloudflare Pages

หลัง push มี 2 workflow เริ่มเอง

gh run list --limit 5                   # ดูรอบที่เพิ่งเริ่ม
gh run watch                            # เลือกรอบแล้วดูสดจนจบ
gh run list --workflow "Publish site" --limit 3

แก้เฉพาะ tests/ หรือ unit/ แล้วเว็บไม่ขึ้นใหม่?

เป็นเรื่องปกติ เพราะ path ไม่เข้าเงื่อนไขของ Publish site ถ้าต้องการ deploy ก็สั่งเอง:

gh workflow run cloudflare-pages.yml --ref main    # สั่ง deploy เอง (ไม่ต้องมี commit ใหม่)
gh run watch

ตรวจว่าเว็บใหม่ขึ้นจริง

curl -sI https://testover.pages.dev/docs/release-guide.html | head -1   # ต้องได้ 200
git rev-parse --short HEAD                                              # เทียบกับ commit บนหน้า /status/

• เว็บ: testover.pages.dev → ป้ายมุมขวาล่างต้องเป็น version ใหม่ (ถ้ายังเก่า ให้ hard refresh)
• หน้า hub /status/ แสดง commit ที่ deploy และ commit ที่เป็นต้นทางของรายงาน
• เอกสารใหม่: /docs/<ชื่อไฟล์>.html ต้องตอบ 200 ทั้งไทยและอังกฤษ

ต้องมี secret CLOUDFLARE_API_TOKEN และ CLOUDFLARE_ACCOUNT_ID ใน repo (ชื่อโปรเจกต์มาจากตัวแปร CLOUDFLARE_PROJECT_NAME ค่าเริ่มต้น testover)

ย้อนกลับเมื่อ deploy แล้วพัง

git revert <sha>                        # ย้อนทีละ commit โดยไม่เขียนประวัติทับ
git push origin main                    # Publish site รันให้เองอีกรอบ

ชุดคำสั่งเดียวจบ

รวมขั้น 2–4 (ทำขั้น 1 ด้วยมือก่อน) หยุดทันทีถ้าคำสั่งใดล้มเหลว

# ชุดเต็มสำหรับ release (Git Bash) แก้ข้อความ commit ให้ตรงงานก่อนรัน
set -e
git pull --rebase origin main
npm run test:unit && npm run test:smoke && npm run test:characterization
npm run build:pages
git add app/index.html docs/ .github/pages/
git commit -m "feat: <สรุปสิ่งที่เปลี่ยน>"
git push origin main
gh run watch

กติกาตอนเพิ่ม/แก้เอกสาร

• ทุกหน้ามี 2 ภาษา: name.html (ไทย) และ name.en.html (อังกฤษ) มีปุ่มสลับภาษาทั้งหัวและท้ายหน้า ตัวเลขต้องตรงกัน
• ชื่อไฟล์ใช้ตัวพิมพ์เล็ก ตัวเลข - และ . เท่านั้น ไม่เช่นนั้นเซิร์ฟเวอร์จะตอบ 404
• ใส่แถบ topnav เหมือนหน้าอื่น (หัวข้อในหน้าอยู่ซ้าย ลิงก์ไปหน้าอื่นอยู่ขวา) และรองรับธีมสว่าง/มืดกับจอมือถือ
• ผูกลิงก์เข้าระบบ: เพิ่มในรายการ “อ่านต่อ” ของ overview.html / overview.en.html และใน .github/pages/index.html
• บันทึกใน change log ด้วยบรรทัดที่ขึ้นต้นด้วย Docs: (ดูหัวข้อ 1)
• เอกสารใหม่แตะ docs/** จึงเข้าเงื่อนไข deploy อัตโนมัติ

แก้ปัญหาที่พบบ่อย