Skracamy adres do tworzonej aplikacji

Tworzymy krótki i łatwy do zapamiętania adres naszej aplikacji

Skracamy adres do tworzonej aplikacji

W poprzednim artykule stworzyliśmy bardzo prostą aplikację internetową wyświetlającą bieżącą datę i godzinę. Znajduje się ona w katalogu myApp, a zatem jest dostępna pod adresem http://localhost/myApp. W tym artykule pokażę jak zmienić ten adres na krótszy i łatwiejszy do zapamiętania.

Wymagania

Uwaga: Warunkiem koniecznym do skracania adresu naszej aplikacji w sposób opisany w tym poradniku jest posiadanie zainstalowanego Apache-a w wersji co najmniej 2.4. Jak sprawdzić posiadaną wersję Apache-a?

Dodajemy wpis w pliku hosts

Przechodzimy do katalogu C:\Windows\System32\drivers\etc (przy założeniu, że system operacyjny jest zainstalowany na partycji C:\).

Plik hosts w katalogu C:\Windows\System32\drivers\etc

Klikamy dwukrotnie na plik hosts. Z powodu braku rozszerzenia otwieranego pliku zobaczymy okno dialogowe Otwieranie za pomocą. Wybieramy z listy nasz ulubiony edytor tekstowy, po czym klikamy OK.

Okno dialogowe Otwieranie za pomocą i wskazany przez użytkownika edytor tekstowy Visual Studio Code

Zgodnie z oczekiwaniami ujrzymy zawartość pliku hosts wyświetloną w edytorze tekstowym. Domyślna zawartość wygląda następująco:

127.0.0.1 localhost

Naszym zadaniem jest dodanie dwóch linii zawierających informację o adresie, pod jakim mamy mieć dostęp do naszej aplikacji. W jednej linii zapiszemy adres z przedrostkiem www, a w drugiej – bez niego.

Adres, pod jakim chcemy mieć dostęp do naszej aplikacji, nie powinien posiadać rozszerzenia istniejącej domeny. Użycie domeny .dev lub .app może zakończyć się faktycznym przejściem pod taki adres. Z tego powodu należy wybrać nieistniejące rozszerzenie domeny, np. .local.

Załóżmy, że do naszej aplikacji chcemy mieć dostęp za pomocą adresu http://myapp.local. Zatem na koniec pliku hosts dopisujemy następujące dwie linie:

127.0.0.1 myapp.local
127.0.0.1 www.myapp.local

Cały plik hosts powinien mieć następującą zawartość:

127.0.0.1 localhost
127.0.0.1 myapp.local
127.0.0.1 www.myapp.local

Zapisujemy zmiany wprowadzone do pliku hosts.

Jeśli nie możemy zapisać wprowadzonych zmian, uruchamiamy nasz edytor jako administrator. Następnie otwieramy plik hosts klikając na Plik > Otwórz i przechodząc do katalogu C:\Windows\System32\drivers\etc. Wykonujemy ponownie opisane powyżej kroki.

Dodajemy regułę obsługującą dodany adres

Przechodzimy do katalogu C:\xampp\apache\conf\extra (przy założeniu, że system operacyjny jest zainstalowany na partycji C:\) i klikamy dwukrotnie na plik httpd-vhosts.conf.

Plik httpd-vhosts.conf w katalogu C:\xampp\apache\conf\extra

Ten plik należy otworzyć za pomocą edytora tekstowego. Jeśli na skutek dwukrotnego kliknięcia na ten plik widzimy okno dialogowe Otwieranie za pomocą, należy postąpić dokładnie tak samo jak opisano wyżej – wskazujemy nasz ulubiony edytor tekstowy i klikamy OK.

W nowo otwartym pliku musimy znaleźć linię zawierającą następujący kod:

##NameVirtualHost *:80

Symbol # na początku linii oznacza komentarz. Musimy go usunąć aby linia wyglądała następująco:

NameVirtualHost *:80

Teraz przechodzimy na koniec zawartości pliku i wklejamy tam następującą regułę:

<VirtualHost *:80>
  DocumentRoot "C:/xampp/htdocs/myApp"
  ServerName myapp.local
  ServerAlias www.myapp.local
  <Directory "C:/xampp/htdocs/myApp">
    AllowOverride All
    Require all Granted
  </Directory>
</VirtualHost>

Zapisujemy zmiany w pliku httpd-vhosts.conf i uruchamiamy składnik Apache pakietu XAMPP (lub zatrzymujemy go i uruchamiamy ponownie jeśli był już uruchomiony).

W przeglądarce internetowej przechodzimy pod adres http://myapp.local lub http://www.myapp.local. Naszym oczom ukaże się dobrze nam znane powitanie wraz z bieżącą datą i godziną:

Dostęp do naszej aplikacji za pomocą skróconego adresu

Od tej chwili dostęp do naszej aplikacji jest możliwy za pomocą skróconego adresu.

Dawid Gałecki, dn. 01.01.2021 o godz. 23:46


Znalazłeś błąd w treści wpisu, masz uwagi dotyczące tekstu albo chcesz podsunąć pomysł na kolejny artykuł? Zapraszam do kontaktu ze mną. Dziękuję!