Htaccess – czym jest ten plik i dlaczego warto go użyć?

Potrzebujesz dodatkowej konfiguracji serwera na którym planujesz umieścić swój projekt? Użyj pliku .htaccess i usprawnij działanie swojej aplikacji. W tym wpisie dowiesz się wszystkiego co niezbędne aby zacząć pracę z .htaccess.

Czego się dzisiaj dowiesz?

Ten wpis wytłumaczy Ci czym jest plik .htaccess i dlaczego często jest wręcz niezastąpiony do prawidłowego działania aplikacji czy stron internetowych. Następnie opiszę podstawowe możliwości pliku, pomogę Ci w jego stworzeniu i pokażę gdzie można znaleść przydatne narzędzia oraz dodatkowe informacje. Zaczynamy!

Czym jest plik .htaccess?

Ten plik jest plikiem konfiguracyjnym dla serwera stworzonym przez dewelopera w którym zdefiniowane są wybrane reguły dotyczące zachowania aplikacji w konkretnych sytuacjach. Co możemy zdefiniować w takim pliku?

  • Przekierowanie na strony z błędami, np. mamy 301 i wyświetla się odpowiedni widok,
  • Zastrzegamy (wprowadzamy hasło) dostęp do danego sektora w aplikacji,
  • Zmieniamy wygląd adresów www,
  • Ustawiamy stronę startową,
  • Banowanie po IP :),
  • Przekierowanie na podstrony
  • wiele, wiele więcej 🙂

Więcej szczegółów potem.

W dość przystępny sposób jest to opisane np. w FAQ w home.pl. 

Kiedy stosować .htaccess?

W przeszłości ten rodzaj konfiguracji mógł być stosowany tylko dla serwerów Apache. Teraz dzięki specjalnym modułom można stosować ten standard na innych serwerach np. nginx.

Nawet jeśli nasz serwer domyślnie wspiera .htaccess to plik dalej może nie działać bo ta opcja jest wyłączona. Możemy wtedy dostać np. błąd 500 (błąd serwera). W takim wypadku należy skontaktować się z adminem i zapytać czy włączony jest moduł mod_rewrite. Nie za każdym razem błąd 500 to kontakt z adminem bo czasem to Ty mogłeś/aś coś skopcić…

Kiedy nie stosować .htaccess?

Kiedy masz dostęp do głównych plików konfiguracyjnych serwera. Wtedy zmiany umieszczaj tam bo .htaccess wpływa na wydajność (bynajmniej nie przyśpiesza) serwera.

Jednak jeśli na serwerze jest wiele aplikacji to każda może wymagać oddzielnych reguł…

W skrócie, jak masz swój serwer to .htaccess  może być zbędny, jeśli wykupujesz hosting to już nie 🙂

Jak stworzyć plik .htaccess?

Zaczniemy od początku. Krok po kroku.

Edytor Tekstowy

Bardzo ważne jest użycie odpowiedniego edytora tekstowego. Nie może to być nic, co dodaje dodatkowe formatowanie. Dla użytkowników Windowsa polecane są np. Notepad++ lub notatnik.

Pamiętaj o użyciu kodowania tekstu UTF-8. Tutaj znowu kawałek z FAQ z home.pl. 

Ja używam Maca i kiedy stworzyłem plik w podstawowym edytorze tzn. TextEdit to plik nie działał… Jak się później okazało dodaje on jakieś formatki…

Alternatywną opcją jest edycja plików z poziomu managera na swoim serwerze. O co chodzi? Ja np. mam hosting w MyDevil i mogę w panelu za pomocą managera plików (Pydio) wejść na swój serwer. Tam mogę edytować wszystkie pliki online za pomocą ichniejszego edytora tekstowego. Uważam to za dobre rozwiązanie. Dlaczego? Bo odrazu widzę zmiany na stronie i nie muszę robić ciągle…

Upload(u) na serwer

Kiedy plik jest gotowy należy go wrzucić na serwer. Można zrobić to dowolnym klientem FTP. Ja zazwyczaj używam Filezilli ale… Ważne jest aby program wyświetlał nam ukryte pliki (bo taki jest .htaccess) i pomimo tego, że włączenie tej opcji powinno być proste (wystarczy sprawdzić np. Youtube) to u mnie nie działało… Próba naprawy takich rzeczy to często starta czasu…

