Nieograniczona skala i bezpłatny hosting z GitHub Pages i Cloudflare

Mam sekret, który pozwala moim klientom zaoszczędzić mnóstwo pieniędzy, zapewnia bezpieczeństwo ich witryny i ma wbudowane kopie zapasowe.

Sekret: robię ich stronę statyczną. Następnie przechowuję i hostuję go za pomocą GitHub i używam Cloudflare do obsługi przez HTTPS i przyspieszania. Moi klienci płacą tylko za nazwę swojej domeny, a dostają znacznie więcej, niż kiedykolwiek się spodziewali.

Dlaczego treści statyczne?

Witryny statyczne są cudownie szybkie, ponieważ nie wymagają czasu przetwarzania przez serwer. Ponadto, zatwierdzając bazę kodu zasobów statycznych w repozytorium git, wycofywanie zmian staje się po prostu kwestią powrotu do poprzedniego zatwierdzenia. Kopie zapasowe są git push , a zasadniczo obsługujesz całą witrynę z pamięci podręcznej, co oznacza, że ​​Twój serwer prawie nigdy nie będzie musiał ponownie przetwarzać żądania.

Budujesz złożony interfejs użytkownika?

Wraz z pojawieniem się front-endowych frameworków, takich jak React i jego krewni, możesz tworzyć magiczne doświadczenia za pomocą tylko HTML/CSS i JavaScript. Będziesz musiał jednak oddzielić logikę back-endu od front-endu, ale nawet Ruby on Rails jest teraz wyposażony w tryb API.

Za każdym razem, gdy mam umowę na budowę strony internetowej, zastanawiam się, czy strona statyczna jest wystarczająca, aby zaspokoić potrzeby mojego klienta, i w wielu przypadkach tak właśnie jest.

Zastanawiasz się, jakie przypadki użycia mam na myśli? Świetnie! Omówmy kilka sytuacji, w których warto rozważyć zawartość statyczną, i wyjaśnijmy, w jaki sposób takie podejście może zaoszczędzić czas zarówno Tobie, jak i Twojemu klientowi.

Strony z broszurami

Witryny z broszurami mają na celu dostarczanie informacji o firmie i nie zmieniają się znacząco w ciągu ich życia. Dynamiczna aplikacja to zdecydowanie przesada w przypadku takich witryn, a ponieważ te witryny pozostają nieutrzymywane przez lata, otrzymując niewiele, jeśli w ogóle żadnych aktualizacji, zwykle są łatwym celem dla hakerów, cóż, włamań.

Statyczne szablony HTML są znacznie tańsze niż ich odpowiedniki w systemie CMS i łatwiej je dostosować w przyszłości. Deweloperzy poproszeni o aktualizację takich witryn nie wymagają specjalistycznej wiedzy na temat konkretnego systemu CMS. Z reguły zawsze tworzę statyczne strony internetowe dla stron z broszurami.

Bonus: małe firmy uwielbiają nie płacić powtarzających się miesięcznych opłat za hosting. To prawda, hosting nie jest ogromnym kosztem, ale klienci po prostu nie muszą zawracać sobie głowy płaceniem za domenę, co jest świetne.

Aplikacje jednostronicowe

Czy popisujesz się wspaniałą, fajną nową aplikacją, która opiera się na nowoczesnych frameworkach front-end?

Twoja aplikacja jest już w większości statyczna. Wykonaj kilka dodatkowych kroków, aby wyizolować dowolną logikę po stronie serwera do oddzielnej aplikacji i uzyskać pełne korzyści z obsługi aplikacji w całości z pamięci podręcznej Cloudflare.

Twoja aplikacja będzie dostępna przez cały czas.

Blogi

To trudna sprzedaż. Ciężko przekonać ludzi, że statyczne strony mogą być wykorzystywane do blogów, ale przeczytaj mnie – nie zszedłem na głęboką wodę.

Blogi to nic innego jak treści renderowane za pomocą szablonów. Po prostu nie potrzebujesz pełnej aplikacji analizującej każde żądanie i renderującej nową stronę. Witryna statyczna jest idealna do tego przypadku użycia.

Rozważ Jekylla. Dajesz mu szablony Liquid i zawartość Markdown, a następnie łączy je w statyczną stronę internetową. Nie jest wymagane przetwarzanie w locie, a Twój blog nagle wydaje się znacznie szybszy.

