הפניית פורטים ב-VSCode: לא צריך יותר את Ngrok

משתמשי VSCode יכולים לוותר על Ngrok בשביל להפנות פורטים ברשת המקומית לכתובות ציבוריות. וזה מובנה ישירות ל-IDE

פיצ'ר חדש ב-VSCode מאפשר לבצע Port forwarding הפניית פורטים - מהרשת המקומית לכתובות חיצוניות שחשופות באופן ציבורי באינטרנט.

דוגמא לשימוש, למי שלא מכיר: מתבצעת הרצה מקומית גרסת פיתוח של פרויקט, שחושפת שרת HTTP בפורט מסוים ברשת המקומית - נאמר http://127.0.0.1:3000 או http://localhost:3000. כדי שמכונה שלא מחוברת לרשת המקומית תוכל לגשת לפרויקט, יש צורך להשתמש בשירות (או בכלי שיכול לרוץ בשרת וכדו') שיצור כתובת ציבורית - לדוגמא https://unique-instance-name.relay.servicesubdomain.service.com שבקשות שמגיעות אליה אוטומטית יעברו במנגנון דומה ל-reverse-proxy ישירות לפורט הספציפי שהוגדר ברשת המקומית.

עד היום כדי לבצע הפניית פורטים בצורה פשוטה ובחינם, האפשרות ברירת המחדל היתה להשתמש ב-Ngrok - שבתוכנית החינמית מאפשר לקבל כתובת ציבורית אחת בכל פעם, ולהפעיל 'סוכן' הפניה אחד בלבד בכל רגע נתון.

באוגוסט 2023 הושק VSCode בגרסה 1.82 עם Built-in port forwarding - הפניית פורטים מובנית (תיעוד טכני). הכלי מתבסס על מנגנון ה-Tunnels של VSCode, ומאפשר להפנות (כפי שניתן לראות בתיעוד של Tunnels לגבי מגבלות שימוש) עד 5 כתובות מקומיות.

עוד תכונה חשובה בכלי, היא האפשרות של הגדרת הפניה כפרטית/ציבורית. הפניה שהוגדרה כפרטית תדרוש הזדהות וחיבור לאותנטיקציה מול חשבון הגיטהאב/מייקרוסופט של המשתמש יוצר ההפניה, בעוד שהפניה ציבורית חשופה לכל פונה ללא אותנטיקציה, למעט דף אישור אזהרה ואישור תנאים במקרה שניגשים לכתובת החיצונית באמצעות דפדפן.

כדי להשתמש בכלי, צריך פשוט לפתוח את פאנל Ports באיזור הפאנלים (למטה במרכז בדרך כלל), ולבחור ב-Forward a Port:

יש להקליד את הפורט המקומי, או הכתובת הרצויה להפניה:

לחיצה על אנטר תבצע את ההפניה (יכול לקחת כמה שניות), ניתן יהיה לראות את הכתובת החיצונית שהתקבלה, עם כפתורים להעתקה או ניווט לכתובת, ואפשרות לשינוי ההפניה מפרטית (Private) לציבורית (Public):

השירות הוא בחינם, וכשזה מגיע ככלי מובנה ב-VSCode - זה יכול להיות רק יותר טוב.