Vytvoření místního serveru přístupné z veřejné adresy
Vyvíjím webové stránky pro lepší část 10 let a jedním z mých největších problémů byl vždy místní rozvoj a synchronizace místních stránek s živými testy. Použití lokálního prostředí je skvělé, protože je rychlé, ale není možné ho zobrazit z dálky a přenášet někam znamená provoz databáze, přejmenování tabulek, hodnot atd..
V tomto článku vám ukážu snadný způsob spustit lokální server které můžete z telefonu a jiných mobilních zařízení nativně, a také vysílání přes internet, což znamená sdílení vaší práce s klienty, aniž by zanechalo dobrý ol 'localhost.
Pomocí Vagrant vytvořit místní prostředí
Před chvílí jsem zde napsal článek o Hongkiatu o používání Vagrantu, takže zde budu jen procházet základy. Pro více informací se podívejte na článek!
Chcete-li začít, budete muset chytit a nainstalovat VirtualBox a Vagrant. Oba jsou zdarma a slouží k vytvoření virtuálního stroje, který bude spouštět váš server.
Nyní vytvořte složku, do které chcete ukládat své webové stránky. Použijte pojmenovaný adresář “Webové stránky” v našem hlavním uživatelském adresáři. To by bylo / Uživatelé / [uživatelské jméno] / Webové stránky na OS X a C: / Uživatelé / [uživatelské jméno] / Webové stránky ve Windows.
Vytvořte novou složku s názvem wordpress. To je místo, kde budu vytvářet virtuální stroj. Cílem je, aby každá složka uvnitř Webové stránky obsahuje samostatný virtuální stroj. Zatímco ty umět umístit tolik webových stránek na jeden virtuální stroj, jak byste chtěli, rád bych je seskupil podle platforem - např .: WordPress, Laravel, Vlastní
Pro účely tohoto kurzu budu vytvářet webové stránky WordPress.
Uvnitř WordPress budeme muset vytvořit dva soubory, Vagrantfile a install.sh. Ty budou použity pro nastavení našich virtuálních strojů. Jeffrey Way vytvořil dva skvělé startovací soubory; můžete chytit jeho Vagrantfile a install.sh soubory.
Poté pomocí terminálu přejděte na WordPress adresář a typ tulák. Bude to chvíli trvat, protože je třeba krabici stáhnout a nainstalovat. Chyť šálek kávy a podívejte se na tento post na 50 tipů WordPress, zatímco budete čekat.
Jakmile je proces dokončen, měli byste být schopni jít 192,168,33,21 a podívejte se na řádně zobrazenou stránku. Obsahové složky by měly být html složky v adresáři WordPress. Nyní můžete začít přidávat soubory, instalovat WordPress nebo cokoliv jiného, co byste chtěli.
Nezapomeňte si přečíst celý průvodce Vagrant pro více informací o vytváření virtuálních hostitelů, mapování domén mytest.dev a tak dále.
Otevření místních serverů ve stejné síti pomocí Gulp
Při stavbě webu byste měli přemýšlet o citlivosti. Malé obrazovky mohou být do určité míry emulovány zúžením okna prohlížeče, ale není to jen stejný zážitek, zejména pokud házíte sítnice v mixu.
V ideálním případě budete chtít otevřít své místní webové stránky na svých mobilních zařízeních. To není příliš obtížné, pokud jsou vaše zařízení ve stejné síti.
Abychom toho dosáhli, budeme používat Gulp a Browsersync. Gulp je nástroj pro automatizaci vývoje, Browsersync je skvělý nástroj, který může nejen vytvořit lokální server, ale také synchronizovat rolování, kliknutí, formulářů a více zařízení..
Instalace Gulp
Instalace Gulp je velmi snadná. Pokyny naleznete na stránce Začínáme. Předpokladem je NPM (Node Package Manager). Nejjednodušší způsob, jak to získat, je nainstalovat samotný uzel. Pokyny naleznete na webové stránce uzlu.
Jakmile jste použili npm install --global gulp Chcete-li nainstalovat gulp globálně, musíte jej přidat do svého projektu. Způsob, jak to udělat, je spustit npm install --save-dev gulp v kořenové složce projektu a poté přidejte gulpfile.js soubor.
V tomto okamžiku přidáme do tohoto souboru jeden řádek kódu, který označuje, že budeme používat Gulp sám.
var gulp = vyžadují ('gulp'); Máte-li zájem o všechny skvělé věci, které Gulp může udělat jako zřetězení skriptů, kompilace Sass a LESS, optimalizace obrázků a tak dále, přečtěte si náš Průvodce po Gulp. V tomto článku se zaměříme na vytvoření serveru.
Pomocí Browsersync
Browsersync má rozšíření Gulp, které můžeme nainstalovat ve dvou krocích. Nejdříve je použijte ke stažení, pak ho přidáme do našeho souboru Gulpfile.
Vydejte npm install browser-sync gulp --save-dev příkaz v kořenovém adresáři projektu v terminálu; rozšíření bude staženo. Poté otevřete soubor Gulpfile a přidejte do něj následující řádek:
var browserSync = vyžadují ('prohlížeč-synchronizace'). create (); To umožňuje Gulp vědět, že budeme používat Browsersync. Dále definujeme úkol, který řídí, jak bude Browsersync fungovat.
gulp.task ('browser-sync', function () browserSync.init (proxy: "192.168.33.21");); Po přidání můžete zadat synchronizace prohlížeče do terminálu pro spuštění serveru. Měli byste vidět něco jako obrázek níže.
Jsou zde čtyři samostatné adresy URL, což znamená:
- Místní: Místní adresa URL je místo, kde se můžete dostat na server v počítači, na kterém je spuštěn. V našich případech můžete použít
192,168,33,21nebo můžete použít ten, který poskytl Borwsersync. - Externí: Toto je adresa URL, kterou můžete použít na jakémkoli zařízení připojeném k síti k dosažení webových stránek. Bude fungovat na vašem místním počítači, telefonu, tabletu a tak dále.
- UI: Tato adresa URL ukazuje na možnosti aktuálně spuštěného serveru. Můžete vidět připojení, nastavit škrcení sítě, zobrazit historii nebo možnosti synchronizace.
- Externí uživatelské rozhraní: Toto je stejné jako uživatelské rozhraní, ale přístupné z libovolného zařízení v síti.
Proč používat Browsersync?
Teď, když jsme hotovi s touto fází, možná přemýšlíte: proč používat Browsersync vůbec? Adresa URL 192.168.33.21 je také dostupná z libovolného zařízení. I když je to tak, budete muset nainstalovat WordPress na tuto adresu URL.
Obvykle používám virtualhosts a mají domény jako wordpress.local nebo myproject.dev. Tyto problémy vyřešíte lokálně, takže nemůžete navštívit wordpress.local na svém mobilním telefonu a vidět stejný výsledek jako na místním počítači.
Doposud tak dobré, máme nyní testovací stránky, které lze přistupovat z libovolného zařízení v síti. Nyní je čas jít globálně a vysílat naši práci přes internet.
Použití ngrok Chcete-li sdílet náš Localhost
ngrok je nástroj, který můžete použít k vytvoření bezpečných tunelů do vašeho localhostu. Pokud se zaregistrujete (stále zdarma), získáte tunely chráněné heslem, TCP a více současně probíhajících tunelů.
Instalace ngrok
Přejděte na stránku ke stažení a získejte verzi, kterou potřebujete. Můžete ji spustit ze složky, ve které se nachází, nebo ji přesunout do umístění, které vám umožní spouštět ji odkudkoli. V systému Mac / Linux můžete spustit následující příkaz:
sudo mv ngrok / usr / local / bin / ngrok
Pokud se zobrazí chyba, že toto umístění neexistuje, jednoduše vytvořte chybějící složky.
Použití ngrok
Naštěstí je tato část velmi jednoduchá. Po spuštění serveru přes Gulp se podívejte na port, který používá. Ve výše uvedeném příkladu je místní server spuštěn na adrese http: // localhost: 3000 což znamená, že používá port 3000. V nové záložce terminálu spusťte následující příkaz:
ngrok http 3000
Tím vytvoříte přístupový tunel k vašemu localhostu, výsledek by měl být něco takového:
Adresa URL, kterou vidíte vedle “Přesměrování” je to, co můžete použít k přístupu na své webové stránky odkudkoli.
Závěr
Na konci dne můžeme nyní udělat tři věci:
- Prohlédněte si a pracujte na našem projektu lokálně
- Prohlédněte si naše webové stránky prostřednictvím jakéhokoli zařízení v síti
- Nechte ostatní vidět naši práci kdekoli s jednoduchým odkazem
To vám umožní zaměřit se na vývoj namísto závodní, aby se místní a testovací servery synchronizovaly, migrovaly databáze a další znepokojující úkoly..
Pokud máte jiný způsob práce na místě a sdílení výsledků, dejte nám vědět!
