181 - Cloudflare i WordPress - jak to działa?

Rób WordPressa to podcast, w którym znajdziesz inspiracje, porady i rozmowy z ludźmi ze świata WordPressa. Cześć, witaj w kolejnym odcinku podcastu Rób WordPressa. Dzisiaj temat taki trochę obok WordPressa, bo o samym WordPressie będziemy mówić stosunkowo niewiele. Natomiast porozmawiamy sobie o narzędziu, jakim jest Cloudflare. O tym, czym jest Cloudflare, do czego służy i jak może ci pomóc. Za chwilę, teraz chwila dla partnera mojego podcastu, czyli marki Cyberfolks, która dostarcza domeny i serwery pod Twojego WordPressa. Jeśli szukasz hostingu lub domeny zajrzyj na cyberfolks.pl, a na pewno znajdziesz coś dla siebie. Z kodem rabatowym podcast otrzymasz 20% rabatu na hosting WordPress.

Również ataki typu DDoS będą wyłapywane za pomocą infrastruktury Cloudflare'a i po prostu blokowane. Cloudflare działa w taki sposób, że jest on jakby pośrednikiem pomiędzy komputerem, smartfonem czy jakimś innym urządzeniem internauty, który wchodzi na twoją stronę, a tym serwerem, na którym leży twoja strona. Czyli jeśli masz np. stronę postawioną na Zenboxie, Cyberfolksie czy jakimkolwiek innym hostingu, No to Cloudflare wchodzi pomiędzy twojego klienta końcowego, a twój serwer i obsługuje ten ruch pomiędzy nimi. Pamiętam kilka lat temu jak tylko przewijał się temat Cloudflare na przykład na grupach facebookowych, to bardzo często padały takie stwierdzenia, że no jeśli strona jest na rynek polski to Cloudflare nie ma zupełnie sensu, bo tylko

Wydłużysz czas ładowania strony i zupełnie do niczego nie jest ci to potrzebne. I szczerze mówiąc przez długi czas jakoś tak do tego Cloudflare podchodziłem w taki sposób, że w zasadzie to można powiedzieć omijałem go. Wiedziałem, że jest, wiedziałem co mniej więcej robi, ale jakoś tak, powiedzmy, bokiem koło niego przechodziłem. W związku z tym, że te serwery Cloudflare pojawiły się również w Polsce, no to odpadł ten argument, że jeśli mam Cloudflare, no to będę się łączył Z Polski do Polski, ale na przykład przez Niemcy czy przez Hiszpanię. Zupełnie nam to odpada, no bo w tym momencie mamy serwery Cloudflare w Warszawie. I działa to po prostu tak, że najpierw przeglądarka nawiązuje połączenie z serwerami Cloudflare'a, a potem w określonych przypadkach z naszym serwerem, tym na którym mamy wrzuconą stronę, czyli tak zwanym Originem.

Omówmy sobie tutaj teraz kilka takich kluczowych funkcji, które mogą nam się przydać z punktu widzenia właściciela strony na WordPressie. Jedną z takich funkcji jest CDN, czyli Content Delivery Network. Jest to taka funkcja, która w swoim założeniu ma zapewnić to, że jeśli mamy stronę, która jest kierowana np. na jakiś szeroki obszar geograficzny, załóżmy całą Europę czy cały świat, No to chodzi o to, żeby skrócić dystans taki fizyczny między człowiekiem, który odwiedza taką stronę, a serwerem, który serwuje tą stronę. I w tym momencie, będąc na przykład gdzieś za granicą, łącząc się z taką stroną, niektóre pliki zostaną podane z serwera takiego lokalnego gdzieś tam na przykład w Stanach, a nie z serwera oryginalnego, który stoi w Polsce, na którym te pliki leżą.

No i w drugą stronę oczywiście działa to tak samo, jeśli Jeśli łączymy się do jakiejś, powiedzmy, usługi czy serwera, który jest w Stanach, no to ten CDN ma nam zapewnić to, że jeśli tylko to możliwe, no to te pliki zostaną nam podane z tych najbliższych serwerów, które są najbliżej nas, przez co po prostu te czasy odpowiedzi również się skrócą. I ten CDN może działać w ten sposób, że może nam podawać wszystkie pliki statyczne, to znaczy obrazki, jakieś pliki JavaScript, CSS i tak dalej. I tutaj to ma też taką funkcję, która odciąża nasz serwer, nasz hosting, no bo w momencie, w którym ktoś wchodzi na tą naszą stronę, otwiera ją, ładuje sobie te wszystkie asety, grafiki i tak dalej, no to nie łączy się już bezpośrednio do naszego serwera, tylko na poziomie Cloudflare ta zawartość jest cache'owana i błyskawicznie po prostu serwery Cloudflare podają taką treść do przeglądarki danego użytkownika, który wchodzi na taką stronę.

