Udostępnianie i testowanie aplikacji hostowanych lokalnie na zewnątrz

Udostępnianie i testowanie aplikacji hostowanych lokalnie na zewnątrz

Do czego może się nam przydać udostępnianie aplikacji hostowanych lokalnie na zewnątrz?

Mówiąc “na zewnątrz” mam na myśli oczywiście dostęp do naszego lokalnego środowiska (localhost) z zewnętrznej sieci, w skrócie Internetu. Do czego może się nam to przydać?

Z mojego doświadczenia na pewno w trzech sytuacjach:

  • W celu szybkiego i bezproblemowego udostępnienia lokalnej wersji aplikacji osobom, które pracują zdalnie. Ostatnio miałem styczność z pracą nad layoutem, gdzie implementowałem dość interaktywny komponent. Projektant interfejsu pracował w innej części Polski. Udostępnienie środowiska lokalnego umożliwiło nam maksymalnie skrócić tzw. feedback loop. Również było to bardziej praktyczne niż udostępnienie ekranu przez skype ponieważ projektant mógł sam przeklikiwać komponent.
  • W pracy z Webhooks. Aby odebrać powiadomienia bazując na mechanizmie Webhooks musimy udostępnić publiczny url. Pracując na środowisku lokalnym takiego nie posiadamy. Wrzucanie aplikacji na jakiś hosting i zdalne debugowanie jest znacznie cięższe, problemowe i czasochłonne w wykonaniu.
  • Testowanie aplikacji na rzeczywistych przeglądarkach mobilnych w telefonie w celu upewnienia się, czy na pewno wszystko działa 🙂

Zatem do dzieła!

1. Zacznijmy od przygotowania prostego serwera HTTP

W tym celu wykorzystamy NodeJS. Oczywiście, jeżeli posiadasz już istniejącą aplikację lub używasz innego serwera HTTP: IIS, Apache itd. nie musisz korzystać z NodeJS. Wszystko czego potrzebujemy to dowolna aplikacja/statyczna strona, do której można dostać się po adresie localhost. Jeżeli masz to już przygotowane to możesz przeskoczyć ten punkt i przejść od razu do sedna sprawy 🙂

  1. instalujemy paczkę http-server:
  2. Tworzymy folder, umieszczamy w nim przykładowy plik index.html:
  3. Z lokalizacji, w której znajduje się plik odpalamy serwer http:

    Naszym oczom powinien pojawić się podobny widok:Jak widać serwer jest dostępny pod adresem localhost na porcie 8080. Odpalamy zatem przeglądarkę i sprawdzamy adres http://localhost:8080/:

    Wszystko działa. Możemy przejść do próby udostępnienia aplikacji hostowanych lokalnie na zewnątrz.

 

2. Dostęp do localhost z zewnątrz

Posłużymy się w tym celu narzędziami z zestawienia: Narzędzia które powinien znać każdy web developer. Pierwsze narzędzie, które przychodzi nam tutaj z pomocą to Ngrok.

  1. Pobieramy odpowiednią dla swojego systemu operacyjnego wersję programu Ngrok. Pliki do pobrania znajdziemy tutaj.
  2. Uruchamiamy pobrany program i używamy komendy:

    8080 to port zgodny z portem serwera http z kroku pierwszego. Numer portu należy podmienić na własny, jeżeli korzystasz z innego (najprawdopodobniej 80).

    W przypadku systemu Windows po uruchomieniu pliku ngrok.exe, naszym oczom powinna pojawić się następująca konsola:

  3. Po wykonaniu komendy dostajemy informacje pod jakim adresem został wystawiony nasz lokalny serwer:
  4. Jak widać od tego momentu powinniśmy móc dostać się do naszej strony przy pomocy adresu http://c640a60d.ngrok.io. Spróbujmy zatem:
    Wygląda na to, że działa. Dla pewności, możemy spróbować wejść na stronę z innej sieci np. telefonu z odpalonym transferem danych.

Ok, osiągnęliśmy założony cel – uzyskaliśmy dostęp do localhost z zewnątrz. Jednak od razu widać jedną rzecz, która rzuca się w oczy. Mianowicie jest to niezbyt wygodny w użytkowaniu i dzieleniu się z innymi adres, który wygenerował nam Ngrok. Co więcej, jeżeli będziemy chcieli ponownie stworzyć “tunel” do naszego lokalnego środowiska, Ngrok wygeneruje nam nowy, losowy adres.

Ngrok oczywiście umożliwia definiowanie własnej subdomeny. Niestety jest to opcja dostępna jedynie w wersji płatnej programu:

 

3. Sposób na prostsze nazwy subdomen

Ngrok za darmo nie umożliwia definiowania własnej subdomeny, jednak na szczęście dostępne są jeszcze inne narzędzia. Przykładem może być Localtunnel. Jego głównym zadaniem tak, jak w przypadku Ngrok jest wystawienie adresu localhost na zewnątrz. Localtunnel jest w pełni darmowy i daje nam możliwość definiowania własnych subdomen.

Spójrzmy zatem jak działa Localtunnel (wymaga środowiska NodeJS):

  1. Instalujemy paczkę przy użyciu npm:
  2. Uruchamiamy serwer http, jeżeli nie jest uruchomiony.
  3. Umożliwiamy dostęp do localhost z zewnątrz korzystając z komendy (od razu ze zdefiniowaną własną nazwą subdomeny):
  4. W efekcie otrzymujemy:
  5. Wchodzimy na adres https://aplikacja.localtunnel.me i sprawdzamy, czy zostaniemy prawidłowo przekierowani:

    Jak widać, wszystko działa. Ponownie możemy sprawdzić z telefonu, czy faktycznie mamy dostęp do naszego lokalnego serwera http z innej sieci.

Podsumowując

Zarówno Ngrok, jak Localtunnel są narzędziami bardzo prostymi w użyciu. Zaletą Localtunnel jest możliwość definiowania własnych subdomen, ale za to wymaga środowiska NodeJS (które myślę, że jest coraz mniejszym problemem). Jeżeli potrzebujemy jednorazowego dostępu do środowiska lokalnego z zewnątrz to Ngrok również świetnie spełni swoją rolę.