Ten przepływ pracy jest szczególnie przydatny, ponieważ strony GitHub obsługują kompilacje Jekyll. Nagle posty na blogu mogą być przesyłane za pomocą żądań ściągnięcia, a cała zawartość jest przechowywana pod kontrolą wersji. Osoby, które nie są programistami, mogą nadal dodawać posty w Markdown, publikując je za pośrednictwem Stackedit.

W rzeczywistości używam Stackedit do skomponowania tego posta już teraz!

Ponadto, jeśli chcesz komentować swoje posty na blogu, Disqus zapewnia potężny system komentarzy, wstawiając fragment kodu JavaScript.

Ta strona, którą czytasz, również używa Disqus.

Strony GitHub

GitHub Pages jest odpowiedzią GitHub na strony projektów i umożliwia obsługę dowolnej statycznej witryny bezpośrednio z repozytorium. Ponieważ strony GitHub obsługują domeny niestandardowe, możesz bezpłatnie hostować statyczną witrynę internetową na stronach GitHub z wdrożeniami bezpośrednio z Git.

Wdrażanie na stronach GitHub.

Dość gadania, zobaczmy to w akcji!

Poszedłem dalej i stworzyłem pojedynczą aplikację React, która pobiera i wyświetla aktualny kurs wymiany rupii pakistańskiej z publicznego interfejsu API. Wdróżmy to na GitHub Pages.

Najpierw utwórzmy nowe repozytorium GitHub.

Strony GitHub są obsługiwane z gałęzi o nazwie gh-pages , więc stwórzmy ją dla mojego projektu.

 $ git checkout -b gh-pages Switched to a new branch 'gh-pages'

I podnieśmy stronę w górę:

 $ git remote add origin [email protected]:amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages

I gotowe! W tym momencie strona będzie dostępna pod https://amingilani.github.io/price-check z bezpłatnym SSL:

Ważne rzeczy do zapamiętania:

• Strony GitHub udostępniają plik index.html w gałęzi gh-pages Twojego projektu
• Strona jest obsługiwana pod adresem NAZWA UŻYTKOWNIKA.github.io/NAZWA- USERNAME.github.io/REPOSITORY-NAME

Dostosowywanie nazwy domeny.

Udostępnianie witryny poza GitHub jest w porządku, ale każda przyzwoita witryna wymaga niestandardowej nazwy domeny. Na szczęście GitHub pozwala Ci przywieźć własną domenę na imprezę!

Najpierw utwórzmy specjalny plik CNAME i umieśćmy tam naszą nazwę domeny. Dzięki temu GitHub będzie wiedział, którą nazwę domeny skierować do repozytorium.

 $ echo 'pricecheck.gilani.me' > CNAME $ git add . $ git commit -m 'Add a custom domain' ... $ git push ...

Po drugie, skierujmy CNAME dla naszej subdomeny na DNS GitHub w USERNAME.github.io :

Uwaga: NIE używaj tego dla domeny apex! Dodanie rekordu CNAME do katalogu głównego domeny spowoduje wyłączenie rekordów MX i TXT . Użyj tego tylko dla swojej subdomeny. Domeny Apex zostaną omówione później.

W tym momencie nasza strona internetowa powinna działać w naszej niestandardowej domenie w HTTP:

Ważne rzeczy do zapamiętania:

• Domyślna domena *.github.io jest obsługiwana przez HTTPS.
• Nasza niestandardowa nazwa domeny jest obsługiwana przez niezabezpieczony protokół HTTP.
• NIE używaj rekordu CNAME w swojej domenie apex, chyba że chcesz zabić swoje e-maile.

Ograniczenia stron GitHub:

• Rozmiar pliku repozytoriów musi być mniejszy niż 1 GB.
• Witryny muszą mieć rozmiar pliku mniejszy niż 1 GB.
• Miesięczny limit przepustowości wynosi 100 GB. Pominiemy to później.

Używanie domeny apex jako domeny niestandardowej

Najłatwiejszym sposobem na obejście tego ograniczenia jest użycie www jako subdomeny i przekierowanie całego ruchu HTTP z wierzchołka do www . W moim przykładzie przekierowałbym gilani.me na www.gilani.me , który wskazuje na moją statyczną witrynę, ale nie lubię robić rzeczy w prosty sposób.

Jeśli naprawdę chcesz korzystać z domeny wierzchołkowej, sprawdź, czy Twój dostawca DNS umożliwia ustawienie rekordów ANAME . Są one (uproszczone) w połowie drogi między rekordami CNAME , ponieważ umożliwiają wskazywanie domen i rekordami A , ponieważ nie unieważniają innych rekordów w tej samej strefie.

