DevD | Interactive Learning

พจนานุกรมปูพื้นฐานการตั้งค่าโดเมน (Domain & DNS Dictionary)

ปูพื้นฐานคำศัพท์เทคนิคสำคัญ เพื่อเปลี่ยนโปรเจกต์เครื่องจำลองให้กลายเป็นระบบอินเทอร์เน็ตจริงได้อย่างไร้รอยต่อค่ะ:

1. Domain Name (ชื่อโดเมน)

ชื่อเว็บไซต์ที่เป็นตัวหนังสือจำง่าย เช่น dev-d.net ถูกออกแบบมาแทนการใช้ชุดตัวเลข เพื่อความสะดวกในการสื่อสารแบรนด์และการเข้าใช้

2. IP Address (หมายเลขไอพี)

รหัสพิกัดตัวเลขประจำเครื่องเซิร์ฟเวอร์บนอินเทอร์เน็ต เช่น 76.76.21.21 (IPv4) ที่ใช้ระบุตัวเครื่องปลายทางทางกายภาพ

3. DNS Server (ระบบเซิร์ฟเวอร์แปลชื่อ)

เซิร์ฟเวอร์ที่ทำหน้าที่เปรียบเสมือน "สมุดโทรศัพท์ส่วนกลางของโลก" คอยจับคู่แปลชื่อโดเมนให้กลายกลับเป็นหมายเลข IP Address เพื่อให้เบราว์เซอร์สามารถดึงข้อมูลมาแสดงผลได้ถูกต้อง

4. DNS Record (ระเบียนระบุเส้นทาง)

แถวข้อมูลแต่ละแถวที่คุณป้อนเข้าไปในระบบ DNS เพื่อทำหน้าที่ชี้ตำแหน่งปลายทางให้กับโดเมน เช่น A, CNAME, TXT ซึ่งส่งผลโดยตรงต่อการวิ่งทราฟฟิกของผู้ใช้

5. TTL: Time to Live (อายุขัยข้อมูลแคช)

เวลาเป็นวินาทีที่กำหนดให้เบราว์เซอร์หรือเครื่องเน็ตเวิร์กทั่วโลกรวมถึง ISP สามารถจำค่านั้นๆ ไว้ในเครื่องได้ หากมีผู้ใช้เข้าซ้ำจะได้ไม่ต้องวิ่งมาถาม DNS ต้นทางใหม่ตลอดเวลา

6. Propagation (การกระจายระเบียนข้อมูล)

กระบวนการที่เซิร์ฟเวอร์ DNS ทั่วโลกทยอยอัปเดตระเบียนล่าสุดที่เราแก้ไขให้ตรงกัน ซึ่งอาจใช้เวลาประมวลผลตั้งแต่ 5 นาทีไปจนถึงสูงสุด 24 ชั่วโมง ขึ้นอยู่กับความถี่ของแต่ละค่ายเน็ตเวิร์ก

1เปรียบเปรยเห็นภาพ: เลขพิกัดละติจูดเกาะล้าน กับ ชื่อป้ายร้าน

ลองนึกภาพว่าคุณมิกะตั้งร้านอาหารที่อร่อยขึ้นมาหนึ่งร้าน หากมีใครถามหาที่ตั้ง คุณย่อมบอกชื่อร้านและถนนของร้าน เช่น **"ร้านสเต็ก DevD สาขาสุขุมวิท"** แทนที่จะบอกพิกัดภูมิศาสตร์ทางทหารบนแผนที่โลกเป็นตัวเลขละเอียดหยิบอย่าง **"ละติจูด 13.736717, ลองจิจูด 100.560412"** ใช่ไหมคะ? เพราะมันทั้งจำยาก สื่อสารลำบาก และเสี่ยงต่อการพิมพ์สลับกันสูงมาก

กลไกการนำทางในโลกของเว็บไซต์ก็เป็นไปในลักษณะเดียวกันเป๊ะเลยค่ะ:

ตารางเปรียบเทียบโลกจริงและโลกอินเทอร์เน็ต

