สร้างเว็บ marine.ipptt.com ตั้งแต่ Zero จน Live
จาก repo เปล่าไปเป็นเว็บที่มีชีวิตบนอินเทอร์เน็ต -- session นี้เป็นการพิสูจน์ว่า marine-prime orchestrator สามารถสร้าง project ทั้งกองได้ในรอบเดียว
มาจากไหน
หลังจากที่ Team Marine เริ่มมีโครงสร้างชัดเจน (marine-prime, marine-frontend, marine-backend, marine-devops, marine-research) เราอยากมีเว็บแนะนำทีมเหมือน agency website ธรรมดา -- แต่สร้างด้วย AI agents เอง
ขั้นตอนการสร้าง
Step 1: Init repo และวางแผน
สร้าง repo /home/deploy-app/marine และ push ขึ้น GitHub เป็น haocomm/marine จากนั้นสั่ง marine-prime วางแผนและสร้างเว็บทั้งหมด
marine-prime สร้างครบทั้งหมดในรอบเดียว:
- Navbar -- Fixed navbar พร้อม mobile menu
- Hero -- Landing hero section
- About -- อธิบายว่า Team Marine คืออะไร
- Members -- 5 member cards พร้อมข้อมูลแต่ละคน
- Philosophy -- หลักการทีม
- Footer -- ข้อมูลด้านล่าง
Step 2: เพิ่มความสามารถ
หลังจากดูตัวแรก ตัดสินใจเพิ่ม:
- SVG avatars สำหรับแต่ละ agent -- ออกแบบเป็น circle + gradient + icon symbol
- Projects page (
/projects) -- แสดง project showcase - Navbar update -- เพิ่ม link ไป projects page
Step 3: Deploy ขึ้น Vercel
นี่คือจุดที่เจอปัญหามากที่สุด
ปัญหาที่เจอระหว่าง deploy
ปัญหา 1: Vercel CLI Auth
Token หมดอายุหลายรอบ ต้องให้ user login แบบ interactive ผ่าน browser หลายครั้ง
vercel login
# -> เปิด browser ให้ confirm
# -> token expired อีกรอบ
# -> ลองอีกครั้ง...
ปัญหาคือ vercel login ต้องทำ interactive ผ่าน browser -- agent ทำเองไม่ได้ ต้องให้ user ทำผ่าน ! command หรือพิจารณาใช้ VERCEL_TOKEN env var แทน
ปัญหา 2: Cloudflare Proxy vs Vercel SSL (HTTP 525)
นี่คือปัญหาที่น่าปวดหัวที่สุด ตั้ง DNS record แล้วแต่เว็บขึ้น HTTP 525 SSL Handshake Failed
สาเหตุ: Cloudflare default เปิด proxy (orange cloud) ซึ่งชนกับ Vercel SSL
แก้โดยเปลี่ยนจาก:
A record -> proxy ON (orange cloud)
เป็น:
CNAME -> cname.vercel-dns.com -> proxy OFF (grey cloud / DNS only)
ปัญหา 3: DNS verification ด้วย dig ไม่พอ
dig จากเครื่อง server เห็น Cloudflare IP แม้ user บอกว่าปิด proxy แล้ว -- เพราะ local DNS cache
ต้องใช้ Cloudflare DNS-over-HTTPS API แทน:
https://cloudflare-dns.com/dns-query?name=marine.ipptt.com&type=CNAME
ถึงจะ verify ได้จริงว่า CNAME เปลี่ยนแล้ว
ผลลัพธ์
marine.ipptt.com LIVE -- HTTP 200 เว็บสวย พร้อมใช้งาน พร้อม:
- Theme navy/cyan เข้ากับ concept ทีม marine
- SVG avatars สำหรับแต่ละ agent ให้ความรู้สึก unique
- Project showcase page แสดงผลงานที่ทีมทำมา
บทเรียน
- Vercel + Cloudflare: ใช้ CNAME ->
cname.vercel-dns.com+ DNS only (grey cloud) เสมอ - DNS Verification: ใช้ Cloudflare DNS API แทน
digเพื่อ bypass local cache - Vercel CLI Auth: ทำ interactive login ก่อน spawn agent -- หรือใช้ env var token
- Context compaction: ถ้า session ถูก compact ระหว่างงาน ต้อง re-read files ใหม่เพื่อจำ context
สรุป
การสร้างเว็บจาก zero ด้วย AI orchestrator เป็นไปได้ -- แต่ deploy pipeline ยังต้องการ human intervention ในจุดที่ต้อง authentication และ DNS configuration เรียนรู้ได้ว่า infrastructure work คือสิ่งที่ AI ทำได้ดีที่สุดเมื่อมี human คอยตัดสินใจในจุดสำคัญ
บทความนี้จาก session retrospective เมื่อ 3 เม.ย. 2026