Oczywiście to działa tak domyślnie z plikami statycznymi. Natomiast można sobie to skonfigurować również w oparciu o całe strony WordPressowe, czyli będzie to działało mniej więcej tak, jakbyśmy zainstalowali taką klasyczną wtyczkę cachującą do WordPressa, która zrzuca nam po prostu całą stronę do np. jakiegoś pliku statycznego i podaje nam ten plik zamiast generować całą strukturę HTML-a i całą stronę. Oczywiście ma to swoje ograniczenia, no bo wtedy ten content Jest gdzieś tam zapisany pomiędzy i pewne funkcje mogą na przykład działać nieprawidłowo. Jeśli mielibyśmy sytuację, w której chcemy na przykład wyświetlić jakieś dynamiczne elementy, które przy każdym wejściu na stronę wyświetlają inne dane, no to musimy już pomyśleć jak to zrobić, bo taka klasyczna wersja strony, która generuje nam różny content, no tu się nie sprawdzi z tego względu, że to co się raz skeszuje na poziomie Cloudflare'a,

No to już będzie podawane do końcowych użytkowników w takiej formie i ten serwer oryginalny nie będzie w ogóle odpytywany. Drugą funkcją, na którą myślę warto zwrócić uwagę, to jest po pierwsze analiza ruchu sieciowego jaki trafia na naszą stronę. I mam tu na myśli po pierwsze analizę pod kątem takim, jakie adresy są odwiedzane, gdzie ten ruch idzie, ale też skąd ten ruch idzie. Możemy sobie obserwować jak Jak poszczególne państwa na przykład, jeśli tak zastosujemy taki podział geograficzny. Jaki udział mają poszczególne państwa, znaczy ruch z tych państw. I ostatnio właśnie miałem taki przypadek, gdzie jakiś bot, który łączył się po dajże z Singapuru, gdzieś w Azji w każdym razie i skanował stronę, powodował bardzo duże problemy wydajnościowe.

Właśnie na stronie opartej o WordPressa i WooCommerce'a wiązało się to po prostu z tym, że ten bot generował bardzo, bardzo duży ruch i akurat skanował jakieś podstrony, które miały bardzo rozbudowane filtry, więc co za tym idzie, no raz, że były generowane dynamicznie, a dwa, że też baza danych miała tam co robić. I dzięki temu właśnie mogłem sobie zobaczyć, co tam się dzieje. Też w tych statystykach widzimy, jakiego to jest rodzaju ruch. Tam akurat okazało się, że to był bot i mogłem po prostu wyciąć taki ruch z takiego bota, no bo on był mi zupełnie niepotrzebny. Oczywiście z tym wycinaniem ruchu też musimy bardzo uważać, żeby nie wyciąć jakiś pożytecznych botów, choćby

Warto też wspomnieć, że Cloudflare daje nam w pakiecie certyfikat SSL. To oni odpowiadają za wystawienie tego certyfikatu i za to, żeby całe połączenie było szyfrowane. I teraz pewnie zastanawiacie się, ok, dobra, ale jak to wszystko połączyć, żeby to działało, jeśli ten Cloudflare ma być między moim serwerem a moimi... Konfiguracja Cloudflare jest bardzo prosta i jeśli mamy sytuację, w której mamy, powiedzmy, obecnie hosting w jakiejś tam dowolnej firmie, można powiedzieć, mamy tam na przykład pocztę i wszystko inne, co jest związane z daną domeną.

No to wystarczy, że w panelu Cloudflare podczas dodawania strony przepniemy tylko serwery DNS, czyli te serwery, które obsługują całą strefę DNS dla naszej domeny. Z tych serwerów, które są obecnie, czyli załóżmy mam hosting w Zenboxie i tam cała strefa DNS jest obsługiwana, no to w tym momencie przepinam te serwery DNS z tych Zenboxowych na serwery Cloudflare. A Cloudflare automatycznie zaciąga sobie całą konfigurację tej strefy DNS do siebie i wszystkie usługi działają tak jak do tej pory. Oczywiście tutaj na przyszłość trzeba pamiętać, że jeśli chcielibyśmy zmienić jakieś rekordy DNS dotyczące choćby rekord SPF przy integracji jakiegoś narzędzia do wysyłki maili, no to już musimy pamiętać, że robimy to wtedy na Cloudflare, a nie na naszym hostingu czy tam gdzie

