אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » ספריות ומודולים » מודול http server

מודול http server

רן בר-זיק ספטמבר 18, 2022 7:07 am 2 תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

הבעיה היא שכשמפתחים המון המון שנים יש הרבה ידע שאיכשהו קיים אצלי ואצל אחרים שאנחנו ממש בטוחים ש״כולם יודעים״. אבל לא, לא כולם יודעים ובכל פעם שאני כותב על משהו שנראה לי טריוויאלי אז אני מקבל לא מעט תגובות של ״וואי, לא ידעתי שיש כזה דבר״ או ״מעולה שכתבת״. אז הנה, דוגמה נוספת למשהו שאולי חלקכם מכירים – אבל מי שלא מכיר יכול מאוד להעזר בזה. והפעם אני רוצה לדבר על מודול אולטרא שימושי בשם 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 אם יש לכם את התעודה המתאימה. אם לא הכרתם – מאוד כדאי להכיר.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
Local environment סקריפטים פיתוח

2 תגובות

  1. אורגד הגב ספטמבר 18, 2022 בשעה 8:59 am

    יותר קצר npx http-server במקום לציין את הנתיב בתוך node_modules.

  2. שי הגב ספטמבר 19, 2022 בשעה 4:00 pm

    אופציה (עדיפה לדעתי) היא לעבוד עם המודול http server של פייתון (https://docs.python.org/3/library/http.server.html)

    יצא לי כבר להתקל בבעיות תאימות גרסאות ב-http-server (אני עובר בין גרסאות node מידי פעם)

    מריצים את הפקודה הבאה:
    python3 -m http.server 8080

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

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

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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