Tworzenie lokalnego serwera dostępnego z adresu publicznego

Zajmuję się tworzeniem stron internetowych przez większą część 10 lat, a jednym z moich największych problemów był zawsze rozwój lokalny i synchronizacja lokalnych witryn z testami na żywo. Korzystanie ze środowiska lokalnego jest świetne, ponieważ jest szybkie, ale nie jest widoczne z daleka, a przeniesienie gdzieś oznacza działanie bazy danych, zmianę nazw tabel, wartości itd..

W tym artykule pokażę ci łatwy sposób uruchomić serwer lokalny co możesz dostęp z telefonu i innych urządzeń mobilnych natywnie, a także transmitowane przez Internet, co oznacza dzielenie się pracą z klientami, bez pozostawiania dobrego lokalnego hosta.

Korzystanie z Vagrant do stworzenia lokalnego środowiska

Niedawno napisałem artykuł w Hongkiat na temat korzystania z Vagrant, więc przejdę tylko do podstaw. Aby uzyskać więcej informacji, spójrz na artykuł!

Aby rozpocząć, musisz pobrać i zainstalować VirtualBox i Vagrant. Oba są bezpłatne i służą do tworzenia maszyny wirtualnej, która będzie uruchamiać serwer.

Teraz utwórz folder, w którym będziesz przechowywać swoje strony internetowe. Użyjmy katalogu o nazwie “Strony internetowe” w naszym głównym katalogu użytkownika. To by było / Users / [nazwa użytkownika] / Websites na OS X i C: / Users / [nazwa użytkownika] / Websites w systemie Windows.

Utwórz nowy folder o nazwie wordpress. Tutaj stworzę maszynę wirtualną. Chodzi o to, że każdy folder wewnątrz Strony internetowe mieści oddzielną maszynę wirtualną. Podczas gdy Ty mogą umieść jak najwięcej stron na jednej maszynie wirtualnej, lubię je grupować według platform - np .: WordPress, Laravel, Custom

Na potrzeby tego samouczka stworzę witrynę WordPress.

W środku WordPress folder będziemy musieli utworzyć dwa pliki, Vagrantfile i install.sh. Będą one używane do konfigurowania naszych maszyn wirtualnych. Jeffrey Way stworzył dwa wspaniałe pliki startowe; możesz pobrać jego pliki Vagrantfile i install.sh.

Następnie, używając terminalu, przejdź do WordPress katalog i typ włóczyć się. Zajmie to trochę czasu, ponieważ skrzynka musi zostać pobrana, a następnie zainstalowana. Weź filiżankę kawy i sprawdź ten post na 50 poradach WordPress podczas oczekiwania.

Po zakończeniu procesu powinieneś być w stanie przejść do 192.168.33.21 i zobacz prawidłowo obsługiwaną stronę. Folder treści powinien być folderem html w katalogu WordPress. Możesz teraz dodawać pliki, instalować WordPress lub cokolwiek innego.

Nie zapomnij przeczytać pełnego przewodnika po Vagrantach, aby uzyskać więcej informacji na temat tworzenia hostów wirtualnych, takich jak mapowanie domen mytest.dev i tak dalej.

Otwieranie lokalnych witryn w tej samej sieci za pomocą Gulp

Budując stronę powinieneś myśleć o responsywności. Małe ekrany można do pewnego stopnia emulować, zawężając okno przeglądarki, ale to nie jest to samo doświadczenie, zwłaszcza jeśli rzucisz ekrany siatkówki w miksie.

Idealnie będziesz chciał otworzyć swoją lokalną stronę na swoich urządzeniach mobilnych. Nie jest to zbyt trudne, pod warunkiem, że urządzenia są w tej samej sieci.

Aby to zrobić, użyjemy Gulp i Browsersync. Gulp to narzędzie do automatyzacji rozwoju, Browsersync to świetne narzędzie, które może nie tylko tworzyć lokalny serwer, ale także synchronizować przewijanie, kliknięcia, formularze i wiele innych urządzeń..

Instalowanie Gulp

Instalacja Gulp jest bardzo prosta. Przejdź do strony Pierwsze kroki, aby uzyskać instrukcje. Jednym z warunków wstępnych jest NPM (Node Package Manager). Najprostszym sposobem uzyskania tego jest zainstalowanie samego węzła. Skieruj się do strony internetowej Node, aby uzyskać instrukcje.

Po użyciu npm install - łyk globalny polecenie, aby zainstalować globalnie łyk, musisz dodać go do swojego projektu. Sposobem na to jest uruchomienie npm install --save-dev gulp w folderze głównym projektu, a następnie dodaj gulpfile.js plik tam.

W tej chwili dodajmy do tego pliku pojedynczy wiersz kodu, który wskazuje, że będziemy używać samego Gulpa.

var gulp = require ('gulp');