Ogólnie było to coś około pół sekundy, około 500 milisekund i kakao powiedzmy między tam załóżmy 530 a 450 taki zakres mniej więcej. No i testowałem to oczywiście w dwóch konfiguracjach. W konfiguracji takiej, w której łączę się bezpośrednio do mojego hostingu. No to był zwykły hosting na ZenBoxie, zwykłe konto hostingowe, nic wymyślnego. A drugi test, no to oczywiście w momencie, w którym ten ruch przechodzi przez Cloudflare'a. I szczerze mówiąc, jakbym zrobił ślepy test, nie wiedziałbym, który jest który. To znaczy nie wiedziałbym, kiedy się łączy przez Cloudflare'a, nie wiedziałbym, kiedy się łączy bezpośrednio do serwera. Czyli myślę, że można uznać, że nie ma tutaj za bardzo jakiegoś wpływu na to, jak szybko się łączymy do tego serwera.

Nie ma tu jakiegoś narzutu na zasadzie takiej, że Jeśli idzie przez Cloudflare to jest powiedzmy zawsze 103-150 milisekund większy czas. To było zupełnie tak randomowo i skakało to zarówno w przypadku bezpośredniego połączenia jak i połączenia przez Cloudflare. Więc uznałem, że w takich warunkach praktycznych jest to pomijalny narzut. Natomiast trochę inny test, znaczy w założeniach taki sam, z tym, że łącze miałem dużo gorsze, bo byłem połączony przez albo 5G Orange'a, po prostu przez iPhone'a miałem hotspota wystawianego, bo byłem akurat gdzieś tam w miejscu, w którym nie było żadnego Wi-Fi dostępnego ani innego łącza.

Ale tak jak mówię, to jest taka luźna rozminka, nie poparta niczym dosłownie, bo ani nie jestem ekspertem od sieci. I tak jak powiedziałem, po takim skonfigurowaniu podstawowym tego Cloudflare'a mamy efekt taki, że te pliki statyczne Są serwowane właśnie za pomocą tego CDN-a, czyli z serwerów Cloudflare. Zresztą jak sobie otworzymy DevTools-y w przeglądarce i tą zakładkę sieć, no to tam widzimy w nagłówkach odpowiedzi, że mamy po prostu nawet jakiś tam id plus trzyliterowy skrót centrum danych, z którego ten plik pochodzi i też status do Chroma.

Możecie sobie też zainstalować wtyczkę. Która Wam będzie wyświetlała taką ikonkę i chmurkę ze statusem. Po prostu czy Cloudflare skeshował Wam daną stronę, czy nie, czy może jest ten tryb dynamic, czyli puszcza ruch dalej do tego serwera oryginalnego, do tego origina tak zwanego. I wtedy nie musimy nawet zaglądać do devtoolsów, tylko widzimy kiedy mamy hit, czyli treść podaną z Cloudflare, a kiedy mamy jakiś inny status. I oczywiście możemy sobie teraz skonfigurować to wszystko tak, żeby nam też cashowało te podstrony statyczne, można powiedzieć, czy wpisy blogowe. Tak jak powiedziałem, jeśli mamy np. stronę firmową, no to wszystko może być cashowane przez Cloudflare'a i bez problemu wtedy ten nasz serwer na dobrą sprawę nawet nie musi działać, bo jest coś takiego w Cloudflare'e jak tryb Always Online.

Czyli nawet jeśli ten nasz serwer by się wyłożył, to strona będzie działała normalnie, bo Cloudflare będzie podawał tą ostatnio zapamiętaną wersję. Oczywiście tutaj z tym cashowaniem na tym CDN-ie Wiąże się też parę takich pułapek i oczywiście to, że ten content nie będzie nam się odświeżał jest jedną z takich podstawowych pułapek i jednym z podstawowych problemów, no bo jeśli zmienimy coś w naszym WordPressie, no to wypadałoby, żeby nasi użytkownicy widzieli tą zmianę na stronie. A niestety domyślnie ten cache ileś tam jest przechowywany w pamięci Cloudflare'a, ale oczywiście jak do wszystkiego w WordPressie mamy do tego wtyczkę oficjalną od Cloudflare'a plus inne różne wtyczki, które też się integrują z tą usługą, które są w stanie wyłapać ten moment edycji i wyczyścić ten cache Cloudflare'owy tak, że już nie musimy zaglądać do panelu Cloudflare'a.

