איך להגיש שרת פיתוח webpack בכתובת VPN

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

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

התחילו מהשקע, לא מקובץ התצורה

קראו למה התהליך הרץ באמת כרוך, באותו הקשר רשת שהפעיל אותו, כי מכולה או מרחב שמות יכולים להחזיק שקע שהמעטפת של המארח אינה רואה. עמודת ההאזנה עונה על השאלה הראשונה: נתיב מקומי בלבד, ממשק מסוים אחד או כל הממשקים.

ss -ltn '( sport = :8080 )'
ss -ltnp | grep node

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

התאימו את עצמכם לתצפית הזו לפני שאתם נוגעים בנתיבים או בכללי חומת אש. אם התהליך מאזין בכתובת הלא נכונה, שום ניתוב מדיניות לא יביא את הלקוח אליה.

בחרו את כתובת הכריכה לפי מי שצריך להגיע אליה

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

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

אחר כך הגדירו את הכתובת בצורה שהמפעיל שלכם באמת קורא. קובץ תצורה וסקריפט שבונה את השרת באופן תוכנתי אינם צורכים את אותן אפשרויות:

devServer: {
  host: "10.77.0.20",
  port: 8080,
  allowedHosts: ["dev.corp.example"],
}

הכתובת בקטע הזה להמחשה והיא מייצגת את כתובת ה-VPN שהמארח מחזיק בה. אם הפרויקט בונה את השרת עם new WebpackDevServer(options, compiler) העבירו את האפשרויות דרך ארגומנט הבנאי במקום זאת, כי המאפיין הנפרד devServer בתצורת webpack אינו נבדק בנתיב הזה. ההבדל הזה בין קובץ התצורה ל-Node API תופס אנשים שמעתיקים קטע לפרויקט שלעולם אינו קורא אותו. תיעוד dev-server מפריד בין שתי דרכי ההפעלה והוא ההפניה שמולה יש לבדוק את הגרסה שבשימוש.

התאימו את בדיקת שם המארח לשמות שאתם מאשרים

בדיקת שם המארח קיימת כדי למנוע מדף שמוגש משם שנשלט בידי תוקף לדבר עם שרת הפיתוח שלכם דרך הדפדפן. השבתתה עם allowedHosts: "all" מסירה את ההגנה הזו, והנוחות לעיתים רחוקות שווה את זה במכונה שיכולה להגיע לשירותים פנימיים. הבדיקה זולה לסיפוק נכון ברגע שאתם יודעים אילו שמות הדפדפן ישלח.

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

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

אמתו את הדף ואת שקע הטעינה החיה יחד

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

curl -sS -o /dev/null -w "%{http_code} %{remote_ip}\n" http://dev.corp.example:8080/
curl -sS -i http://10.77.0.20:8080/ | head -n 5

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

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