•
หมายเลข IP Address (พิกัดโลกจริง):เป็นพิกัดระบุตำแหน่งเซิร์ฟเวอร์จริงบนระบบคลาวด์ เช่น 76.76.21.21 ซึ่งคอมพิวเตอร์และเบราว์เซอร์สามารถอ่านและคุยผ่านพิกัดนี้ได้รวดเร็วมาก แต่อ่านยากและเป็นเรื่องยากอย่างยิ่งที่มนุษย์ทั่วไปจะจดจำ (เปรียบเหมือน "พิกัดละติจูด/ลองจิจูดของเกาะล้าน")
•
ชื่อโดเมน (ป้ายร้าน):เป็นข้อความภาษาอังกฤษที่แบรนดิ้งมาเป็นอย่างดี เช่น www.dev-d.net อ่านออกเสียงง่าย พิมพ์ค้นหาได้รวดเร็ว และมีผลโดยตรงต่อการทำ SEO ตลอดจนภาพลักษณ์ความน่าเชื่อถือของเว็บไซต์ (เปรียบเหมือนป้ายหน้าร้าน "สเต็ก DevD")
•
ระบบ DNS (คนบอกทาง):เมื่อผู้ใช้ป้อนชื่อโดเมนป้ายร้านบนเบราว์เซอร์ ระบบ DNS จะช่วยเช็คสมุดบันทึกเพื่อแปลชื่อนั้นกลับไปเป็นพิกัดตัวเลขไอพี IP Address เพื่อให้เบราว์เซอร์สามารถขับรถเดินทางไปหาถูกเครื่องเซิร์ฟเวอร์ (เปรียบเหมือน GPS Navigator อัจฉริยะหรือคนคอยบอกทางนั่นเองค่ะ)

2ระเบียนสืบค้นที่จำเป็นในชีวิตจริง (A, CNAME และ TXT)

เมื่อคุณสมัครใช้บริการจดทะเบียนโดเมนเนมกับผู้ให้บริการจดทะเบียนชั้นนำ (เช่น GoDaddy, Namecheap, Cloudflare หรือเครื่องมือจดทะเบียนในไทย) เราจะได้พบหน้าต่างสำหรับจัดการแผงควบคุมระเบียน DNS (DNS Zone File Editor) เพื่อกรอกข้อมูลชี้ทางหลักๆ 3 แบบดังนี้ค่ะ:

TYPE (ชนิด)	HOST / NAME	VALUE (ปลายทาง)	คำอธิบายและหน้าที่ในโลกปฏิบัติจริง
A Record	@ (โดเมนหลัก)	76.76.21.21	Address Record ใช้ผูกโดเมนหลักตัวเปล่าที่ไม่มีคำว่า www นำหน้า (เรียกว่า Apex Domain เช่น `dev-d.net`) เข้ากับหมายเลข IPv4 ของเซิร์ฟเวอร์โดยตรง ค่า Value จะต้องเป็นชุดตัวเลขไอพีเท่านั้น ห้ามใส่ตัวหนังสือค่ะ
CNAME	www (หรือชื่อย่อย)	cname.vercel-dns.com	CNAME (Canonical Name) ทำหน้าที่เป็น "ชื่อเล่นชี้ไปหาชื่อจริง" โดยชี้โดเมนย่อย (Subdomain เช่น `www.dev-d.net`) ให้วิ่งตามไปที่ชื่อโดเมนหลักของผู้ให้บริการ ข้อดีคือหาก IP ปลายทางของ Vercel ย้ายที่อยู่ เราก็ไม่ต้องคอยไปเปลี่ยนตัวเลขไอพีด้วยตนเองค่ะ
TXT Record	@ (หรือชื่อเฉพาะ)	google-site-verification=...	TXT (Text Record) บันทึกตัวหนังสืออักษรดิบ ใช้สำหรับตรวจสอบยืนยันความเป็นเจ้าของเว็บไซต์ เช่น ยืนยันกับ Google Search Console หรือใส่รหัสความปลอดภัยพิเศษสำหรับอีเมลระบบ เพื่อป้องกันไม่ให้คนอื่นสวมสิทธิ์แอบอ้างส่งอีเมลสแปมออกไปในชื่อโดเมนของคุณค่ะ

3วงจรอายุคำขอข้อมูลของเบราว์เซอร์ (DNS Query Lifecycle)

เวลาที่ผู้ใช้พิมพ์ชื่อเว็บไซต์ลงไปบน Address Bar เช่น https://www.dev-d.net แล้วเคาะ Enter ตัวเบราว์เซอร์จะสวมบทนักสืบหลังบ้านตามหาตำแหน่งหน้าเว็บผ่าน 4 ขั้นตอนดังนี้ค่ะ:

Step 1: Check Cache

เบราว์เซอร์จะแอบค้นประวัติข้อมูลในเครื่องตนเองก่อน (Local Cache หรือไฟล์ hosts) หากเคยค้นเจอและระบบยังจำได้ จะดึง IP ไปเปิดแสดงในพริบตาทันทีค่ะ

Step 2: Ask Resolver

หากเครื่องไม่มีความจำ จะส่งเสียงเรียกหาตัวแทนบริการอินเทอร์เน็ต (ISP Resolver ของ AIS/True หรือ Public DNS ยอดฮิตอย่าง Cloudflare 1.1.1.1 หรือ Google 8.8.8.8) เพื่อถามทาง

Step 3: Resolve Hierarchy