Nie ANAME ? Ostatnią opcją jest zmiana dostawcy DNS, który to obsługuje: wprowadź Cloudflare. Cloudflare zapewnia spłaszczanie CNAME w domenach wierzchołkowych, co jest odpowiednikiem rekordu ANAME . Najlepiej dokonać zmiany już teraz, ponieważ w następnej sekcji omówimy Cloudflare.

TLDR : Przełącz się na darmowy DNS Cloudflare i ustaw CNAME w swojej domenie wierzchołka. Robią coś specjalnego ze swoim CNAME , co sprawia, że ​​to działa.

SSL i Cloudflare

Witamy w erze post-Snowdena. Wszystkie nasze najgorsze obawy dotyczące usankcjonowanego przez rząd podsłuchiwania i włamywania się zostały potwierdzone, a świat stara się zabezpieczyć dane w trakcie przesyłania i w spoczynku.

Od nowoczesnych administratorów stron internetowych oczekuje się, że zapewnisz co najmniej SSL w swojej witrynie, bez zawartości mieszanej .

Doszło do punktu, w którym Google Chrome oznacza zwykłe witryny HTTPS jako niezabezpieczone, a wyszukiwarka Google zaczyna faworyzować witryny HTTPS w swoich rankingach. Później omówimy jeszcze więcej strategii zabezpieczania interfejsu użytkownika, ale na razie zajmiemy się tylko SSL.

Na szczęście mamy teraz Let's Encrypt.

Jest to całkowicie zautomatyzowany urząd certyfikacji (CA) typu non-profit, który umożliwia programowe wydawanie krótkoterminowych 90-dniowych certyfikatów SSL dla dowolnych domen, które kontrolujesz. To proste w użyciu; to open source; a projekt jest wspierany przez wiele firm, w tym Mozillę i Electronic Frontier Foundation.

Dobre wykorzystanie Cloudflare

Cloudflare to usługa ochrony DNS, CDN i DDoS.

Buforuje Twoją witrynę i udostępnia ją użytkownikom z serwerów znajdujących się w pobliżu, dzięki czemu Twoja witryna jest szybsza. Dodatkową zaletą jest to, że nie przekraczasz limitu przepustowości GitHub 100 GB, ponieważ nawet jeśli Twoja witryna stanie się szalenie popularna, większość żądań trafi do pamięci podręcznej i nigdy nie dotrze do serwera.

Ponadto Cloudflare oferuje usługę o nazwie Universal SSL, w której wydaje bezpłatny certyfikat SSL od swoich partnerów CA, dzięki czemu otrzymujesz HTTPS za darmo… na zawsze.

Dlaczego Cloudflare?

Wiem, o czym myślisz: Gilani, właśnie powiedziałeś mi, jak niesamowite jest Let's Encrypt. Dlaczego mówisz o Cloudflare? Cóż, wszystko sprowadza się do prostoty.

Jako ćwiczenie umysłowe wyobraź sobie skonfigurowanie wielu pamięci podręcznej Nginx i odwrotnych serwerów proxy na całym świecie, dając im wszystkie ważne certyfikaty SSL i obsługując strony internetowe użytkowników z ich najbliższych lokalizacji.

Powoduje to, że Twoja witryna jest obsługiwana przez SSL, nawet jeśli serwer pochodzenia nie ma certyfikatu SSL, chociaż Cloudflare zapewnia specjalne certyfikaty z podpisem własnym, które możesz umieścić na serwerze pochodzenia, aby zabezpieczyć połączenie z serwerami Cloudflare. To właśnie daje Ci Cloudflare z darmowym planem i nie musisz nawet odnawiać swojego certyfikatu co 90 dni.

Jako freelancer pozyskuję klientów, którzy chcą jak najszybciej uruchomić witrynę dla swojej firmy. Nie rozumieją ani nie przejmują się kwestiami bezpieczeństwa, nękającymi współczesną sieć lub szyfrowaniem podczas przesyłania. Niektórzy klienci mają trudności ze zrozumieniem idei nazw domen i denerwują się, gdy muszą zapłacić roczną opłatę w wysokości 15 USD „tylko po to, aby moja witryna działała”. Spróbuj więc wyjaśnić im, dlaczego muszą płacić za klaster odwrotnych serwerów proxy chroniący ich witrynę internetową, która sama działa na bezpłatnym hostingu.

Konfigurowanie Cloudflare SSL

Znowu ubrudźmy sobie ręce. Pierwszą rzeczą do zrobienia jest przejście na routing całego ruchu przez Cloudflare:

