Креирање локалног сервера са јавне адресе

Већ дуже од 10 година развијам сајтове и један од мојих највећих проблема је увек био локални развој и синхронизација локалних сајтова са тестовима. Кориштење локалне околине је супер јер је брзо, али није видљиво из даљине и преноси се негдје, значи операција базе података, преименовање таблица, вриједности и тако даље.

У овом чланку, показат ћу вам једноставан начин покрените локални сервер које можете приступ са телефона и других мобилних уређаја изворно, а такође и емитовање преко Интернета, што значи да делите свој рад са клијентима, не остављајући добар локални хост.

Коришћење Вагранта за креирање локалног окружења

Недавно сам написао чланак о Хонгкјату о коришћењу Вагранта, тако да ћу овде само прећи основе. За више информација погледајте чланак!

Да бисте започели, морате да преузмете и инсталирате ВиртуалБок и Вагрант. Оба су слободна и користе се за креирање виртуелне машине која ће покренути ваш сервер.

Сада креирајте фасциклу у којој ћете складиштити своје веб локације “Вебситес” унутар нашег главног корисничког именика. То би било / Усерс / [усернаме] / Вебситес на ОС Кс и Ц: / Усерс / [усернаме] / Вебситес у Виндовсима.

Направите име нове фасцикле вордпресс. Овде ћу креирати виртуелну машину. Идеја је да сваки фолдер унутар Вебситес има засебну виртуелну машину. Док вас моћи ставите онолико веб сајтова на једну виртуелну машину колико желите, волим да их групишем по платформама - нпр: ВордПресс, Ларавел, Цустом

За потребе овог туториала креирам ВордПресс сајт.

Унутар ВордПресс у фолдеру морамо да направимо две датотеке, Вагрантфиле и инсталл.сх. Они ће се користити за постављање виртуелних машина. Јеффреи Ваи је направио два одлична стартер фајла; можете узети његове Вагрантфиле и инсталл.сх датотеке.

Затим, користећи терминал, идите до ВордПресс директоријум и тип вагрант уп. Ово ће потрајати, пошто кутија треба да се преузме и затим инсталира. Узмите шољицу кафе и проверите овај пост на 50 ВордПресс савета док чекате.

Када се процес заврши, требало би да можете да идете 192.168.33.21 и погледајте страницу која се исправно приказује. Фасцикла са садржајем треба да буде хтмл фолдер унутар ВордПресс директоријума. Сада можете почети да додајете датотеке, инсталирате ВордПресс или било шта друго што желите.

Не заборавите да прочитате комплетан Вагрант водич за више информација о креирању виртуелних хостова, попут мапирања домена митест.дев и тако даље.

Отварање локалних локација на истој мрежи помоћу програма Гулп

Приликом изградње сајта требало би да размишљате о брзини реаговања. Мали екрани се у одређеној мери могу емулирати сужавањем прозора претраживача, али то једноставно није исто искуство, поготово ако баците ретина екране у мик.

Идеално би било да отворите локалну веб локацију на мобилним уређајима. То није тешко урадити, под условом да су ваши уређаји на истој мрежи.

Да бисмо ово урадили, користићемо Гулп и Бровсерсинц. Гулп је алатка за аутоматизацију развоја, Бровсерсинц је одлична алатка која не само да може да креира локални сервер већ и синхронизује скроловање, кликове, форме и више међу уређајима.

Инсталлинг Гулп

Инсталирање Гулпа је веома лако. Упутите се на страницу Геттинг Стартед за почетак. Један од предуслова је НПМ (Ноде Пацкаге Манагер). Најлакши начин да то добијете је да инсталирате сам Ноде. За упутства идите на Веб локацију.

Када искористите нпм инсталл - глобал гулп команда да инсталирате гулп глобално, морате га додати у свој пројекат. Начин да се то уради је да се покрене нпм инсталл --саве-дев гулп у коријенској мапи вашег пројекта, затим додајте гулпфиле.јс тамо.

У овом тренутку додамо једну линију кода унутар те датотеке која указује да ћемо користити Гулп.

вар гулп = рекуире ('гулп');

Ако вас занимају све кул ствари које Гулп може да уради као повезивање скрипти, компајлирање Сасс и ЛЕСС, оптимизовање слика и тако даље, прочитајте наш Водич за гулп. У овом чланку ћемо се фокусирати на креирање сервера.

