Mac เพื่อนๆ เคยสงสัยไหมว่าเวลาผู้ใช้พิมพ์ URL แล้วหน้าเว็บแสดงผลขึ้นมาได้ยังไง? Internet ทำงานยังไง? โปรโตคอล HTTP, HTTPS คืออะไร? ผมจะไขข้อสงสัยทุกคนกัน
Internet คืออะไร?
Internet คือเครือข่ายของเครือข่าย (network of networks) ที่เชื่อมต่อคอมพิวเตอร์ทั่วโลกเข้าด้วยกัน ทำให้เราสามารถส่งข้อมูล, เข้าถึงเว็บไซต์, ใช้แอปออนไลน์ และติดต่อสื่อสารกันได้
หากคุณอยากเป็น Frontend Developer การเข้าใจว่า Internet ทำงานยังไงจะช่วยให้คุณสามารถทำเว็บที่ให้โหลดเร็ว, ปลอดภัย และรองรับผู้ใช้งานได้ดีขึ้น
การทำงานเมื่อมีคนเข้าเว็บไซต์
ลองนึกภาพผู้ใช้พิมพ์ https://mywebsite.com แล้วกด Enter:
-
DNS Lookup
เครื่องจะส่ง request ไปยัง DNS (Domain Name System) เพื่อแปลงชื่อโดเมนmywebsite.comให้เป็น IP address เช่น203.0.113.42 -
เชื่อมต่อเซิร์ฟเวอร์ผ่าน IP Address
เมื่อได้ IP แล้ว browser จะเปิด TCP connection กับ server ของเว็บ -
HTTP/HTTPS Request
Browser ส่ง request เช่นGET /ผ่านโปรโตคอล HTTP หรือ HTTPS -
รับ HTML, CSS, JS, Image
Server ส่ง response กลับมาเป็น HTML พร้อมลิงก์ไปยังไฟล์ CSS, JS และภาพต่าง ๆ -
Rendering และ DOM Parsing
Browser ทำการ parse HTML, สร้าง DOM, โหลด CSS & JS และแสดงผล
เรามาขยายความด้านบนกันดีกว่า
Domain Name (โดเมน) คืออะไร?
Domain Name คือชื่อที่ใช้เรียกเว็บไซต์แทน IP Address ที่เป็นตัวเลขยาวๆ เช่น 203.0.113.42 เพื่อให้จดจำได้ง่าย ตัวอย่างเช่น เมื่อคุณพิมพ์ google.com จริงๆ แล้วเบื้องหลังคือการไปค้นหา IP ของ server ที่เก็บเว็บนั้นอยู่
ยกตัวอย่างเช่น
- คุณพิมพ์:
https://mywebsite.com - DNS จะแปลงชื่อโดเมน
www.mywebsite.com→93.184.216.34(ตัวอย่าง IP) - Browser ก็จะไปขอข้อมูลจาก server ที่ IP นั้น
โครงสร้างของ Domain Name
Domain มีการแบ่งเป็นระดับ เช่น:
| ระดับ | ตัวอย่าง | ความหมาย |
|---|---|---|
| Top-Level Domain (TLD) | .com, .org, .net | ประเภทของโดเมน |
| Second-Level Domain | google ใน google.com | ชื่อหลักของเว็บไซต์ |
| Subdomain | blog.mywebsite.com | ใช้แยกหมวดหมู่/บริการ |
HTTP คืออะไร?
HTTP หรือชื่อเต็มว่า HyperText Transfer Protocol คือ โปรโตคอล หรือกฎเกณฑ์ที่ใช้ในการสื่อสารระหว่าง เว็บเบราว์เซอร์ (Client) กับ เว็บเซิร์ฟเวอร์ (Server) เพื่อขอและส่งข้อมูล เช่น HTML, CSS, JavaScript, รูปภาพ หรือ API response ต่างๆ
HTTP Request ประกอบด้วยอะไร?
| ชื่อ | อธิบาย |
|---|---|
| Method | เช่น GET, POST, PUT, DELETE ระบุว่าต้องการทำอะไรกับข้อมูล |
| URL | ชี้ไปยัง resource ที่ต้องการ เช่น /api/users |
| Headers | ข้อมูลเพิ่มเติม เช่น Content-Type, Authorization |
| Body | ใช้เฉพาะบาง Method เช่น POST, PUT สำหรับส่งข้อมูล |
ตัวอย่าง:
GET /products HTTP/1.1
Host: api.example.comแล้วถ้าอยากให้เว็บของเราอยู่ใน Internet ต้องรู้อะไรบ้าง
เมื่อคุณสร้างเว็บไซต์เสร็จแล้ว จะยัง ไม่สามารถเข้าถึงได้จากอินเทอร์เน็ต ถ้าคุณยังไม่ได้ทำ 2 สิ่งนี้:
- จดโดเมนเนม (Domain Name) – เช่น
mywebsite.com - ซื้อบริการ Web Hosting – เพื่อเก็บไฟล์ HTML, CSS, JS, รูปภาพ ฯลฯ
🌐 Web Hosting คืออะไร?
Web Hosting คือบริการที่ให้คุณ “เช่าพื้นที่บนอินเทอร์เน็ต” เพื่อเก็บไฟล์ของเว็บไซต์ เช่น HTML, CSS, JavaScript และรูปภาพต่าง ๆ แล้วเปิดให้ผู้ใช้งานทั่วโลกเข้าถึงได้ผ่านเบราว์เซอร์
เปรียบเทียบง่ายๆ คือ:
- โดเมน = ชื่อร้านของคุณ (เช่น
mywebsite.com)- Hosting = ทำเลร้านที่ตั้งอยู่ในโลกออนไลน์
- Server = เครื่องคอมพิวเตอร์พิเศษที่เปิดร้านคุณให้คนทั้งโลกเข้าได้
🖥️ Server คืออะไร?
Server คือคอมพิวเตอร์ที่เปิดให้เครื่องของผู้ใช้งานทั่วโลกเชื่อมต่อเข้ามาดึงข้อมูลเว็บไซต์ของคุณได้ตลอดเวลา Hosting Provider จะมี Server เหล่านี้ให้เช่า พร้อมระบบอินเทอร์เน็ตความเร็วสูง และบริการอื่น ๆ ที่จำเป็น
🧰 ประเภทของ Web Hosting
| ประเภท Hosting | เหมาะสำหรับ | จุดเด่น |
|---|---|---|
| Shared Hosting | เว็บส่วนตัว, เว็บเล็ก | ราคาถูก, ใช้งานง่าย |
| VPS (Virtual Private Server) | เว็บขนาดกลาง | ได้ทรัพยากรเฉพาะ, ปรับแต่งได้ |
| Dedicated Server | เว็บใหญ่, ธุรกิจ | ควบคุมได้เต็มที่, ประสิทธิภาพสูง |
| Reseller Hosting | คนรับทำเว็บไซต์ | แบ่งขาย Hosting ให้ผู้อื่นได้ |
ส่วนวิธีทำนั้น โปรดติดตาม #Road-To-Frontend
📝 สรุปเนื้อหา: Internet คืออะไร?
- Internet คือเครือข่ายของเครือข่ายที่เชื่อมต่อคอมพิวเตอร์ทั่วโลก
- การที่เว็บไซต์จะแสดงผลได้ต้องผ่านขั้นตอน: DNS Lookup → เชื่อมต่อเซิร์ฟเวอร์ → ส่ง HTTP Request → รับ Response → Render หน้าเว็บ
- Domain Name คือชื่อเว็บไซต์ที่ใช้งานแทน IP Address เพื่อให้ง่ายต่อการจดจำ เช่น
google.com - Domain มีโครงสร้าง เช่น TLD (.com), Second-Level (google), Subdomain (blog.google.com)
- HTTP คือโปรโตคอลที่เว็บเบราว์เซอร์ใช้สื่อสารกับเซิร์ฟเวอร์ เช่น
GET,POST - HTTP Request มีส่วนประกอบหลัก: Method, URL, Headers, Body
- การจะให้เว็บไซต์ออนไลน์ได้ ต้องมี:
- Domain Name – ชื่อเว็บ
- Web Hosting – พื้นที่สำหรับเก็บไฟล์เว็บ
- Web Hosting คือบริการเช่าพื้นที่เซิร์ฟเวอร์เพื่อให้เว็บไซต์ออนไลน์
- Server คือคอมพิวเตอร์ที่เปิดให้ผู้ใช้งานเข้าถึงเว็บไซต์
- ประเภทของ Web Hosting ที่ควรรู้:
- Shared Hosting – ใช้งานง่าย ราคาถูก
- VPS – เหมาะกับเว็บขนาดกลาง
- Dedicated Server – ประสิทธิภาพสูง ควบคุมได้เต็มที่
- Reseller Hosting – สำหรับผู้รับทำเว็บ
เข้าใจหลักการของ Internet แล้ว จะช่วยให้เราเป็น Frontend Developer ที่เข้าใจภาพรวมมากขึ้นทั้งการทำงานของเว็บและการ deploy ให้คนเข้าถึงได้จริงบนโลกออนไลน์
แหล่งข้อมูลอ้างอิง:
