Създаване на локален сървър, достъпен от публичен адрес

Разработвах уеб сайтове за по-голямата част от 10 години и един от най-големите ми проблеми беше винаги местното развитие и синхронизирането на местните сайтове с живи тестове. Използването на локална среда е чудесно, защото е бързо, но не може да се види отдалеч и се прехвърля някъде, което означава операция с база данни, преименуване на таблици, стойности и т.н..

В тази статия ще ви покажа лесен начин да стартирате локален сървър което можете достъп от телефона и други мобилни устройства естествено, а също така и излъчване по интернет, което означава да споделяте работата си с клиенти, без да оставяте доброто местно устройство.

Използване на Vagrant за създаване на местна среда

Преди малко написах статия на Hongkiat за използването на Vagrant, така че ще прегледам само основите тук. За повече информация вижте статията!

За да започнете, ще трябва да вземете и инсталирате VirtualBox и Vagrant. И двете са безплатни и се използват за създаване на виртуална машина, която ще изпълнява вашия сървър.

Сега създайте папка, в която да съхранявате уебсайтовете си. Да използваме директорията с име “Уебсайтове” в нашия основен потребителски указател. Това би било / потребители / [потребителско име] / сайтове за OS X и C: / потребители / [потребителско име] / сайтове в Windows.

Създайте нова папка с име WordPress. Тук ще създам виртуалната машина. Идеята е, че всяка папка вътре Уебсайтове разполага с отделна виртуална машина. Докато ти мога поставяйте толкова уебсайтове на една виртуална машина, колкото искате, обичам да ги групирам по платформи - например: WordPress, Laravel, Custom

За целите на този урок ще създам WordPress сайт.

Вътре WordPress ще трябва да създадем два файла, Vagrantfile и install.sh. Те ще се използват за настройка на нашите виртуални машини. Джефри Уей е създал две страхотни стартерни файлове; можете да вземете Vagrantfile и install.sh файлове.

След това използвайте терминала, отидете до WordPress директория и тип скитник. Това ще отнеме известно време, тъй като кутията трябва да бъде изтеглена и след това инсталирана. Вземете чаша кафе и вижте този пост на 50 WordPress съвета, докато чакате.

След като процесът приключи, трябва да можете да отидете 192.168.33.21 и ще видите правилно показвана страница. Папката ви със съдържание трябва да е папката html в директорията на WordPress. Сега можете да започнете да добавяте файлове, да инсталирате WordPress или нещо друго, което искате.

Не забравяйте да прочетете пълния Vagrant ръководство за повече информация относно създаването на виртуални хостове, подобно на картографиране на домейни mytest.dev и така нататък.

Отваряне на локални сайтове в една и съща мрежа с използване на Gulp

Когато изграждате сайт, трябва да мислите за отзивчивост. Малките екрани могат да бъдат емулирани до известна степен чрез стесняване на прозореца на браузъра, но това не е същото преживяване, особено ако хвърлите ретината в микса.

В идеалния случай искате да отворите местния си уебсайт на мобилните си устройства. Това не е много трудно да се направи, при условие, че вашите устройства са в една и съща мрежа.

За да постигнем това, ще използваме Gulp и Browsersync. Gulp е инструмент за автоматизиране на разработката, Browsersync е чудесен инструмент, който не само може да създаде локален сървър, но и да синхронизира превъртането, кликванията, формите и други в различни устройства..

Инсталиране на Gulp

Инсталирането на Gulp е много лесно. Отидете до страницата Първи стъпки за указанията. Една от предпоставките е NPM (Node Package Manager). Най-лесният начин да получите това е да инсталирате самия Node. Отидете до уебсайта на Node за инструкции.

След като използвате npm install --global gulp командата да инсталирате глътка в световен мащаб, трябва да го добавите към вашия проект. Начинът да се направи това е да се изпълни npm install --save-dev глътка в главната папка на вашия проект, след това добавете a gulpfile.js там.

В момента нека добавим един ред код в този файл, който показва, че ще използваме самия Gulp.

var gulp = require ("глътка");