Dlatego używam już wspomnianego managera na serwerze. Tam widzę ukryte pliki, edytor działa tak jak chcę i nie muszę za każdym razem wrzucać nowego pliku na serwer. Same plusy.

Jak nazwać plik?

Nazwa pliku ma na początku kropkę (.) co może powodować, że jeśli tworzymy go offline tak kropka sugeruje, że jest to plik systemowy. Jest wtedy automatycznie ukrywany. Nie pomaga to w pracy z plikiem. Kropka jest konieczna aby plik działał na serwerze ale…

Niektórzy pracując offline nie dają tej kropki a dodają ją po uploadzie na serwer. Dla ułatwienia.

Domyślną nazwą jest .htaccess jednak ze względów bezpieczeństwa plik może być nazwany inaczej. O tym potem.

Gdzie umieścić .htaccess?

Teraz zakładając, że plik jest gotowy to należy go umieścić w odpowiednim miejscu w projekcie. Należy to zrobić w folderze głównym obok pliku index.html. Będzie on wtedy działał na folder główny i wszystkie foldery podrzędne.

Jeśli potrzebujemy osobnych reguł dla dowolnego podfolderu należy umieścić tam osobny plik .htaccess.

Ufff… to by było tyle podstawowych informacji. Przydługawy ten wstęp. Mam nadzieję, że nie…

Plik .htaccess

Przejdźmy to tworzenia pliku. Robi się to poprzez dodawanie kolejnych wierszy odpowiadających za inne reguły. Wygląda to tak:

RewriteEngine On

DirectoryIndex index.html

Komentarze dodajemy za pomocą prefixu # np.

RewriteEngine On
# Ustawienie strony głównej
DirectoryIndex index.html

Potem dodaje się kolejno dodatkowe reguły. Proste?

Aby sobie to lepiej wyobrazić warto skorzystać z generatora .htaccess który tworzy nam kod z prostą konfiguracją:

GENERATOR 

Sprawdzanie pliku

Często może zdarzyć się tak, że zrobimy literówkę lub w pliku jest coś czego nie powinno być i wtedy serwer może wyrzucić nam błąd 500. I to jest taka sytuacja kiedy nie warto lecieć do admina tylko sprawdzić czy z plikiem jest wszystko ok. Jak to zrobić? Jeśli mamy punkt odniesienia to warto go do czegoś porównać. Dodatkowo są też narzędzia online które mogą nam pomóc:

TESTER 

Aplikacje jak powyższa mogą nie wspierać wszystkich komend ale może warto znaleść kilka różnych testerów aby się uzupełniały?

Reguły w .htaccess

Wspomniany powyżej generator jest bardzo użyteczny i szybko można stworzyć plik htaccess o podstawowej konfiguracji. Pomoc która tam jest też wyjaśnia o co chodzi w konkretnym zagadnieniu. Stworzę tutaj podobny plik.

Przekierowanie na https 

Aby przekierować komunikację między klientem a serwerem na szyfrowany port należy użyć:

#Przekierowanie na https
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://twojastrona.pl/$1 [R,L]

Ustawienie strony głównej

W sytuacji gdy w folderze nadrzędnym jest kilka plików które mogą zmylić przeglądarkę możemy zdefiniować w które powinny być używane jako pierwsze np.

#Ustawienie strony głównej
DirectoryIndex index.html index.php

Bloka dostępu

Jeśli chcemy zablokować dostęp do serwisu użytkownikom o określonym IP:

#Blokowanie użytkowników po adresie IP
order allow,deny
deny from 123.456.78.90
allow from 987.665.43.21

Komunikaty błędów

Komunikacja między klientem a serwerem może być zakłócona. Wtedy otrzymujemy określony numer błędu w zależności od tego co jest problemem. Te numery mają 3 cyfry i wyglądają mniej więcej tak:

1XX – kody informacyjne,

2XX – kody powodzenia,

