מודול http server

בניית סביבה מקומית ופשוטה מאוד של שרת ווב בלי מאמץ.

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

הצורך

רוב העבודה של מתכנתי ווב שעובדים בחברות גדולות הוא במוצר עם בילד מסודר. כזה שנסמך למשל על next JS או על create react app ודומיו. קוד שאותו אני מריץ עם npm start והוא כבר מרים שרת ווב פנימי. את הדיפלוי אנו עושים במגוון דרכים אבל כשאני רוצה להריץ מקומית אני כותב npm start וקורה איזשהו ״וודו״ מאחורי הקלעים. הוודו הזה בדרך כלל לא כזה אפל כמו שחושבים – הוא מריץ תהליך בילד מקומי, מרים שרת http מבוסס Node.js, פותח דפדפן (עם או בלי הוט רילואוד) ועושה תהליכים נוספים.

אבל מה קורה אם אני צריך במהירות סביבת הרצה מהירה לאיזה POC או פרויקט קטן או אפילו איזה index.html שיש בו כמה קבצי js מקומיים? במקרה הזה יש את http-server שיכול פשוט לפתור לי את הבעיה בחלקיק שניה.

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

"Cross origin requests are only supported for HTTP." error when loading a local file

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

התקנה והפעלה של http server

ראשית מגדיר בשניות npm init אם לא עשיתי את זה כבר.

מתקין מקומית את http-server:

npm i http-server

ו… זהו. מריץ מהתיקיה הראשית את הפקודה:

node ./node_modules/http-server/bin/http-server

ובאמת תוך שניות יש לי שרת שמריץ תכנים סטטיים.

Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://192.168.2.175:8080
Hit CTRL-C to stop the server

הכי טוב: יש שם Directory Listing פתוח. אסון בשרתי פרודקשן, חלום בשרתי פיתוח. אם אין index.html בתיקיה, אני יכול לנווט לי בששון ובשמחה ברחבי הפרויקט שלי.

Directory Listing example - רשימה של קבצים ותיקיות.

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

לוג פשוט וקל לקריאה מהטרמינל

באמת יופי של דבר וגם קל מאוד להרים שם סביבת SSL אם יש לכם את התעודה המתאימה. אם לא הכרתם – מאוד כדאי להכיר.

פוסטים נוספים שכדאי לקרוא

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

פתרונות ומאמרים על פיתוח אינטרנט

עבודה עם GPT למתכנתים

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

גלילה לראש העמוד