Jak hostować witrynę bezserwerową za pomocą AWS CloudFront i S3?

Jeśli chcesz uruchomić stronę internetową w AWS, możesz nawet nie potrzebować serwera! CloudFront CDN AWS ​​może obsługiwać statyczne treści internetowe bezpośrednio z zasobnika S3, co pozwala płacić tylko za żądania i przesyłane dane (które mogą być nawet bezpłatne).

Jak działa hosting bezserwerowy?

„Serverless” to koncepcja uruchamiania aplikacji bez samodzielnego zarządzania dedykowanymi serwerami Linux, zwykle za pośrednictwem rozwiązania platformy jako usługi, takiego jak AWS App Runner lub Lambda Functions. Chociaż możesz uruchomić normalną aplikację, taką jak NGINX, na maszynie wirtualnej EC2, zwykle możesz obsługiwać tę samą aplikację bez uruchamiania serwerów.

To konkretne rozwiązanie bezserwerowe wykorzystuje Simple Storage Service (S3) AWS do hostowania statycznej zawartości witryny, zamiast obsługiwać ją samodzielnie z serwera NGINX. „Statyczny” oznacza po prostu, że obsługujesz pliki, a nie tworzysz strony zawierające zarówno proste witryny HTML + CSS, jak i pełne aplikacje internetowe JavaScript po stronie klienta. W szczególności nie obejmuje to platform hostingowych po stronie serwera, takich jak WordPress (PHP), Ruby on Rails i ASP.NET, ale wiele witryn internetowych będzie zawierać tylko zawartość statyczną.

Zaletą tego rozwiązania jest zerowa zależność od własnych serwerów – S3 zawsze odpowiada na żądania, dzięki czemu tyle osób, ile chcesz, może uzyskać dostęp do Twojej witryny. Przed S3 możesz korzystać z CloudFront, rozwiązania AWS Content Delivery Network (CDN). CloudFront wykorzystuje setki pamięci podręcznych brzegowych, wszystkie buforowane dla Ciebie w S3, zwiększając opóźnienia i przepustowość przy jednoczesnym obniżeniu kosztów.

W tej konfiguracji sieci wszystko, co obsługuje żądania użytkowników, jest całkowicie bezserwerowe. Serwery CloudFront są zarządzane przez AWS i automatycznie buforują zawartość oraz kierują użytkowników do punktu końcowego, który jest tylko zasobnikiem S3.

Jeśli potrzebujesz uruchomić jakiś backend lub interfejs API, aby połączyć swoją aplikację internetową, prawdopodobnie możesz użyć do tego innych narzędzi bezserwerowych, takich jak Lambda Functions. Ta konfiguracja jest jeszcze lepsza, ponieważ żądania S3 i API będą skalowane osobno.

Jeśli chcesz dowiedzieć się więcej o używaniu API Gateway jako frontonu dla funkcji Lambda, możesz przeczytać nasz przewodnik, jak to skonfigurować.

Chociaż jest to proste, jest to w rzeczywistości dobra konfiguracja klasy korporacyjnej do hostowania zawartości statycznej w AWS. Będzie solidny, wysoce skalowalny, a nawet może być używany z automatycznym wdrażaniem CodePipeline do aktualizowania witryny z plików źródłowych.

Ile to kosztuje?

Ponieważ hosting bezserwerowy skaluje się dokładnie tak, jak go używasz, płacisz tylko za to, z czego korzystasz. Dzięki temu możesz zaoszczędzić sporo pieniędzy na serwerach, które w przeciwnym razie byłyby w większości bezczynne. Zazwyczaj płacisz trochę więcej za godzinę pracy procesora, niż gdybyś robił to sam, ale zwykle jest to równoważone faktem, że płacisz uczciwie za dokładne użycie.

Jest jednak duża szansa, że ​​będzie po prostu darmowy. Warstwa AWS Always Free obejmuje 100 GB przepustowości i pełny terabajt przepustowości CloudFront. Dla porównania, większość innych bezpłatnych poziomów usług hostingu witryn statycznych (takich jak Github Pages i Firebase) zapewnia około 10 GB.