3XX – kody przekierowania,

4XX – błąd po stronie aplikacji (np. nie ma takiej strony – 404 ),

5XX – błąd po stronie serwera

Teraz w zależności od rodzaju błędu możemy chcieć wyświetlić odpowiedni komunikat. Robi się to tak:

#Własna strona błędu 401
ErrorDocument 401 folder/error401.html
#Własna strona błędu 500
ErrorDocument 500 folder/error500.html

Powyżej po prostu definiujemy ścieżkę do pliku z widokiem błędu (np.folder/error401.html).

Przeglądanie katalogów z przeglądarki

Żeby ludzie nie mogli buszować po plikach wprowadzając dany adres katalogu:

#blokada przeglądania katalogów
Options -Indexes

Wtedy wyskoczy błąd 403. Jeśli chcemy to cofnąć to wtedy:

#zdjęcie blokady
Options +Indexes

Powiązania typów plików

Jeśli chcemy żeby wszystkie pliki .pdf na stronie otwierały się za pomocą danego programu:

#otwieranie plików pdf w domyślnym programie
AddType application/pdf .pdf

A wszystkie pliki .mp3 automatycznie się ściągały:

#automatyczne ściąganie plików mp3
AddType application/octet-stream .mp3

Zastrzeżenie dostępu hasłem

Jeśli chcemy aby konkretna część/plik w aplikacji był/a dostępna po wpisaniu hasła należy użyć formuły:

#ochrona plików hasłem
<Files folder/.htpasswd>
AuthType Basic
AuthUserFile style.css
Require valid-user
</Files>

Co się tam dzieje? Blokuję dostęp do pliku style.css. Lista użytkowników i haseł przechowywana jest w pliku .htpasswd do którego podaje się ścieżkę. Tworzy się go analogicznie jak .htaccess wpisując listę. Jak ją stworzyć? Użyj generatora haseł i wklej kod do pliku. Lub stwórz je sam 🙂

Nie należy mylić takiego rodzaju zastrzeżenia z tworzeniem normalnych kont użytkowników zapisanych w bazie danych 🙂

Ustawienie pamięci catche

Jeśli chcemy aby grafiki lub inne pliki ze strony były przetrzymywane w pamięci przeglądarki przez dany okres to używamy:

#kontrola catche
<IfModule mod_expires.c>
ExpiresByType image/gif „access plus 1 month”
ExpiresByType image/png „access plus 1 month”
ExpiresByType image/jpg „access plus 1 month”
ExpiresByType image/jpeg „access plus 1 month”
ExpiresByType text/html „access plus 0 seconds”
ExpiresByType text/xml „access plus 0 seconds”
ExpiresByType application/xml „access plus 0 seconds”
ExpiresByType application/json „access plus 0 seconds”
</IfModule>

Co więcej?

Zadań które możemy zdefiniować w pliku htaccess jest jeszcze wiele i nie sposób ich wszystkich wypisać. Chciałbym jednak poruszyć jeszcze jedną ważną kwestię…

.htaccess vs SEO

Jakiś czas temu napisałem wpis o SEO dla deweloperów. Otóż .htaccess wnosi dość dużo do tematu i warto o tym wiedzieć. Jedziemy z tym!

Linki User Friendly

Czasem linki do podstron przybierają formy dziwnych gąsienic np. www.costam.com/index.php?option=com_content&task=category§ionid=1&id=1&Itemid=2. Kto lubi na to patrzeć? Napewno ktoś się znajdzie ale roboty Google za tym nie przepadają. Przez to ranking spada Można to zmienić w .htaccess

Weźmy link z powyżej:

www.costam.com/index.php?option=com_content&task=category§ionid=1&id=1&Itemid=2

Używając tej formuły:

#Przykładowa formuła na link user friendly
RewriteRule ([^-]+)/(category)/([^-]+)-(.*)([0-9]+)$ index.php?option=&task=§ionid=&id=&Itemid= [L]

Otrzymujemy:

www.costam.com/com_content/category/1-12

Szczegółowa analiza powyższej reguły wymaga znajomości wyrażeń regularnych co nie jest częścią tego wpisu. Więcej info na ten temat w linkach na końcu.