Jeśli interesują Cię wszystkie fajne rzeczy, które Gulp może zrobić, np. Łączenie skryptów, kompilowanie Sass i LESS, optymalizowanie obrazów itd., Przeczytaj nasz Przewodnik po Gulp. W tym artykule skupimy się na tworzeniu serwera.

Korzystanie z Browsersync

Browsersync ma rozszerzenie Gulp, które możemy zainstalować w dwóch krokach. Najpierw użyjmy npm, aby go pobrać, a następnie dodamy go do naszego pliku Gulp.

Wydaj npm zainstaluj synchronizację przeglądarki gulp --save-dev polecenie w katalogu głównym projektu w terminalu; spowoduje to pobranie rozszerzenia. Następnie otwórz plik Gulp i dodaj do niego następujący wiersz:

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

Dzięki temu Gulp wie, że będziemy używać Browsersync. Następnie zdefiniujemy zadanie, które kontroluje działanie Browsersync.

gulp.task ('browser-sync', function () browserSync.init (proxy: "192.168.33.21"););

Po dodaniu możesz wpisać synchronizacja przeglądarki z łykiem do terminala, aby uruchomić serwer. Powinieneś zobaczyć coś takiego jak obrazek poniżej.

Istnieją cztery oddzielne adresy URL, oto co oznaczają:

Lokalny: Lokalny adres URL to miejsce, w którym można dotrzeć do serwera na komputerze, na którym jest uruchomiony. W naszych przypadkach możesz użyć 192.168.33.21 lub możesz użyć tego dostarczonego przez Borwsersync.
Zewnętrzny: To jest adres URL, którego można używać na dowolnym urządzeniu podłączonym do sieci, aby uzyskać dostęp do witryny. Będzie działać na lokalnej maszynie, telefonie, tablecie itd.
Interfejs użytkownika: Ten adres URL wskazuje opcje dla aktualnie uruchomionego serwera. Możesz zobaczyć połączenia, skonfigurować ograniczanie sieci, przeglądać historię lub opcje synchronizacji.
Zewnętrzny interfejs użytkownika: To jest taki sam jak interfejs użytkownika, ale jest dostępny z dowolnego urządzenia w sieci.

Dlaczego warto korzystać z Browsersync?

Teraz, kiedy skończyliśmy z tą fazą, możesz myśleć: po co w ogóle używać Browsersync? Adres URL 192.168.33.21 można również uzyskać z dowolnego urządzenia. Chociaż tak jest, musisz zainstalować WordPress na ten adres URL.

Zwykle używam hostów wirtualnych i mam domeny takie jak wordpress.local lub myproject.dev. Rozwiązują się one lokalnie, więc nie możesz odwiedzić wordpress.local na telefonie komórkowym i zobaczyć tego samego wyniku, jak na komputerze lokalnym.

Do tej pory tak dobrze, mamy teraz stronę testową, do której można uzyskać dostęp z dowolnego urządzenia w sieci. Teraz nadszedł czas na globalną transmisję naszej pracy przez Internet.

Używanie ngrok do udostępniania naszego hosta lokalnego

ngrok to narzędzie, którego możesz użyć do tworzenia bezpiecznych tuneli na swoim lokalnym serwerze. Jeśli zarejestrujesz się (nadal za darmo), otrzymasz tunele chronione hasłem, TCP i wiele jednoczesnych tuneli.

Instalowanie ngrok

Przejdź do strony pobierania ngrok i pobierz potrzebną wersję. Możesz uruchomić go z folderu, w którym się znajduje, lub przenieść go do lokalizacji, która pozwala uruchomić go z dowolnego miejsca. W systemie Mac / Linux można uruchomić następujące polecenie:

sudo mv ngrok / usr / local / bin / ngrok

Jeśli pojawi się błąd, że ta lokalizacja nie istnieje, po prostu utwórz brakujące foldery.

Używanie ngrok

Na szczęście ta część jest niezwykle prosta. Po uruchomieniu serwera przez Gulp spójrz na port, którego używa. W powyższym przykładzie serwer lokalny działa na http: // localhost: 3000 co oznacza, że używa portu 3000. Na nowej karcie terminala uruchom następujące polecenie:

ngrok http 3000

Spowoduje to utworzenie dostępnego tunelu do twojego lokalnego hosta, w rezultacie powinno być coś takiego:

Adres URL widoczny obok “Przekierowanie” to jest to, czego możesz użyć, aby uzyskać dostęp do swojej witryny z dowolnego miejsca.

Wniosek

Pod koniec dnia możemy teraz zrobić trzy rzeczy:

Zobacz i pracuj nad naszym projektem lokalnie
Zobacz naszą stronę internetową za pomocą dowolnego urządzenia w sieci
Pozwól innym oglądać naszą pracę w dowolnym miejscu za pomocą prostego linku

Pozwoli to skupić się na rozwoju zamiast na wyścigach, aby utrzymać synchronizację lokalnych i testowych serwerów, migrację baz danych i inne niepokojące zadania.

Jeśli masz inną metodę pracy na miejscu i udostępniania wyników, daj nam znać!