Oczywiście moglibyśmy robić to na zasadzie takiej, że Po każdej zmianie na stronie, po każdej edycji logujemy się do panelu Cloudflare i czyścimy cache, ale byłoby to trochę bez sensu. Jak możemy robić to dokładnie tak samo, a w zasadzie może to robić nasz WordPress wysyłając odpowiedni request do API Cloudflare i czyszcząc nam. Zawartość tego cache'a i wtedy na nowo sobie Cloudflare zapamiętuje te treści z naszej strony, przez co ten content zawsze jest aktualny. I tutaj w tym trybie ta nasza strona może bardzo, bardzo przyspieszyć, bo nawet jeśli ten WordPress jest fajnie zrobiony, jest szybki i tak dalej, no to jakby nie patrzeć, musimy wygenerować całego tego HTML'a, podnieść całego tego WordPressa.

No a tutaj cashując go na Cloudflare możemy uzyskać czasy TTFB rzędu nawet 40-50 milisekund. Takie czasy miałem gdzieś tam podczas moich testów, więc to nie jest żaden problem i też możemy obsłużyć bardzo, bardzo duży ruch. Jeśli np. macie jakiś taki case, że spodziewacie się dużego piku ruchu, czy ogólnie macie stronę, która generuje bardzo duży ruch, no to warto ją przygotować tak, aby mogła pracować właśnie z takim Kaszowanie na poziomie Cloudflare'a. Oczywiście musimy tutaj też wykluczyć pewne ścieżki takie jak choćby wp-admin czy na przykład zrobić wykluczenie po ciasteczku, bo Cloudflare daje też takie możliwości, że jeśli Zobaczy, że mamy jakieś ciastko odpowiedzialne za logowanie w WordPressie, czyli wykryje to, że jesteśmy zalogowani, no to oczywiście wtedy puszcza ten ruch do WordPressa bez żadnego cache'a, żebyśmy nie mieli żadnego problemu.

Oczywiście tak samo wszelkie rzeczy związane choćby z Rest API. Names mentioned. Names mentioned. Names mentioned. I takie rzeczy oczywiście również możemy sobie wykluczyć na poziomie tych reguł. Ja nie będę tutaj się za bardzo zagłębiał w te wszystkie reguły, bo ich jest naprawdę dużo i tam możemy decydować o wielu, wielu różnych rzeczach, ale myślę, że spokojnie dokumentacja Cloudflare czy jakieś inne materiały pomogą Wam, jeśli potrzebowalibyście zrobić jakiś taki już bardziej skomplikowany setup na Cloudflare i na WordPressie.

Wydaje mi się, że poruszyłem takie najważniejsze aspekty i w ogóle przybliżyłem Wam to zagadnienie i czym ono jest. Tak podsumowując ten nieco chaotyczny odcinek, na ten moment, jeśli ktoś by mnie zapytał, czy warto używać Cloudflare, to Bez wątpienia powiem, że tak, bo tak jak mówię raz to jest ten aspekt bezpieczeństwa monitoringu tego ruchu, a dwa to jest też kwestia wydajności i optymalizacji dostarczania tego naszego contentu do naszych użytkowników końcowych. Oczywiście z zastrzeżeniem tego, że należy pamiętać, że jeśli mamy jakieś dynamiczne elementy na stronie, no to tu już trzeba się wykazać troszkę większą uważnością i też znajomością tych mechanizmów, żeby zrobić odpowiednie wykluczenia, czy żeby odpowiednio to skonfigurować.

Natomiast dla takich prostych stron firmowych, które nie mają za wiele dynamicznych elementów, myślę, że jest to świetna opcja. Tak samo ten cache na poziomie Cloudflare. Przyspieszy nam stronę bardzo, bardzo i to faktycznie jest bardzo odczuwalna różnica, już pomijając wszelkie jakieś tam narzędzia do mierzenia tego performance'u, no to w momencie jak wchodzimy na taką stronę, która jest cache'owana na poziomie Cloudflare'a, to po prostu widzimy, że ona błyskawicznie nam się ładuje. No i warto też pamiętać o tym, że taki poprawnie skonfigurowany cache na poziomie Cloudflare'a Darmowy pakiet Cloudflare wystarczy.