กรณีไม่พบคำตอบจากตัวแทน ระบบจะเริ่มยิงสืบหาต่อแบบลำดับขั้น: ตั้งแต่ Root Server ➔ TLD Server (ผู้ดูแลสัญชาติ .net, .com) ➔ ไปบรรจบรับค่าที่ Authoritative Server (เซิร์ฟเวอร์ต้นขั้วจดทะเบียนของคุณ)

Step 4: Fetch Content

เมื่อเบราว์เซอร์ได้หมายเลขปลายทาง (IP: `76.76.21.21` ของคลาวด์ Vercel) ก็จะวิ่งไปเคาะประตูติดต่อเครื่องนั้น สั่งโหลดโค้ดสคริปต์หน้าเว็บมาประมวลผลแสดงให้คุณเข้าใช้งานได้ค่ะ

4คู่มือปฏิบัติจริง: การผูกโดเมนเข้า Vercel และเชื่อมโยง Supabase อย่างปลอดภัย

นี่คือ 3 ขั้นตอนหลักที่นักพัฒนาโปรแกรมคอมมูนิตี้บอร์ดต้องลงมือทำ เพื่อเปลี่ยนที่อยู่จากเครื่องทดลองเดิมให้มาเข้าใช้ผ่านโดเมนจริงของคุณค่ะ:

การผูกทะเบียนโดเมนที่แผงควบคุม Vercel

ล็อกอินเข้าหน้าแดชบอร์ด Vercel ➔ เลือกโครงการของคุณ (เช่น **dev-d**) ➔ ไปที่แท็บ **Settings** ด้านบน ➔ เลือกเมนู **Domains** ฝั่งซ้าย จากนั้นพิมพ์ชื่อโดเมนหลักที่คุณจดทะเบียนมา เช่น www.dev-d.net แล้วกดเพิ่มเข้าไปในโครงการค่ะ เพื่อเตรียมความพร้อมให้ Vercel รู้จักโดเมนของคุณ

การเข้าไปกรอกค่า DNS Records ณ ฝั่งบริการโดเมน

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

ระเบียนที่ต้องแอดในระบบผู้ขายโดเมน:

Record 1: Type A | Host/Name @ | Value 76.76.21.21
Record 2: Type CNAME | Host/Name www | Value cname.vercel-dns.com

การอัปเดตสิทธิ์เชื่อมเข้าล็อกอินในระบบ Supabase Authentication

นี่คือขั้นตอนที่สำคัญมากและลืมไม่ได้เป็นอันขาดค่ะ! เนื่องจากเว็บไซต์เรามีกลไกระบบเข้าสู่ระบบสมาชิก หากเราเปลี่ยนชื่อโดเมนเป็นเว็บจริงแล้ว ให้เข้าไปที่ **Supabase Dashboard** ➔ เลือกโครงการฐานข้อมูลของคุณ ➔ ไปที่เมนู **Authentication** ➔ แท็บ **URL Configuration**

จากนั้นให้แก้ไขในส่วนของ **Site URL** จากลิงก์เครื่องทดลองเดิม ให้เป็นชื่อโดเมนจริงของคุณอย่างเป็นทางการ: https://www.dev-d.net เพื่อป้องกันปัญหาเรื่องเบราว์เซอร์บล็อกระบบยืนยันตัวตน และเพื่อให้เมลสมัครสมาชิกดีดพอร์ตกลับมาหน้าเว็บจริงได้อย่างถูกต้องค่ะ

5หลุมพรางสุดคลาสสิกของนักพัฒนามือใหม่ (Common DNS Pitfalls)

ในการขึ้นระบบจริงเป็นเรื่องปกติธรรมดามากค่ะที่จะพบเจอปัญหาขัดข้องทางเทคนิค นี่คือเช็คลิสต์ตรวจค้นหาสาเหตุและแนวทางการแก้ปัญหาที่พบบ่อยค่ะ:

ปัญหา: ขึ้นหน้าจอ 404 ของ Vercel

**สาเหตุ:** คุณทำการชี้ระเบียน DNS ที่ผู้ให้บริการโดเมนมาทาง IP Vercel เรียบร้อยแล้ว แต่ลืมนำชื่อโดเมนนั้นมากรอกเพิ่ม (Add Domain) ในหน้าแผงตั้งค่า Settings ➔ Domains ของโปรเจกต์บนตัว Vercel Dashboard ทำให้เซิร์ฟเวอร์หาไฟล์โปรเจกต์ของคุณไม่เจอค่ะ

ปัญหา: รอกระจายสัญญาณ (Propagation Delay)

