จากเครื่องของฉันสู่คนทั้งโลก

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

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

ปริศนาแรกทำไมเพื่อนเปิดไม่ได้?

ลองดูที่อยู่ที่คุณส่งไปอีกครั้ง คำว่า localhost ไม่ใช่ชื่อของคอมพิวเตอร์คุณ แต่เป็นคำพิเศษที่คอมพิวเตอร์ทุกเครื่องเข้าใจตรงกันว่า "เครื่องนี้เอง" ส่วนตัวเลข 3000 คือหมายเลข port ที่โปรแกรมเว็บไซต์ของคุณรอรับการเชื่อมต่ออยู่

localhostเครื่องนี้เอง

ชื่อพิเศษที่ชี้กลับมาหาเครื่องที่ใช้งานอยู่เสมอ นักพัฒนาใช้ทดสอบเว็บไซต์บนเครื่องตัวเองก่อนเผยแพร่ ไม่มีใครภายนอกเข้าถึงได้ผ่านชื่อนี้

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

ชิ้นส่วนที่ 1บ้านที่ไม่เคยปิดไฟ: Hosting

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

Hostingบริการที่อยู่ของเว็บไซต์

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

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

IP Addressที่อยู่ของเครื่องบนเครือข่าย

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

ชิ้นส่วนที่ 2 และ 3ชื่อที่คนจำได้ กับสมุดที่อยู่ของโลก

ถึงตรงนี้ใครพิมพ์ 203.0.113.10 ก็เปิดเว็บไซต์ได้แล้ว แต่ไม่มีใครอยากจำตัวเลขแบบนี้ เราจึงจด ชื่อโดเมน อย่าง internetmachine.example เป็นชื่อที่อ่านออกเสียงได้และจำง่าย

Domainชื่อโดเมน

ชื่อที่คนใช้เรียกเว็บไซต์แทนตัวเลข เช่น example.com เราจดชื่อผ่านผู้ให้บริการจดโดเมน และต้องต่ออายุเป็นระยะ ชื่อจึงเป็นของเราตราบที่ยังจ่ายค่าต่ออายุ

แต่การจดชื่ออย่างเดียวยังไม่พอ ชื่อที่เพิ่งจดยังไม่รู้ว่าต้องพาคนไปที่เครื่องไหน เราต้องไปเขียนบันทึกไว้ในระบบที่ชื่อว่า DNS ว่าชื่อนี้หมายถึงตัวเลขอะไร

DNS (Domain Name System)ระบบแปลชื่อโดเมน

ระบบที่แปลชื่อโดเมนให้เป็น IP Address ทุกครั้งที่เราพิมพ์ชื่อเว็บไซต์ เบราว์เซอร์จะถาม DNS ก่อนว่าชื่อนี้คือเครื่องหมายเลขอะไร

ประกอบร่างเมื่อมีคนพิมพ์ชื่อเว็บไซต์ของคุณ

ตอนนี้ชิ้นส่วนครบพอให้คนทั้งโลกเปิดเว็บได้แล้ว ลองไล่ดูว่าเกิดอะไรขึ้นในเสี้ยววินาทีที่ผู้ใช้ในญี่ปุ่นพิมพ์ internetmachine.example แล้วกด Enter

1. 1เบราว์เซอร์ถาม DNS ว่า "internetmachine.example คือเครื่องหมายเลขอะไร?" และได้คำตอบว่า 203.0.113.10
2. 2เบราว์เซอร์เชื่อมต่อไปที่เครื่องหมายเลขนั้น แล้วส่ง Request ขอหน้าแรกของเว็บไซต์ (เล่ม 02 เล่าเรื่อง Request และ Response อย่างละเอียด)
3. 3เซิร์ฟเวอร์ตอบกลับด้วย Response ที่มีไฟล์ HTML, CSS และ JavaScript
4. 4เบราว์เซอร์อ่านไฟล์เหล่านั้นแล้ววาดหน้าเว็บขึ้นจอ (เรื่องที่เล่ม 01 พาแกะดู)

ลงมือห้องทดลอง: เผยแพร่เว็บไซต์ของคุณสู่โลก

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

ถ้าคุณลองครบ คุณน่าจะสังเกตเห็นสองเรื่องที่ยังไม่ได้อธิบาย: แม่กุญแจที่โผล่ขึ้นมาในขั้น HTTPS และกล่อง CDN ที่ทำให้คนในบราซิลโหลดรูปเร็วขึ้นมาก สองหัวข้อถัดไปจะอธิบายว่ามันทำงานอย่างไร

ชิ้นส่วนที่ 4แม่กุญแจหน้าชื่อเว็บ: HTTPS

