0

เขียนโค้ดจากที่ไหนก็ได้ ด้วย VS Code Remote Tunnels (ไม่ต้องง้อ SSH)

เคยไหม? ที่อยากเขียนโค้ดแต่ไฟล์อยู่อีกเครื่อง

สมมติว่าเรากำลังนั่งทำงานที่คาเฟ่ แล้วนึกขึ้นได้ว่าต้องแก้โค้ดด่วน แต่ source code ทั้งหมดอยู่ที่คอมตั้งโต๊ะที่บ้าน หรือบน server ที่ออฟฟิศ (ยังไม่ได้เอาขึ้น Git) หรือ ในเคสที่ว่า env ต่าง ๆ มันต้องใช้ resource เยอะมาก ๆ เกินกว่า Laptop เราจะไหว จนไปถึง เรื่อง Security ที่บริษัทที่ให้ใช้คอมที่โต๊ะทำเป็นหลักเท่านั้น ปกติเจออะไรแบบนี้เราจะทำยังไงกัน ?

วิธีเดิม ๆ ที่หลายคนคงคุ้นเคย คือการ setup SSH แล้ว remote เข้าไป แต่ปัญหาคือ ต้องจำ IP address, port, และ SSH key ต่าง ๆ นาๆ, บางที firewall หรือ network ของที่ที่เราอยู่ไม่อนุญาตให้เชื่อมต่อ หรือ ต้อง config SSH ใหม่ทุกครั้งที่เปลี่ยนเครื่อง ไม่ก็ถ้าเครื่องที่บ้านอยู่หลัง router ต้องไป setup port forwarding อีก

ผมเองก็เคยปวดหัวกับเรื่องนี้มานานจนกระทั่งได้รู้จักกับ VS Code Remote Tunnels ซึ่งมันเปลี่ยนวิธีการทำงานของผมไปเลย 🔥

Remote Tunnels คืออะไร? ทำไมถึงต่างจาก SSH

ลองนึกภาพว่า Remote Tunnels เหมือนกับการสร้าง “ประตูลับ” ที่เชื่อมระหว่างคอมของเรากับเครื่องที่ต้องการเข้าถึง โดยที่

ไม่ต้องจำ IP address เพราะเจ้าระบบจะจดจำเครื่องของเราผ่าน GitHub หรือ Microsoft account
ไม่ต้อง setup firewall เพราะเครื่องของเราเป็นฝ่ายเชื่อมต่อออกไป (outbound) ไม่ใช่รอรับการเชื่อมต่อเข้ามา (inbound)
ทำงานได้ทุกที่ แม้แต่จาก iPad หรือ Chromebook ก็เข้าถึงได้ผ่าน browser
ปลอดภัย มีการเข้ารหัสแบบ end-to-end ด้วย SSH over the tunnel

สิ่งที่สำคัญที่สุดคือ เราก็จะได้ประสบการณ์การเขียนโค้ดแบบเต็มรูปแบบ รวมถึง IntelliSense, debugging และ extensions ทั้งหมด แม้ว่าโค้ดจะอยู่อีกซีกโลกก็ตาม

เริ่มต้นใช้งานอย่างไร? เจ้า VS Code มี 2 วิธีให้เราเลือก

Microsoft ออกแบบให้ใช้งานง่าย มีวิธีการหลัก 2 แบบ ขึ้นอยู่กับสถานการณ์ของเรา

วิธีที่ 1: ใช้ผ่าน VS Code Desktop UI (แนะนำสำหรับมือใหม่)

วิธีนี้เหมาะถ้าเรามี VS Code ติดตั้งอยู่แล้วบนเครื่องที่ต้องการให้คนอื่นเข้าถึง (เช่น คอมตั้งโต๊ะที่บ้าน)

ขั้นตอนที่ 1: เปิด VS Code บนเครื่องที่ต้องการเปิด tunnel

ขั้นตอนที่ 2: คลิกที่ไอคอน Account (มุมล่างซ้าย) แล้วเลือก “Turn on Remote Tunnel Access”

หรือถ้าชอบใช้ Command Palette ก็กด F1 แล้วพิมพ์: Remote Tunnels: Turn on Remote Tunnel Access

ขั้นตอนที่ 3: ระบบจะให้เรา login ด้วย GitHub account เมื่อ login สำเร็จ tunnel ก็จะเริ่มทำงาน

และเราจะได้ link แบบนี้

https://vscode.dev/tunnel/<machine_name>/<folder_name>
Plaintext

ขั้นตอนที่ 4: เก็บ link นี้ไว้ หรือส่งให้ตัวเอง จากนั้นเราสามารถเปิด link นี้จากเครื่องไหนก็ได้ ไม่ว่าจะเป็น laptop, iPad หรือแม้แต่เครื่องที่ร้านอินเทอร์เน็ต (ยังมีอยู่ไหมสมัยนี้ 55)