**สาเหตุ:** ตั้งค่าทุกอย่างถูกต้องหมดแล้ว แต่เวลาเข้าเว็บยังเป็นหน้าเปล่าหรือเว็บเดิมอยู่ นั่นเพราะข้อมูลระเบียนใหม่ยังอัปเดตไปไม่ถึงผู้ให้บริการเน็ตที่คุณใช้อยู่ค่ะ ลองใช้คำสั่งตรวจสอบผ่านเครื่องคอมพิวเตอร์ของคุณเพื่อเช็คดูว่า IP อัปเดตแล้วหรือยัง

รันคำสั่งเช็คใน Terminal (CMD / PowerShell):nslookup www.dev-d.net

ปัญหา: ลูปนำทางวนซ้ำ (Redirect Loop)

**สาเหตุ:** หน้าเว็บขึ้นข้อความ ERR_TOO_MANY_REDIRECTS เกิดจากการตั้งค่าขัดแย้งกันเอง เช่น บังคับในระบบ Vercel ให้เปลี่ยนเส้นทางจาก www ไปหาตัวเว็บหลัก แต่ในตัวแปรและการจัดการเราท์เตอร์ในโค้ด React ดันตั้งคำสั่งบังคับให้ย้ายกลับมาเปิดหน้า www วนเวียนไม่สิ้นสุดจนเว็บดับไปเองค่ะ

ปัญหา: ล็อกอินไม่ได้ หรือเด้งกลับ localhost:3000

**สาเหตุ:** สมัครสมาชิกหรือยืนยันตัวตนสำเร็จแล้ว แต่เบราว์เซอร์พยายามส่งผู้ใช้งานกลับไปที่ที่อยู่ URL เดิมตอนเครื่องโฮสจำลองค้างอยู่ นั่นเพราะลืมเข้าไปเปลี่ยนข้อมูล **Site URL** ในตั้งค่า Authentication ของระบบ Supabase เป็นโดเมนหลักของเราอย่างเป็นทางการนั่นเองค่ะ

แท่นศึกษาโต้ตอบ: สตูดิโอนำทางจำลองระเบียน DNS (Interactive DNS Resolution Lab)

ลองเล่นกับเครื่องจำลองด้านล่างนี้เพื่อความเข้าใจเต็มพิกัดนะคะ! คุณมิกะสามารถลองแก้ไข เพิ่ม หรือลบระเบียน DNS ทางฝั่งซ้าย และลองถอดโดเมนออกจากแถบแผง Vercel ด้านขวา จากนั้นพิมพ์ลิงก์ลงในเบราว์เซอร์จำลองแล้วกด **Go 🚀** เพื่อมองเห็นภาพการเชื่อมโยงเส้นทางข้อมูลและวิเคราะห์จุดบกพร่องหลังบ้านแบบสดๆ ได้ทันทีค่ะ!

แท่นจำลองและควบคุมโดเมนเครือข่าย (DNS & Domain Controller)

ทดลองเพิ่มระเบียน DNS ตั้งค่าแผงควบคุม Vercel และจำลองการป้อนเบราว์เซอร์เพื่อเข้าเว็บจริง

DNS Zone Settings (ผู้จัดให้บริการโดเมน)

รายการระเบียน DNS ปัจจุบัน:

TYPE	HOST (ชื่อ)	VALUE (ชี้ไปหา)
A	@	76.76.21.21
CNAME	www	cname.vercel-dns.com
TXT	@	verification-key-xyz123

ข้อสังเกตระเบียบการตั้งค่า

• **A Record (@)**: ชี้เว็บหลัก (Apex) ไปยัง IP `76.76.21.21` เพื่อจับคู่เข้ากับเครื่อง Vercel
• **CNAME Record (www)**: ชี้ซับโดเมน `www` ไปยัง `cname.vercel-dns.com` เพื่อสร้างชื่อย่อที่ถูกต้อง

Vercel Project Settings (หลังบ้านเว็บ)

โดเมนที่ผูกกับโปรเจกต์ DevD:project: dev-d

www.dev-d.net

dev-d.net

ค่าบันทึกการเชื่อมโยงระบบ (Local Client Sync)// .vercel/project.json

{
  "projectId": "prj_cQSMZ2ZD...",
  "projectName": "dev-d"
}

โดเมนที่ชี้มาจะเข้าได้สำเร็จ ก็ต่อเมื่อโดเมนตัวเดียวกันนั้นถูกบันทึกจดทะเบียนในแผง Vercel ด้านบนเช่นกันค่ะ

Browser Address Bar & DNS Tracer

ป้อน URL แล้วกด Go เพื่อจำลองการสืบค้นหาข้อมูล

ขั้นตอนการเดินทางสืบค้น (DNS TRACE):

รอการเดินทางส่งข้อมูล...

เซิร์ฟเวอร์นำทางบันทึก (Server Logs)

การตั้งค่าโดเมน (Domain & DNS)
ป้ายที่อยู่ส่วนตัวของโครงการ สู่สายตาคนทั้งโลก!