ทำไมมือถือถึงมองไม่เห็นเว็บไซต์ในเครื่องคอมพิวเตอร์ของเรา
เวลาเราเขียนโปรแกรมด้วย Laravel (เฟรมเวิร์กภาษา PHP สำหรับสร้างเว็บ) เรามักจะใช้เครื่องมืออย่าง Herd (โปรแกรมช่วยรันเว็บในเครื่อง) เพื่อสร้างเว็บไซต์จำลองชื่อว่า myapp.test ขึ้นมาใช้งาน ในคอมพิวเตอร์ของเราทุกอย่างจะดูปกติมาก เพราะเราตั้งค่าให้เครื่องเรารู้จักชื่อนี้ แต่พอเราหยิบมือถือมาเปิดดูเว็บเดียวกัน กลับกลายเป็นว่ามือถือมองไม่เห็นอะไรเลย หรือขึ้นข้อความว่าหาเว็บไม่เจอ
สาเหตุหลักคือ DNS (ระบบที่แปลงชื่อเว็บไซต์ให้เป็นเลขไอพีของเซิร์ฟเวอร์) ในมือถือไม่รู้จักชื่อ .test เพราะชื่อนี้ถูกสร้างขึ้นมาให้ใช้ได้เฉพาะในเครื่องคอมพิวเตอร์ของเราเท่านั้น นอกจากนี้ตัวโปรแกรม Herd ยังตั้งค่าให้เว็บทำงานอยู่แค่ภายในเครื่อง หรือที่เรียกว่า Loopback (การเชื่อมต่อที่สื่อสารกับตัวเองภายในเครื่องเดียว) ทำให้ไม่มีใครจากภายนอกเข้ามาดูได้เลย
อีกปัญหาหนึ่งที่น่าปวดหัวคือเรื่องของ TLS (เทคโนโลยีการเข้ารหัสข้อมูลเพื่อความปลอดภัย) ซึ่งเว็บ .test ของเรามักจะใช้ใบรับรองความปลอดภัยที่ออกโดยตัวโปรแกรมเอง มือถือจึงมองว่าเว็บนี้ไม่น่าเชื่อถือและบล็อกการเข้าถึงทันที การจะแก้ปัญหานี้ให้ได้ผลดีที่สุด เราจึงต้องหาวิธีที่ทำให้มือถือมองเห็นเว็บเราเหมือนเป็นเว็บที่อยู่บนอินเทอร์เน็ตจริงๆ โดยไม่ต้องไปตั้งค่าระบบเครือข่ายให้ยุ่งยาก
รู้จักกับ Tailscale ทางลัดในการเชื่อมต่ออุปกรณ์ให้เป็นเครือข่ายเดียวกัน
ถ้าเราไม่อยากปวดหัวกับการตั้งค่า LAN (เครือข่ายภายในบ้านหรือออฟฟิศ) หรือการเปิดพอร์ตให้คนอื่นเข้าถึงเว็บเราได้ผ่านเน็ตสาธารณะ เราควรใช้ Tailscale (ระบบเครือข่ายเสมือนส่วนตัวที่เชื่อมต่ออุปกรณ์เข้าด้วยกันแบบปลอดภัย) ซึ่งเครื่องมือนี้จะสร้าง Mesh VPN (เครือข่ายที่อุปกรณ์ทุกตัวคุยกันเองได้โดยตรง) ทำให้มือถือกับคอมพิวเตอร์กลายเป็นเสมือนว่าวางอยู่บนโต๊ะเดียวกัน
ข้อดีของ Tailscale คือมันมีความปลอดภัยสูงมากเพราะทุกอย่างถูกเข้ารหัสไว้ และที่สำคัญที่สุดคือมันมีฟีเจอร์ที่ช่วยจัดการเรื่องใบรับรองความปลอดภัยให้เราอัตโนมัติ ทำให้เวลาเราเปิดเว็บจากมือถือผ่านเครือข่ายนี้ มือถือจะไม่บ่นเรื่องความปลอดภัยอีกต่อไป แถมเรายังได้ชื่อเรียกเว็บที่เสถียรและใช้งานได้ตลอดเวลา ไม่ต้องคอยเปลี่ยนเลขไอพีทุกครั้งที่เชื่อมต่อเน็ตใหม่
ก่อนจะเริ่มใช้งาน ให้มั่นใจว่าเราติดตั้งโปรแกรมนี้ทั้งบนคอมพิวเตอร์และมือถือเรียบร้อยแล้ว และล็อกอินด้วยบัญชีเดียวกัน วิธีเช็คว่าทุกอย่างพร้อมคือการใช้คำสั่งในคอมพิวเตอร์เพื่อดูว่ามือถือของเราโผล่ขึ้นมาในรายการอุปกรณ์หรือยัง ถ้าเห็นชื่อมือถือขึ้นสถานะ online (ออนไลน์หรือใช้งานได้) แสดงว่าเราพร้อมที่จะก้าวไปสู่ขั้นตอนต่อไปแล้ว
# ตรวจสอบสถานะอุปกรณ์ที่อยู่ในเครือข่ายเดียวกัน
tailscale status
คำสั่ง tailscale status จะแสดงรายการอุปกรณ์ทั้งหมดที่ล็อกอินบัญชีเดียวกัน ถ้าทุกอย่างปกติ เราจะเห็นชื่อเครื่อง Mac ของเราและชื่อมือถือ Android หรือ iOS ของเราแสดงขึ้นมาพร้อมเลขไอพีขึ้นต้นด้วย 100. ซึ่งเป็นเลขเฉพาะของเครือข่ายนี้
เปิดประตูให้ Herd สื่อสารผ่าน Tailscale
เมื่อเราเชื่อมต่อคอมพิวเตอร์กับมือถือเข้าด้วยกันแล้ว ขั้นตอนถัดมาคือการบอกให้ Herd ยอมรับการเข้าถึงจากภายนอกผ่านทาง Tailscale เราจะใช้คำสั่ง tailscale serve เพื่อสร้างทางเชื่อมที่ปลอดภัย โดยให้มันส่งคำขอที่เข้ามาจากมือถือไปที่เว็บไซต์ myapp.test ของเราในเครื่อง
จุดสำคัญคือเราต้องใช้คำสั่ง https+insecure เพราะตัว Herd เองนั้นใช้ใบรับรองความปลอดภัยแบบภายในเครื่อง ซึ่ง Tailscale จะเป็นตัวกลางช่วยจัดการแปลงให้กลายเป็นใบรับรองที่น่าเชื่อถือสำหรับมือถือเราอีกทีหนึ่ง ขั้นตอนนี้เหมือนเราสร้างสะพานเชื่อมที่ปลอดภัยมาก โดยที่ตัวเราเองก็ยังทำงานบนเครื่องได้ตามปกติโดยไม่ต้องกังวลเรื่องความปลอดภัย
หลังจากรันคำสั่งนี้แล้ว ให้ลองใช้คำสั่ง tailscale cert เพื่อเป็นการอุ่นเครื่องให้ระบบออกใบรับรองความปลอดภัยให้เรียบร้อยก่อนใช้งานจริง ถ้าทุกอย่างราบรื่น เราจะสามารถเข้าถึงเว็บของเราผ่านชื่อที่ Tailscale กำหนดให้ได้เลย โดยไม่ต้องไปตั้งค่าอะไรในมือถือเพิ่มให้ยุ่งยาก
# สั่งให้ Tailscale เชื่อมต่อเว็บของเราออกสู่เครือข่ายส่วนตัว
tailscale serve --bg "https+insecure://myapp.test"
# อุ่นเครื่องใบรับรองความปลอดภัย
tailscale cert my-mac.tailnet-name.ts.net
คำสั่งแรกเป็นการสั่งให้ระบบรันเบื้องหลัง (--bg) เพื่อให้เว็บเราออนไลน์ตลอดเวลา ส่วนคำสั่งที่สองเป็นการเตรียมใบรับรองความปลอดภัยให้พร้อมใช้งาน ผลลัพธ์ที่ควรเห็นคือข้อความยืนยันว่าเซิร์ฟเวอร์เริ่มทำงานแล้ว และเราจะสามารถใช้ชื่อเว็บ https://my-mac.tailnet-name.ts.net ในการเข้าถึงจากมือถือได้ทันที
ทำไมบางครั้งถึงเจอ 404 ทั้งที่เว็บรันอยู่
หลายคนมักจะเจอปัญหาว่าพอเข้าเว็บผ่านมือถือแล้วเจอหน้า 404 Not Found (ข้อผิดพลาดที่ระบุว่าหาหน้าเว็บไม่เจอ) ทั้งที่ในคอมพิวเตอร์เข้าได้ปกติ ปัญหานี้ไม่ได้เกิดจากอินเทอร์เน็ตหลุด แต่มันเกิดจากสิ่งที่เรียกว่า Host Header (ข้อมูลส่วนหัวที่บอกว่าเรากำลังเรียกเว็บชื่ออะไร) ซึ่งตัว Tailscale จะส่งชื่อโดเมนของตัวมันเองไปแทนที่จะเป็น myapp.test
เมื่อคำขอไปถึง Herd หรือ Nginx (โปรแกรมจัดการการรับส่งข้อมูลหน้าเว็บ) มันจะสับสนเพราะมันไม่รู้จักโดเมนที่ส่งมา มันจึงหาทางไปต่อไม่ถูกและตอบกลับมาเป็น 404 ทันที วิธีแก้คือเราต้องทำให้คำขอที่ส่งมาจากมือถือมีข้อมูลชื่อโดเมน myapp.test แนบไปด้วย เพื่อให้ระบบเข้าใจว่าเรากำลังเรียกเว็บนี้จริงๆ
การเข้าใจเรื่องนี้เป็นสิ่งที่สำคัญมากสำหรับโปรแกรมเมอร์ เพราะมันสอนให้เรารู้ว่าการทำงานของระบบเครือข่ายนั้นละเอียดอ่อนแค่ไหน การทดสอบด้วยการลองเปลี่ยน Header (ส่วนหัวของคำขอ) ดูด้วยตัวเองจะช่วยให้เราเห็นภาพชัดเจนว่าทำไมระบบถึงปฏิเสธคำขอของเรา และนี่คือบทเรียนที่ดีที่สุดในการแก้บั๊กเกี่ยวกับการเชื่อมต่อ
ขั้นตอนการแก้ไขปัญหา 404 ให้ตรงจุด
เพื่อให้ Herd ยอมรับคำขอของเรา เราต้องตั้งค่าให้ระบบส่งต่อ Host header ให้ถูกต้อง การทำแบบนี้จะทำให้ Nginx เชื่อว่าคำขอนั้นมาจากโดเมน myapp.test โดยตรง ซึ่งจะช่วยให้ Laravel ทำงานต่อได้อย่างถูกต้องและไม่เกิดข้อผิดพลาด 404 อีกต่อไป
ถ้าเราใช้ Ionic หรือแอปมือถืออื่นๆ ในการเรียก API (ช่องทางเชื่อมต่อข้อมูลระหว่างแอปกับเว็บ) เราต้องมั่นใจว่าทุกคำขอที่ส่งออกไปมีการระบุค่านี้ไว้ในส่วนของ Header เสมอ การทำแบบนี้อาจจะดูยุ่งยากในตอนแรก แต่ถ้าเราเขียนโค้ดให้จัดการเรื่องนี้เป็นมาตรฐานตั้งแต่ต้น เราจะประหยัดเวลาแก้ปัญหาไปได้มหาศาล
ลองนึกภาพว่าเรากำลังคุยกับเจ้าหน้าที่รักษาความปลอดภัย ถ้าเราไม่บอกชื่อบริษัทที่ถูกต้อง เขาก็จะไม่อนุญาตให้เราเข้าตึก การตั้งค่า Host header ก็เปรียบเสมือนการยื่นบัตรพนักงานที่ถูกต้องให้เจ้าหน้าที่ดูนั่นเอง เมื่อทำตามขั้นตอนที่ถูกต้องแล้ว ทุกอย่างจะทำงานได้อย่างราบรื่นเหมือนรันอยู่บนเซิร์ฟเวอร์จริง
// ตัวอย่างการส่งคำขอผ่าน Axios (เครื่องมือส่งข้อมูลใน JavaScript)
axios.get('https://my-mac.tailnet-name.ts.net/api/user', {
headers: {
'Host': 'myapp.test' // ระบุชื่อโดเมนให้ถูกต้องเพื่อให้เซิร์ฟเวอร์รู้จัก
}
});
โค้ดชุดนี้แสดงการแนบ Host header เข้าไปในคำขอ ถ้าเราส่งคำขอนี้จากแอปมือถือ Laravel จะได้รับค่าที่ถูกต้องและส่งข้อมูลผู้ใช้งานกลับมาให้เราได้โดยไม่มีข้อผิดพลาด 404 อีก
สรุป: เปลี่ยนมือถือให้กลายเป็นเครื่องมือทดสอบที่ทรงพลัง
การทดสอบแอปบนมือถือด้วย Tailscale ช่วยให้เราเลิกกังวลเรื่องการตั้งค่าเครือข่ายที่ซับซ้อนไปได้เลย เราสามารถพัฒนา Laravel API บนเครื่องตัวเอง และเรียกใช้งานจากมือถือจริงๆ ได้โดยไม่ต้องเปิดเผยเว็บไซต์ของเราสู่สาธารณะ ซึ่งถือเป็นแนวทางที่ปลอดภัยและเป็นมืออาชีพที่สุดสำหรับโปรแกรมเมอร์ทุกคน
จำไว้ว่าหัวใจสำคัญคือการแยกแยะระหว่างการเข้าถึง API และการเข้าถึงตัวแอป หากเราจัดการเรื่อง Host header และการเชื่อมต่อผ่านเครือข่ายส่วนตัวได้อย่างถูกต้อง เราจะพบว่าการทดสอบแอปพลิเคชันนั้นง่ายและรวดเร็วขึ้นมาก การลงทุนเวลาเรียนรู้เรื่องเหล่านี้จะช่วยให้เราทำงานได้เหมือนมืออาชีพตั้งแต่วันแรกที่เริ่มเขียนโปรแกรม
ลองนำวิธีนี้ไปใช้กับโปรเจกต์ของคุณดู แล้วคุณจะพบว่าการเห็นแอปตัวเองทำงานบนมือถือจริงๆ นั้นน่าตื่นเต้นแค่ไหน หากติดปัญหาเรื่องการเชื่อมต่อ ให้ค่อยๆ ตรวจสอบทีละจุดตั้งแต่การตั้งค่า Tailscale ไปจนถึงการส่ง Header ในโค้ด เมื่อทุกอย่างเชื่อมต่อกันได้สำเร็จ คุณจะก้าวข้ามขีดจำกัดเดิมๆ และพัฒนาซอฟต์แวร์ได้เก่งขึ้นอีกขั้นแน่นอน
ที่มา: Testing a Laravel Herd API on a Real Phone with Tailscale — DEV Community: laravel
