วิธีแชร์ localhost ของคุณ

ก่อนเริ่ม

เครื่องที่คุณจะแชร์ต้องมีสองอย่างนี้ก่อน:

• ติดตั้ง Node.js เวอร์ชัน 18 ขึ้นไป เช็กด้วยคำสั่ง: node --version
• โปรเจกต์ของคุณรันอยู่แล้วในเครื่อง คือเปิด http://localhost:3000 (หรือพอร์ตที่คุณใช้) ในเบราว์เซอร์บนเครื่องนั้นแล้วเห็นเว็บ

ต้องพิมพ์คำสั่งพวกนี้ที่ไหน?

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

Windows: กดปุ่ม Start พิมพ์ว่า "PowerShell" แล้วเปิดขึ้นมา / macOS: กด Cmd+Space พิมพ์ว่า "Terminal" แล้วเปิด / Linux คุณรู้อยู่แล้ว

ถ้าโปรแกรมเขียนโค้ดของคุณมีเทอร์มินัลในตัว (VS Code กด Ctrl+` หรือเมนู View → Terminal) ใช้อันนั้นสะดวกที่สุด เพราะมันเปิดอยู่ในโฟลเดอร์โปรเจกต์ให้เลย

ขั้นที่ 1 — ล็อกอินจากเครื่องนั้น

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

npx busymote login

ขั้นที่ 2 — แชร์พอร์ต

เปิดโปรเจกต์ตามปกติ (เช่น npm run dev) แล้วดูว่ามันบอกพอร์ตอะไร ปกติ Next.js จะเป็น 3000 ส่วน Vite เป็น 5173 จากนั้นเปิดเทอร์มินัลอีกหน้าต่าง แล้วชี้ Busymote ไปที่พอร์ตนั้น:

• ถ้าพอร์ตคุณไม่ใช่ 3000 ให้เปลี่ยนเลขตามจริง
• ปล่อยคำสั่งนี้รันค้างไว้ เพราะมันคือตัว tunnel ปิดเมื่อไหร่ลิงก์จะใช้ไม่ได้จนกว่าจะรันใหม่

npx busymote 3000

คุณจะได้อะไร

ลิงก์หน้าตาแบบ https://beam.busymote.xyz จะขึ้นทั้งในเทอร์มินัลและในหน้า dashboard ลิงก์นี้เป็นของพอร์ตนั้นและไม่เปลี่ยน ปิดเครื่อง เปิดใหม่ รันใหม่ ลิงก์เดิมก็ยังใช้ได้ ส่งให้ลูกค้าครั้งเดียวจบ

กดที่ลิงก์ในหน้า dashboard เพื่อเปลี่ยนชื่อได้ จะตั้งเป็น beam, acme-demo หรืออะไรก็ได้ที่ยังไม่มีคนใช้

จะโชว์ให้ลูกค้าดู? build ก่อน

dev server (npm run dev หรือ vite) เหมาะกับการเปิดดูงานตัวเองเร็ว ๆ แต่ถ้าจะโชว์ให้ลูกค้า หรือปล่อยลิงก์ทิ้งไว้สักพัก ให้ build โปรเจกต์เป็นโปรดักชันแล้วแชร์อันนั้นแทน เพราะเร็วกว่าและนิ่งกว่ามากเมื่อเปิดผ่านลิงก์สาธารณะ

ตอน dev เฟรมเวิร์กจะเปิดการเชื่อมต่อ hot-reload ค้างไว้เพื่อส่งการแก้โค้ดเข้าเบราว์เซอร์ พอผ่าน tunnel การเชื่อมต่อนี้จะไม่นิ่ง เวลามันหลุด หน้าเว็บอาจ reload เองหรือหยุดอัปเดต ทำให้ดูเหมือนหน้ารีเซ็ตหรือข้อมูลที่เพิ่งพิมพ์หายไป ส่วนโปรดักชัน build ไม่มีปัญหานี้

หรือให้ Busymote ทำให้จบในคำสั่งเดียวด้วย --run มันจะ build แล้ว start โปรเจกต์ให้ รอจนพอร์ตขึ้น แล้วค่อยแชร์ — npx busymote 3000 --run "npm run build && npm start" กด Ctrl-C ทีเดียวหยุดทั้ง tunnel และคำสั่งที่รัน

• Next.js: รัน npm run build แล้ว npm start จากนั้นแชร์พอร์ตที่มันบอก
• Vite: รัน npm run build แล้ว npm run preview จากนั้นแชร์พอร์ตนั้น
• ชี้ Busymote ไปที่พอร์ตของแอปที่ build แล้ว ไม่ใช่พอร์ต dev

ล็อกลิงก์ด้วยรหัสผ่าน

ปกติแล้วใครที่มีลิงก์ก็เปิด localhost ของคุณได้เลย ไม่ต้องล็อกอิน ไม่มีอะไรกั้น ในหน้า dashboard แต่ละ tunnel ที่เปิดอยู่จะมีปุ่ม "ล็อกลิงก์นี้ด้วยรหัสผ่าน" ตั้งรหัสไว้ แล้วคนที่เปิดลิงก์ต้องพิมพ์รหัสก่อนถึงจะเห็นหน้าเว็บ

อยากเปลี่ยนรหัสทีหลังก็กด "เปลี่ยนรหัสผ่าน" ที่ tunnel นั้น อยากเปิดลิงก์ให้ใครก็เข้าได้อีกครั้งก็กด "เอาออก" รหัสผ่านถูกเก็บแบบเข้ารหัส (hash) ไม่ได้เก็บเป็นตัวอักษรตรง ๆ เราเองก็อ่านไม่ได้

ทำไมการตั้งรหัสผ่านถึงสำคัญ

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

• ลิงก์รั่วได้เสมอ มันถูกก๊อปไปวางในแชท ถูกส่งต่อ ถูกแคปหน้าจอ ถ้ามีรหัสผ่าน ต่อให้ลิงก์หลุดออกไปก็ยังเปิดไม่ได้ถ้าไม่มีรหัส
• บอตและ search engine ไล่เก็บ URL อยู่ตลอด ลิงก์สาธารณะอาจถูกจัดทำดัชนีหรือถูกบอตเข้ามาลองภายในไม่กี่นาที รหัสผ่านกันพวกนี้ไว้ที่หน้าประตู
• คุณเป็นคนคุมว่าใครดูได้ การแชร์งานที่ยังไม่เสร็จให้ลูกค้าคนเดียว ไม่ควรแปลว่าคนทั้งอินเทอร์เน็ตนั่งดูคุณทำงานได้
• ไม่มีต้นทุนอะไรเลย รหัสคำเดียว ตั้งครั้งเดียว ลิงก์ก็ยังเป็นที่อยู่เดิม ตั้งไว้ตั้งแต่ตอนที่ tunnel เริ่มเป็นอะไรที่มากกว่าการเทสต์เล่น ๆ

สั่งงานจากมือถือ

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

เลิกใช้แล้วทำยังไง

กด Ctrl+C ในเทอร์มินัล หรือกดปุ่มหยุดในหน้า dashboard ลิงก์ยังถูกจองไว้ให้คุณ และจะกลับมาใช้ได้ทันทีที่แชร์พอร์ตนั้นอีกครั้ง

ถ้ามีอะไรผิดพลาด

• "Not logged in. Run: busymote login" — คุณข้ามขั้นที่ 1 หรือกำลังอยู่คนละเครื่องกับที่เคยล็อกอินไว้
• "Session expired" — รัน npx busymote login ใหม่ เซสชันไม่ได้อยู่ตลอดไป
• ลิงก์ขึ้นว่า "Nothing is being shared here right now" — คำสั่ง busymote ไม่ได้รันอยู่บนเครื่องคุณ หรือหลุดการเชื่อมต่อไป เปิดใหม่อีกครั้ง
• ลิงก์เปิดได้แต่หน้าเว็บพังหรือว่างเปล่า — Busymote ส่งต่อสิ่งที่เซิร์ฟเวอร์ในเครื่องคุณตอบมาตรง ๆ ลองเปิด http://localhost:3000 บนเครื่องนั้นดูก่อนว่าใช้ได้จริงไหม
• หน้าเว็บ reload เอง รีเซ็ตซ้ำ ๆ หรือข้อมูลที่พิมพ์หาย — คุณกำลังแชร์ dev server ที่การเชื่อมต่อ hot-reload ไม่นิ่งเมื่อผ่าน tunnel ให้แชร์โปรดักชัน build แทน (ดูหัวข้อ "จะโชว์ให้ลูกค้าดู? build ก่อน")
• cloudflared not found (บน macOS) — ติดตั้งด้วยคำสั่ง: brew install cloudflared
• อย่างอื่น: ใช้ช่องส่ง feedback ในหน้า dashboard ข้อความจะถึงเราพร้อมบัญชีของคุณ เราจะได้ตามดูให้ได้จริง

เรื่องที่ต้องระวัง

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