ระหว่างเครื่องผู้ใช้กับเซิร์ฟเวอร์ ข้อมูลวิ่งผ่านอุปกรณ์หลายตัว เช่น เราเตอร์ไวไฟในร้านกาแฟ และอุปกรณ์ของผู้ให้บริการอินเทอร์เน็ตหลายราย ถ้าข้อมูลเดินทางแบบไม่เข้ารหัส (HTTP ธรรมดา) อุปกรณ์ระหว่างทางสามารถอ่านหรือแอบแก้ไขข้อมูลได้ รวมถึงรหัสผ่านที่คุณพิมพ์

HTTPSHTTP แบบปลอดภัย

การส่ง Request และ Response ผ่านการเชื่อมต่อที่เข้ารหัส (ด้วยมาตรฐานชื่อ TLS) เซิร์ฟเวอร์ต้องมีใบรับรองที่ยืนยันว่าเป็นเจ้าของชื่อโดเมนนั้นจริง เบราว์เซอร์จึงแสดงแม่กุญแจ

ชิ้นส่วนที่ 5ระยะทาง คนจำนวนมาก และ CDN

ข้อมูลในสายใยแก้วนำแสงวิ่งเร็วมาก ราว 200,000 กิโลเมตรต่อวินาที แต่โลกก็กว้างมากเช่นกัน กรุงเทพฯ กับเซาเปาโลในบราซิลห่างกันเป็นเส้นตรงราว 16,000 กิโลเมตร คำขอที่ต้องไปแล้วกลับจึงใช้เวลาอย่างน้อยราว 160 มิลลิวินาทีในทางทฤษฎี และของจริงมักนานกว่านั้น เพราะสายเคเบิลไม่ได้วิ่งเป็นเส้นตรงและต้องผ่านอุปกรณ์หลายต่อ ช่วงเวลารอแบบนี้เรียกว่า latency

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

CDN (Content Delivery Network)เครือข่ายส่งเนื้อหา

เครือข่ายเซิร์ฟเวอร์ปลายทาง (edge) ที่ตั้งอยู่หลายประเทศ เก็บสำเนาไฟล์อย่างรูปภาพ CSS และ JavaScript ไว้ใกล้ผู้ใช้ ผู้ใช้ได้ไฟล์เร็วขึ้น และเซิร์ฟเวอร์ต้นทางรับงานน้อยลง

CDN ยังช่วยเรื่องที่สำคัญไม่แพ้กัน คือ ภาระงาน (Load) เซิร์ฟเวอร์ทุกเครื่องมี ความจุ (Capacity) จำกัด คือรับคำขอได้แค่จำนวนหนึ่งต่อวินาที ถ้าคำขอมาเกินกว่านั้น คำขอที่เกินต้องรอคิว และถ้าคิวเต็ม เซิร์ฟเวอร์จะปฏิเสธด้วยรหัส 503 Service Unavailable ซึ่งแปลว่า "ตอนนี้ไม่ว่างให้บริการ" นี่คือสิ่งที่เกิดกับเว็บขายบัตรคอนเสิร์ตในนาทีที่เปิดขาย

• ลดงานที่มาถึงต้นทาง ด้วย CDN ให้ edge ตอบไฟล์คงที่แทน
• เพิ่มจำนวนเซิร์ฟเวอร์ แล้วใช้ Load Balancer แบ่งคำขอให้ช่วยกันตอบ
• ทำให้แต่ละคำขอใช้งานน้อยลง เช่น เก็บผลลัพธ์ที่คำนวณแล้วไว้ใช้ซ้ำ (เล่มนี้บทที่ 6 จะลงลึก)

ภาพใหญ่สี่เล่ม หนึ่งเครื่องจักร

ลองย้อนดูเส้นทางทั้งหมด หน้าเว็บที่คุณเห็นถูกประกอบจากไฟล์ฝั่ง Frontend (เล่ม 01) เมื่อคุณกดปุ่ม คำขอวิ่งไปให้ Backend ตัดสินใจ (เล่ม 02) ข้อมูลที่ต้องจำถูกเก็บใน Database (เล่ม 03) และทั้งหมดนี้ไปถึงคุณได้เพราะ Hosting, Domain, DNS, HTTPS และ CDN ที่เราเพิ่งประกอบกันในบทนี้ ทุกครั้งที่คุณเปิดเว็บไซต์ เครื่องจักรทั้งระบบนี้ทำงานพร้อมกันในเวลาไม่ถึงวินาที

ก่อนสรุป ลองทดสอบว่าคุณจำได้ไหมว่าชิ้นส่วนแต่ละชิ้นแก้ปัญหาอะไร

ขั้นสุดท้าย ลองอธิบายด้วยคำพูดของคุณเอง ระบบไม่ได้อ่านหรือให้คะแนน แต่การเรียบเรียงเองบอกได้ดีที่สุดว่าเราเข้าใจจริงหรือยัง