Następnie w obszarze Crypto ustaw poziom SSL na „Pełny”.

Wymuś „Automatyczne przepisywanie HTTPS”, aby zabić ostrzeżenia o mieszanej zawartości.

W tym momencie nasza strona internetowa będzie działać zarówno przez HTTP, jak i HTTPS. Wymuśmy HTTPS dla wszystkiego w naszej domenie.

Wszystko gotowe. Nasza strona internetowa powinna zawsze ładować się przez HTTPS z zieloną oceną „Secure” w Chrome.

Końcowe słowa i względy bezpieczeństwa

Jest kilka rzeczy, których nie omówiłem powyżej i chciałbym poświęcić chwilę na wyjaśnienie kilku punktów.

Bystrzy z was zwrócą uwagę, że z tą konfiguracją wiąże się kilka rażących problemów z bezpieczeństwem, a mianowicie brak bezpiecznych nagłówków HTTP, takich jak:

• Content-Security-Policy : ładuje skrypty i zasoby z białej listy hostów i może zabronić wbudowanego js.
• X-Frame-Options : wyłącza ładowanie witryny w ramce iframe.

I masz rację. Strony GitHub, a nawet Cloudflare nie pozwalają na dostosowanie nagłówków HTTP . Możesz jednak ustawić dostawcę CSP za pomocą meta HTML.

Po prostu wstaw to na swoją stronę internetową:

 <meta http-equiv="Content-Security-Policy" content="default-src https:">

Jednak w tej chwili nie ma praktycznego sposobu na ustawienie nagłówka X-Frame-Options na stronach GitHub, co oznacza, że ​​osoba atakująca może załadować Twoją stronę internetową do specjalnie spreparowanego elementu iframe i przeprowadzić atak XSS. Jeśli jesteś oddany, możesz obejść ten problem, prosząc użytkowników o potwierdzenie hasła lub tokena funkcji 2FA przy każdym poufnym działaniu lub przekazując token CSRF po każdym uwierzytelnionym żądaniu.

Poważnym problemem dla niektórych jest to, że korzystając z bezpłatnych publicznych repozytoriów na GitHub, Twoja witryna i kod źródłowy są dostępne dla każdego, kto chce je rozwidlić lub pobrać. Więc myślę, że troska jest tutaj niesłuszna.

Treść statyczna nie jest kodem źródłowym w tym sensie, że nie jest kompilowana ani przetwarzana jako skrypt przed udostępnieniem użytkownikowi. Twój użytkownik otrzyma dokładnie tę samą statyczną kopię witryny, jeśli uruchomi robota indeksującego wskazującego na Twoją witrynę. Chociaż hostowanie kodu w repozytorium GitHub z pewnością ułatwia pobranie kopii Twojej witryny, nie ujawnia niczego, co nie było jeszcze publiczne.

Skalowanie, nieograniczone skalowanie

Pomysły przedstawione w tym artykule nie ograniczają się do bezpłatnego hostingu małych aplikacji.

Możesz zbudować warstwę front-end w oparciu o nowoczesny framework JavaScript, podłączyć ją do wielkoskalowego Backend-as-a-Service (BaaS), takiego jak Firebase, i tworzyć złożone aplikacje bez martwienia się o serwery, czas pracy, lub jakikolwiek inny problem związany z infrastrukturą.

Tworzenie nowej ekscytującej gry internetowej?! Sprawdź GameSparks i gotowe.

Podsumowanie, spowiedź i linki

W tym artykule sprawiłem, że wyglądało to tak, jakbym ręcznie opublikował moją aplikację React na gh-pages . Nie zrobiłem czegoś takiego. Pracowałem nad master i kiedy nadszedł czas na wdrożenie, uruchomiłem npm run deploy skrypt budujący i wypchnął build do gh-pages . Proszę zobaczyć master gałąź mojego repozytorium, aby zobaczyć, jak to działa.

Na wynos

Plusy:

• Natychmiastowe wdrożenie
• Łatwa współpraca
• Bezpieczne środowisko hostingowe

Zastrzeżenia:

• Brak dostępu do nagłówków HTTP
• Łatwe do pobrania kopię strony internetowej
• Wymagana wiedza GitHub
• Zależy od dostawców technologii

Spinki do mankietów:

• Kod źródłowy mojej aplikacji znajdziesz na stronie amingilani/price-check
• Ta aplikacja jest dostępna na pricecheck.gilani.me i powinna być dostępna bezterminowo.