Nowy link wygląda już znacznie lepiej dla algorytmów Google.

Przekierowanie 301

Jeśli chcemy zmienić ścieżki dostępu do plików (bo z jakiegoś powodu wymaga tego sytuacja) a nie chcemy stracić pozycjonowania w Google:

#Przekierowanie 301 dla domeny stara -> nowa
RewriteEngine On
RewriteRule ^(.*)$ http://nowastrona.pl/$1 [R=301,L]
#Przekierowanie 301 dla plików stary -> nowy
Redirect 301 /stary/image.png /nowy/image3.png
#Przekierowanie 301 dla katalogów stary -> nowy
RedirectMatch 301 /stary(.*) /nowy/$1

Duplikaty strony

Może dojść do sytuacji, że nasza strona otworzy się gdy wpiszemy w przeglądarce zarówno www.strona.pl jak i http://www.strona.pl. Choć nie jest to prawdą to roboty widzą tą stronę jako duplikat. A więc zawartość jest powielana… Ranking idzie w dół… Jak temu zaradzić?

Używamy przekierowania zarówno wersji z www w adresie jak i tych bez www. Robi się to tak:

#Przekierowanie na WWW
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^strona.pl [nc]
RewriteRule ^(.*)$ http://www.strona.pl/$1 [r=301,nc]

#Przekierowanie na bezWWW
RewriteCond %{HTTP_HOST} ^www.strona.pl$ [NC]
RewriteRule ^(.*)$ http://strona.pl/$1 [R=301,L]

Po takiej konfiguracji roboty będą widziały odpowiednią wersję.

Kompresja GZIP

Użycie kompresora przyśpiesza ładowanie się stron. Wykonałem mały test na swojej stronie. Najpierw sprawdziłem poziom kompresji TUTAJ a następnie test szybkości Google TUTAJ:

  1. Bez kompresji – Poziom kompresji – 0%, Mobile Speed 68/100, Desktop Speed 78/100.
  2. Po kompresji – Poziom kompresji – 70,2%, Mobile Speed 74/100, Desktop Speed 90/100.

Niezły wynik 🙂 Chyba warto? Jak tego dokonać?

Aby włączyć kompresję należy podejść do tego nieco inaczej w zależności od posiadanego serwera. INFO TUTAJ

Dla Apache może wystarczyć dodanie reguły do .htaccess

<IfModule deflate_module>
# Enable compression for the following file types.
AddOutputFilterByType \
DEFLATE&nbsp \
application/javascript \
text/css \
text/html \
text/javascript \
text/plain \
text/xml
</IfModule>

Jeśli chodzi o inne serwery sprawa wygląda trochę inaczej np. nginx musi mieć włączoną kompresję w pliku konfiguracyjnym serwera na co nie mamy wpływu ale dostawcy udostępniają włączenie tej opcji np. z poziomu konsoli. Dla przykładu w MyDevil można to zrobić TAK

Co dalej?

Jak widać plik .htaccess to bardzo szeroki temat pełen zawiłości niemniej daje on ogromne możliwości konfiguracji. W tym wpisie zaledwie zahaczyłem o to zagadnienie bo jest w nim jeszcze sporo do odkrycia.

Dodatkowe materiały

Poza linków które już się pojawiły wcześniej przy tworzeniu tego wpisu bardzo przydatne okazały się m.in. te strony:

https://magazynt3.pl/htaccess-bez-tajemnic-sztuczki-z-serwerem-Apache/

https://enterso.pl/konfiguracja-pliku-htaccess-a-pozycjonowanie-seo-triki-i-faq/

https://blog.lh.pl/najprzydatniejsze-reguly-htaccess-dla-wordpressa/

Czy oficjalna dokumentacja:

https://httpd.apache.org/docs/2.4/howto/htaccess.html

Podsumowanie

Dzisiejszy wpis pokazał jak dokonać podstawowych konfiguracji serwera za pomocą pliku .htaccess. Jestem przekonany, że jako Web Developer możesz użyć tej wiedzy do stworzenia czegoś takiego:


Bartek Cis

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?