ข้อควรระวังนิดนึงคือ เครื่องที่เปิด tunnel จะต้องเปิด VS Code ค้างไว้ ถ้าปิด VS Code ก็จะไม่สามารถเชื่อมต่อได้ (แต่มีวิธีแก้ซึ่งผมจะบอกในตอนท้ายคร้าบ)

วิธีที่ 2: ใช้ผ่าน Command Line (สำหรับ advanced users หรือ server ที่ไม่มี GUI)

วิธีนี้เหมาะถ้าเราต้องการติดตั้งบน server, Raspberry Pi หรือ พวกเครื่องที่ไม่มี desktop environment

ขั้นตอนที่ 1: ติดตั้ง VS Code CLI

ถ้าเรามี VS Code Desktop อยู่แล้ว คำสั่ง code ก็พร้อมใช้งานทันที แต่ถ้าเป็น server ที่ไม่มี VS Code เราสามารถดาวน์โหลดแค่ CLI มาติดตั้งได้

curl -Lk 'https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64' --output vscode_cli.tar.gz
tar -xf vscode_cli.tar.gz
PowerShell

ขั้นตอนที่ 2: สร้าง tunnel ด้วยคำสั่งเดียว

code tunnel
PowerShell

หรือถ้าติดตั้งแบบ standalone ให้ใช้

./code tunnel
Plaintext

ขั้นตอนที่ 3: ครั้งแรกที่รันคำสั่งนี้ ระบบจะให้เรายอมรับ license terms และ login ด้วย GitHub หรือ Microsoft account

ขั้นตอนที่ 4: เมื่อทำสำเร็จ เราจะได้ URL สำหรับเชื่อมต่อแบบนี้

https://vscode.dev/tunnel/<machine_name>/<folder_name>
Plaintext

ขั้นตอนที่ 5: เปิด URL นี้จากเครื่องไหนก็ได้ที่มี browser ก็เข้าใช้งานได้เลย!

ทำให้ tunnel ทำงานต่อเนื่องตลอดเวลา (ไม่ต้องเปิด VS Code ค้างไว้)

หนึ่งในคำถามที่ผมเจอบ่อยคือ “แล้วถ้าผมปิดคอม หรือปิด VS Code ล่ะ?” ซึ่ง Microsoft ก็มีวิธีแก้ให้:

วิธีที่ 1: ติดตั้งเป็น Service (แนะนำ)

คำสั่งนี้จะทำให้ tunnel รันเป็น background service และเปิดทำงานอัตโนมัติตอน boot:

code tunnel service install
Plaintext

ถ้าอยากถอนการติดตั้ง:

code tunnel service uninstall
Plaintext

วิธีที่ 2: ใช้ –no-sleep flag

ป้องกันไม่ให้เครื่องเข้าโหมด sleep:

code tunnel --no-sleep
Plaintext

Tips และ Tricks ที่ควรรู้ในเรื่องนี้

1. เชื่อมต่อกับ tunnel ที่มีอยู่แล้ว

ถ้าเราเคยสร้าง tunnel ไว้แล้ว และต้องการเชื่อมต่อจาก VS Code Desktop อีกเครื่อง ไม่ต้องเปิด browser ให้

  1. ติดตั้ง Remote – Tunnels extension
  2. กด F1 แล้วเลือก Remote Tunnels: Connect to Tunnel
  3. เลือกเครื่องที่ต้องการเชื่อมต่อจาก list

ตรงนี้เรายังสามารถดูรายชื่อเครื่องทั้งหมดได้จาก Remote Explorer ด้วยคร้าบ

2. การใช้ร่วมกับพวก Dev Containers

ความเจ๋งอีกอย่างคือเราสามารถใช้ Remote Tunnels ร่วมกับ Dev Containers ได้ หมายความว่าเราก็สามารถ remote เข้าไปที่เครื่องหนึ่ง แล้วใช้ Docker container บนเครื่องนั้นได้เลย แม้ว่าเครื่องที่เราใช้งานจะไม่มี Docker ติดตั้งก็ตาม (ดีจัดๆ) วิธีการง่าย ๆ ทำตามนี้เลย

  1. ติดตั้ง Docker บนเครื่อง remote
  2. เชื่อมต่อผ่าน Remote Tunnels
  3. กด F1 แล้วเลือก Dev Containers: Reopen in Container

3. ลบหรือยกเลิก tunnel ที่สร้างขึ้น

ถ้าต้องการหยุด tunnel ที่กำลังรันอยู่ เพราะเหตุผลใด ๆ ก็แล้วแต่ก็สามารถทำได้โดย

  • ถ้าใช้ CLI: ให้เรากด Ctrl + C
  • ถ้าใช้ UI: ก็ให้เราทำการรันคำสั่ง Remote Tunnels: Turn off Remote Tunnel Access