1 TB przepustowości za darmo jest z pewnością bardzo przyjemne, ponieważ oznacza to, że większość stron internetowych, które nie obsługują ton treści, będzie miała duży bufor, zanim zostanie obciążona znacznymi kwotami.

Jednak nadal będziesz płacić za żądania S3, które będą się sumować, a jeśli Twoja witryna przechowuje setki GB treści, możesz również zobaczyć za to wysokie opłaty. Jednak efektywne wykorzystanie buforowania CloudFront tam, gdzie to możliwe, może zmniejszyć liczbę wymaganych żądań do źródła (S3), a większość witryn będzie dość mała.

Skonfiguruj statyczną witrynę S3 Bucket

Aby rozpocząć, przejdź do konsoli zarządzania S3 i utwórz nowy zasobnik.  Musisz wyłączyć opcję „Blokuj dostęp publiczny”, aby była widoczna. AWS ostrzega, że ​​to zły pomysł, z wyjątkiem przypadków użycia, takich jak statyczny hosting stron internetowych. Ponieważ dokładnie to robimy, możesz to zignorować, ale zdecydowanie nie chcesz ładować sekretów do kosza – wszystko będzie czytelne.

Po prostu usuwa blokadę; musisz również wyraźnie zezwolić na odczyt publiczny za pomocą zasad dotyczących kosza w sekcji Uprawnienia. Pamiętaj, aby zastąpić nazwę zasobu w tym miejscu poprawnym zasobnikiem.

{

„Wersja”:”2012-10-17″,

Oświadczenie:[

{

„Sid”:”PublicReadGetObject”,

„Efekt”: „Zezwól”,

„Główny”: „*”,

„Akcja”:[„s3:GetObject”],

„resource”:[„arn:aws:s3:::example-bucket/*”]

}

]

}

Następnie musisz przesłać swoje treści. Możesz przeciągać i upuszczać, ale jeśli chcesz ręcznie przenieść cały folder, możesz użyć interfejsu AWS CLI do zsynchronizowania zasobnika S3 z katalogiem lokalnym. Możesz również skonfigurować ten zasobnik jako dane wyjściowe wdrożenia CodePipeline, które może tworzyć artefakty z repozytorium źródłowego.

Użyjemy API S3 i załadujemy create-react-app szablon bazowy. Po synchronizacji zobaczysz index.html w S3.

aws s3 sync. s3://bucket-name

Zanim będzie gotowy, musisz przejść do Właściwości koszyka, przewiń w dół, aby znaleźć Statyczny hosting WWW, i włącz go. Będziesz musiał skonfigurować indeks i dokument błędu, a także tutaj możesz napisać reguły przekierowań.

Następnie zobaczysz punkt końcowy witryny we właściwościach.

Podłączanie CloudFront CDN

CloudFront ma wiele opcji, ale ustawienia domyślne działają dobrze w przypadku prostej witryny S3, więc konfiguracja jest dość łatwa. Przejdź do konsoli CloudFront  i utwórz nową dystrybucję.

Możesz dostosować ustawienia pamięci podręcznej, ale domyślne zachowanie powinno odpowiadać większości ludzi.

Musisz podłączyć własną domenę, co obejmuje wygenerowanie certyfikatu SSL, którym można zarządzać za pomocą AWS Certificate Manager (ACM). Możesz kliknąć ten przycisk, aby zażądać certyfikatu, co może zająć trochę czasu, aby zweryfikować DNS, jeśli nie korzystasz z AWS Route 53 DNS.

Oczywiście będziesz także musiał skonfigurować DNS z rekordem CNAME wskazującym na punkt końcowy CloudFront.

Po skonfigurowaniu certyfikatu i DNS utwórz dystrybucję i poczekaj około 15 minut, aż CloudFront ją wdroży. Gdy to zrobisz, możesz odwiedzić punkt końcowy CloudFront lub domenę niestandardową i zobaczyć, jak Twoja witryna jest obsługiwana z zasobnika S3.