יצירת שרת מקומי נגיש מתוך כתובת ציבורית

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

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

באמצעות נווד כדי ליצור סביבה מקומית

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

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

עכשיו, ליצור תיקייה כדי לאחסן את אתרי האינטרנט שלך פנימה בואו להשתמש בספרייה בשם “אתרי אינטרנט” בתוך ספריית המשתמשים העיקרית שלנו. זה יהיה / משתמשים / [שם משתמש] / אתרי אינטרנט על OS X ו C: / משתמשים / [שם משתמש] / אתרי אינטרנט על Windows.

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

למטרות הדרכה זו אני אהיה יצירת אתר וורדפרס.

בתוך ה וורדפרס התיקייה שנצטרך ליצור שני קבצים, Vagrantfile ו install.sh. אלה ישמשו כדי להגדיר את המכונות הווירטואליות שלנו. ג 'פרי Way יצרה שני קבצים Starter נהדר; אתה יכול לתפוס Vagrantfile שלו קבצים install.sh.

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

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

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

פתיחת אתרים מקומיים באותו רשת באמצעות גמיעה

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

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

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

התקנת גביע

התקנת גמיעה היא קלה מאוד. עבור אל הדף 'תחילת העבודה' לקבלת ההוראות. אחד הדרוש מראש הוא NPM (הצומת מנהל חבילה). הדרך הקלה ביותר להשיג זאת היא להתקין את הצומת עצמו. ראש למטה אל אתר הצומת לקבלת הוראות.

לאחר שהשתמשת npm להתקין - הפקודה להתקין בלגימה גלובלית, אתה צריך להוסיף אותו לפרויקט שלך. הדרך לעשות זאת היא לרוץ npm להתקין - save-dev gulp בתיקיית השורש של הפרוייקט, ולאחר מכן הוסף א gulpfile.js שם.

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

var gulp = דרוש ("גמיעה");

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

באמצעות Browsersync

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

גליון npm להתקין דפדפן סינכרון גביע - save-dev הפקודה בשורש הפרויקט בטרמינל; פעולה זו תוריד את התוסף. לאחר מכן, לפתוח את Gulpfile ולהוסיף את השורה הבאה אליו:

דפדפן varSync = דורשים ('דפדפן סינכרון').

זה מאפשר לג'ל לדעת שנשתמש ב- Browsersync. הבא נגדיר משימה אשר שולטת כיצד Browsersync יעבוד.

gulp.task ('דפדפן סינכרון', פונקציה () browserSync.init (proxy: "192.168.33.21"););

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

יש ארבע כתובות אתרים נפרדות, וכאן הם מתכוונים:

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

למה להשתמש Browsersync?

עכשיו שאנחנו סיימנו עם השלב הזה אתה עלול לחשוב: למה להשתמש Browsersync בכלל? ניתן להגיע אל כתובת האתר 192.168.33.21 מכל מכשיר. אמנם זה כך, אתה צריך להתקין WordPress לכתובת זו.

אני בדרך כלל להשתמש virtualhosts ויש להם תחומים כמו wordpress.local או myproject.dev שלי. אלה לפתור באופן מקומי, כך שאתה לא יכול לבקר wordpress.local על הטלפון הנייד שלך ולראות את אותה תוצאה כמו במחשב המקומי שלך.

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

באמצעות ngrok לשתף Localhost שלנו

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

התקנת ngrok

עבור לדף ההורדה ngrok ותפס את הגרסה שאתה צריך. אתה יכול להריץ אותו מהתיקיה הוא נמצא או להעביר אותו למיקום המאפשר לך להפעיל אותו מכל מקום. ב- Mac / Linux ניתן להפעיל את הפקודה הבאה:

/ usr / מקומי / bin / ngrok

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

באמצעות ngrok

למרבה המזל חלק זה הוא פשוט מאוד. ברגע שאתה מפעיל את השרת שלך באמצעות Gulp, תסתכל על היציאה היא משתמשת. בדוגמה לעיל, השרת המקומי פועל ב http: // localhost: 3000 כלומר, באמצעות יציאה 3000. בכרטיסייה חדשה מסוף, הפעל את הפקודה הבאה:

http

זה יהיה ליצור מנהרה נגישה localhost שלך, התוצאה צריכה להיות משהו כזה:

כתובת האתר שאתה רואה לצד “העברה” הוא מה שאתה יכול להשתמש כדי לגשת לאתר שלך מכל מקום.

סיכום

בסוף היום אנחנו יכולים לעשות עכשיו שלושה דברים:

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

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

אם יש לך שיטה אחרת של עבודה מקומית ושיתוף התוצאה, יידע אותנו!