ถ้าต้องการลบเครื่องออกจากระบบ tunnel

code tunnel unregister
Plaintext

หรือคลิกขวาที่เครื่องใน Remote Explorer แล้วเลือก unregister ก็ได้เช่นกันครับ

เรื่องความปลอดภัยที่ควรรู้

หลายคนอาจกังวลเรื่องความปลอดภัย ซึ่งผมขอให้มั่นใจว่า Microsoft ออกแบบระบบนี้มาอย่างดี ไม่ว่าจะเป็นพวก

การยืนยันตัวตนสองด้านที่ใช้ ทั้งฝั่งที่สร้าง tunnel และฝ่ายที่เชื่อมต่อต้อง login ด้วย account เดียวกัน
End-to-End Encryption ตัวข้อมูลถูกเข้ารหัสด้วย SSH บน tunnel ใช้ AES 256 in CTR mode
ทำ Outbound Only ไม่ต้องเปิด port ใด ๆ บนเครื่องของเรา ลดความเสี่ยงจาก firewall
และเป็น Open Source ตัวโค้ดที่ใช้เข้ารหัสเป็น open source สามารถตรวจสอบได้

ข้อจำกัดที่ควรรู้

แม้ว่า Remote Tunnels จะดีมาก แต่ก็มีข้อจำกัดบางอย่างที่เราควรทราบเอาไว้ก่อนเช่น

การจำกัดจำนวน tunnels เพราะ ปัจจุบันเราสามารถมี tunnel ได้สูงสุด 10 เครื่องพร้อมกัน (ถ้าเกิน ระบบจะลบ tunnel ที่ไม่ได้ใช้งานอัตโนมัติ)
ต่อมาจำกัด bandwidth มีข้อจำกัดด้าน bandwidth เพื่อป้องกันการใช้งานในทางที่ผิด แต่คนทั่วไปน่าจะไม่เจอปัญหานี้
ใช้งานได้คนละครั้ง ตัวนี้จะไม่สามารถให้หลายคนเข้าถึง tunnel เดียวกันพร้อมกันได้ (one user at a time)

อ่านมาถึงตรงนี้แล้วอยากใช้จังเลยยย แต่เดี๋ยวก่อน

จากประสบการณ์ส่วนตัว ผมคิดว่า VS Code Remote Tunnels เป็นหนึ่งใน game-changer สำหรับ developer ที่ต้องทำงานหลายที่ หรือต้องการ access code จากหลายอุปกรณ์ แต่ถ้าถามว่าต้องใช้ทุกงาน หรือ กระโดดไปใช้เลยไหม ควรใช้เลยไหม ก็ต้องตอบว่า

เราควรใช้ถ้าหาก

  • ต้องการ access code จากหลายเครื่อง โดยไม่อยากจัดการ SSH
  • ทำงาน remote และต้องการประสบการณ์เหมือนทำงานบนเครื่องจริง
  • มี server หรือ powerful desktop ที่บ้าน อัพคอมมาเต็มที่ แต่อยากใช้ Spec.แรง ๆ นั้นจาก laptop เบา ๆ
  • อยากแก้โค้ดด่วน ๆ จาก iPad หรืออุปกรณ์อื่น งานไฟลุกต้องมา

อาจจะยังไม่เหมาะถ้าหากเป็นเคสประมาณนี้

  • ต้องการให้หลายคนทำงานร่วมกันบน environment เดียวกัน (แนะนำใช้ Live Share แทน)
  • Internet connection ไม่เสถียร (เพราะทุกอย่างทำงานผ่าน cloud)
  • ต้องการ full control ทุกอย่าง และไม่สะดวกใจให้ Microsoft เป็นคนกลาง

เริ่มต้นลองใช้กันได้เลย แอดลองจับเวลาแล้วแค่ 1 นาทีก็พร้อมใช้แล้วว

ถ้าเราสนใจ ผมสรุปมาให้เหลือแค่ขั้นตอนง่าย ๆ ตามนี้ได้เลยครับ

  1. เปิด VS Code บนเครื่องที่ต้องการ remote เข้า
  2. คลิก Account menu แล้วเลือก “Turn on Remote Tunnel Access”
  3. Login ด้วย GitHub
  4. เก็บ คัดลอก URL ที่ได้
  5. ลองเปิด URL จากเครื่องอื่น หรือ browser บนมือถือ

ใช้เวลาไม่เกิน 5 นาที แต่จะเปลี่ยนวิธีการทำงานของเราไปเลยคร้าบ ❤️

0

แนะนำสำหรับคุณ

คัดลอกลิงก์สำเร็จ