Ако се интересувате от всички готини неща, Gulp може да направи като конкатениращи скриптове, компилиране на Sass и LESS, оптимизиране на изображения и т.н. В тази статия ще се фокусираме върху създаването на сървър.

Използване на Browsersync

Browsersync има разширение Gulp, което можем да инсталираме в две стъпки. Първо, нека използваме npm, за да го изтеглим, след което го добавяме към нашия Gulpfile.

Издайте npm install gulp --save-dev команда в проектния корен в терминала; това ще изтегли разширението. След това отворете файла Gulpfile и добавете към него следния ред:

var browserSync = require ('browser-sync'). create ();

Това позволява на Gulp да знае, че ще използваме Browsersync. След това ще дефинираме задача, която контролира работата на Browsersync.

gulp.task ('browser-sync', функция () browserSync.init (proxy: "192.168.33.21"););

Веднъж добавен, можете да въведете синхронизиране на браузъра в терминала, за да стартирате сървър. Трябва да видите нещо като изображението по-долу.

Там има четири отделни URL адреса, ето какво означават те:

местен: Локалният URL адрес е мястото, където можете да достигнете до сървъра на устройството, на което го изпълнявате. В нашите случаи можете да използвате 192.168.33.21 или можете да използвате тази, предоставена от Borwsersync.
Външен: Това е URL адресът, който можете да използвате на всяко устройство, свързано с мрежата, за да достигнете до уебсайта. Тя ще работи на локалната ви машина, телефона, таблета и т.н..
UI: Този URL посочва опциите за текущо изпълнения сървър. Можете да видите връзки, да настроите мрежово регулиране, да преглеждате историята или опциите за синхронизиране.
Външен интерфейс: Това е същото като потребителския интерфейс, но е достъпно от всяко устройство в мрежата.

Защо да използвате Browsersync?

Сега, когато приключихме с тази фаза, може би си мислите: защо изобщо използвате Browsersync? URL адресът 192.168.33.21 може да бъде достигнат и от всяко устройство. Докато това е така, ще трябва да инсталирате WordPress на този URL адрес.

Обикновено използвам virtualhosts и имам домейни като wordpress.local или myproject.dev. Те се разрешават локално, така че не можете да посетите wordpress.local на мобилния си телефон и да видите същия резултат, както на локалния ви компютър.

Дотук добре, сега имаме тест сайт, който може да бъде достъпен от всяко устройство в мрежата. Сега е време да станем глобални и да излъчваме нашата работа по интернет.

Използване на ngrok За да споделите нашия Localhost

ngrok е инструмент, който можете да използвате за създаване на сигурни тунели за вашия localhost. Ако се регистрирате (все още безплатно) получавате защитени с парола тунели, TCP и множество едновременни тунели.

Инсталиране на ngrok

Отидете на страницата за изтегляне на ngrok и вземете необходимата версия. Можете да я стартирате от папката, в която се намира, или да я преместите на място, което ви позволява да го стартирате от всяко място. На Mac / Linux можете да изпълните следната команда:

sudo mv ngrok / usr / local / bin / ngrok

Ако получите грешка, че това местоположение не съществува, просто създайте липсващите папки.

Използване на ngrok

За щастие тази част е изключително проста. След като стартирате сървъра си чрез Gulp, погледнете порта, който използва. В горния пример локалният сървър работи на HTTP: // Localhost: 3000 което означава, че използва порт 3000. В нов раздел на терминала изпълнете следната команда:

ngrok http 3000

Това ще създаде достъпен тунел за вашия localhost, резултатът трябва да бъде нещо подобно:

URL адресът, който виждате до “Пренасочване” е това, което можете да използвате за достъп до уебсайта си от всяко място.

заключение

В края на деня вече можем да направим три неща:

Разгледайте и работете по нашия проект на местно ниво
Разгледайте нашия уебсайт чрез всяко устройство в мрежата
Нека другите да разглеждат работата ни навсякъде с проста връзка

Това ще ви позволи да се съсредоточите върху развитието, вместо да се състезавате, за да поддържате синхронизиране на локални и тестови сървъри, мигриране на бази данни и други тревожни задачи.

Ако имате различен метод за работа на местно ниво и споделяне на резултата, уведомете ни!