Коришћење Бровсерсинц

Бровсерсинц има Гулп екстензију коју можемо инсталирати у два корака. Прво, употребимо нпм да га преузмемо, а затим га додамо нашем Гулпфиле-у.

Иссуе тхе нпм инсталирај бровсер-синц гулп --саве-дев наредба у коријену пројекта у терминалу; ово ће преузети проширење. Затим отворите Гулпфиле и додајте следећу линију:

вар бровсерСинц = рекуире ('бровсер-синц'). цреате ();

Ово омогућава Гулпу да зна да ћемо користити Бровсерсинц. Затим ћемо дефинисати задатак који контролише како ће Бровсерсинц радити.

гулп.таск ('бровсер-синц', функција () бровсерСинц.инит (проки: "192.168.33.21"););

Након додавања, можете куцати гулп бровсер-синц у терминал за покретање сервера. Требало би да видите нешто као на слици испод.

Тамо постоје четири одвојена УРЛ-а, ево шта они значе:

Лоцал: Локални УРЛ је мјесто гдје можете доћи до послужитеља на строју на којем га покрећете. У нашим случајевима можете користити 192.168.33.21 или можете користити ону коју вам је дао Борвсерсинц.
Ектернал: Ово је УРЛ који можете да користите на било ком уређају повезаном на мрежу да бисте дошли до веб сајта. Радит ће на вашем локалном рачуналу, телефону, таблету и тако даље.
УИ: Ова УРЛ адреса указује на опције за тренутно активни сервер. Можете да видите везе, подесите мрежу, прегледате историју или опције синхронизације.
Ектернал УИ: Ово је исто као корисничко сучеље, али је доступно са било којег уређаја на мрежи.

Зашто користити Бровсерсинц?

Сада када смо завршили са овом фазом можда размишљате: зашто уопште користите Бровсерсинц? УРЛ 192.168.33.21 се такође може приступити са било ког уређаја. Иако је то тако, потребно је да инсталирате ВордПресс на ову УРЛ адресу.

Обично користим виртуалхостс и имам домене као што су вордпресс.лоцал или мипројецт.дев. Ово се решава локално, тако да не можете да посетите вордпресс.лоцал на свом мобилном телефону и да видите исти резултат као на вашем локалном рачунару.

До сада је добро, сада имамо тест сајт који се може приступити са било ког уређаја на мрежи. Сада је вријеме за глобално емитирање нашег рада преко интернета.

Кориштење нгрок дијељења нашег локалног хоста

нгрок је алатка коју можете користити за креирање сигурних тунела локалном хосту. Ако се пријавите (још увек бесплатно) добићете тунеле заштићене лозинком, ТЦП и више истовремених тунела.

Инсталлинг нгрок

Идите на нгрок страницу за преузимање и узмите верзију која вам је потребна. Можете га покренути из фасцикле у којој се налази или је премјестити на локацију која вам омогућава да је покренете с било којег мјеста. На Мац / Линуку можете покренути следећу команду:

судо мв нгрок / уср / лоцал / бин / нгрок

Ако добијете грешку да ова локација не постоји, једноставно направите фасцикле које недостају.

Користећи нгрок

Срећом, овај дио је изузетно једноставан. Када покренете сервер преко Гулпа, погледајте порт који користи. У горњем примеру, локални сервер ради на хттп: // лоцалхост: 3000 што значи да користи порт 3000. У новој картици терминала, покрените следећу команду:

нгрок хттп 3000

Ово ће створити приступачан тунел вашем локалном хосту, резултат би требао бити нешто слично овоме:

УРЛ који видите поред “Форвардинг” је оно што можете користити да бисте приступили веб-локацији с било којег мјеста.

Закључак

На крају дана можемо урадити три ствари:

Погледајте и радите на нашем пројекту локално
Погледајте наш сајт преко било ког уређаја на мрежи
Нека други виде наш рад било гдје са једноставним линком

Ово ће вам омогућити да се фокусирате на развој уместо на трке да бисте локалне и тестне сервере држали у синхронизацији, мигрирали базе података и друге забрињавајуће задатке.

Ако имате другачији начин рада на локалном нивоу и делите резултат, јавите нам!