Jak postawić stronę internetową na Amazon S3

Strona statyczna w usłudze Amazon S3

Poprzedni artykuł był poświęcony usłudze Amazon S3, w którym wyjaśniliśmy, jak właściwie utworzyć "Bucket" oraz omówiliśmy związane z nią pojęcia.

W niniejszym artykule pokażemy, jak stworzyć własną statyczną stronę internetową korzystając z usługi Amazon S3. Strona ta będzie wykorzystywała tylko HTML i CSS, a kod i grafiki będą ładowane bezpośrednio z S3.

Dlaczego Amazon S3, a nie maszyny wirtualne w usłudze EC2

Zapewne zastanawiacie się, dlaczego S3, a nie maszyna wirtualna w EC2? Okazuje się, że w celu uruchomienia statycznej witryny, usługa S3 wystarczy z naszymi potrzebami.

Największymi jej zaletami są niski koszt i łatwość użytkowania. W tradycyjnym modelu do uruchomienia serwera potrzebowalibyśmy umiejętności z zakresu administrowania serwerem, instalacji i konfiguracji serwera WWW oraz jego zabezpieczeń.

W przypadku usługi S3 mamy wszystko zapewnione i nie musimy się o to martwić. Aby uruchomić serwer wirtualny, potrzeba znacznie więcej wiedzy, niż do stworzenia statycznej strony z usługi S3. Tworząc serwis internetowy, chcemy, aby był dostępny dla jak największej liczby użytkowników. Trzeba jednak mieć na uwadze, że AWS nalicza opłaty w zależności od m.in. wychodzącego ruchu — im większy ruch, tym większe koszty.

Dlatego warto śledzić budżet, by upewnić się, że nie został on przekroczony. Można to zrobić, ustawiając odpowiednie limity. Korzystanie z Amazon S3 nie zawsze musi być wycenione. Serwisy o niewielkiej liczbie zdjęć i odwiedzin (np. wizytówka małego przedsiębiorstwa) mogą zmieścić się w ramach tzw. Free Tieru.

Dla usługi S3 możemy bezpłatnie przechowywać do 5 GB danych oraz wykorzystać 15 GB transferu wychodzącego. To dobre rozwiązanie, aby zacząć pracę z chmurą Amazon. Dowiedz się więcej o ofercie na stronie AWS.

Rejestracja domeny po weryfikacji dostępności bucketu

Aby strona działała poprawnie, potrzebujemy sprawdzić, czy zadana nazwa bucketu w usłudze S3 nie jest już zajęta. Najlepiej jest założyć bucket od razu, żeby mieć pewność, że jest on dostępny. Aby to zweryfikować, musimy najpierw założyć bucket.

Na potrzeby artykułu założyliśmy darmową stronę "kylos-s3.tk" na stronie http://www.dot.tk. Natomiast jeśli chcemy posiadać stałą domenę, to należy zarejestrować ją bezpośrednio u rejestratora. U nas zarejestrujecie ją Państwo pod adresem https://www.kylos.pl/domeny/

Jak skonfigurować usługę S3 na potrzeby statycznej strony

Zaloguj się do konsoli AWS w formie webowej aws.amazon.com i przejdź do usługi Amazon S3. Następnie kliknij "Create bucket" (Rys.1).

 

   

W nowym oknie wypełnij pole (Rys. 2) i przejdź do Podsumowania (Rys.3). Stwórz w tym miejscu nowy bucket, klikając "Create bucket".

 

 

 

Zrób to samo dla bucketu o nazwie kylos-s3.tk oraz dla tego z przedrostkiem www www.kylos-s3.tk. Uprawnienia do bucketu możesz nadać w kolejnym kroku.

Umieść teraz stronę bezpośrednio w bukecie kylos-s3.tk. Na cele artykułu skorzystaliśmy z darmowego szablonu pobranego ze strony http://www.free-css.com/free-css-templates/page223/energy

Po pobraniu wymienionego szablonu i rozpakowaniu go, przejdź do katalogu "Energy Free Website Template - Free-CSS.comenergy" i umieść jego zawartość w buckecie kylos-s3.tk, bez przedrostka www. Przejdź do bucketu, otwórz katalog ze stroną i przeciągnij myszką wszystkie pliku do bucketu.

Pojawi się okno widoczne na poniższym rysunku (Rys. 4). Kliknij Next do końca kreatora, a następnie "Upload" (Rys.5). Pliki na serwer można wrzuć na różne sposoby - klikając Upload, albo korzystając z konsoli AWS CLI (AWS Command Line Interface).

 

 

 

Teraz przygotujmy nasze buckety do działania. Musimy nadać im właściwe pozwolenia. Przejdźmy do głównej strony usługi S3 i kliknijmy na bucket kylos-s3.tk, a następnie na zakładkę "Permissions". (Rys. 6).

 

 

Przechodzimy do "Bucket Policy", wpisujemy poniższą politykę (Rys. 7) i zapisujemy zmiany klikając "Save". 

{
"Version":"2012-10-17",
"Statement":[{
"Sid":"PublicReadGetObject",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::kylos-s3.tk/*"]
    }
  ]
}

Po wprowadzeniu zmian ujrzymy, że nasze dane są dostępne publicznie, co zostało przedstawione na poniższym zrzucie ekranu (Rys. 8)

 

 

Następnie przechodzimy do zakładki "Properties" i klikamy "Static website hosting" (Rys. 9).

 

 

Podajemy główny plik strony w polu "Use this bucket to host a website", zazwyczaj jest to index.html.

 

 

Adres naszej strony znajduje się w polu "Endpoint" i wskazuje na adres: http://kylos-s3.tk.s3-website-us-east-1.amazonaws.com

Klikamy "Save" i kończymy prace związane z tym bucketem.

Konfiguracja bucket www.kylos-s3.tk

Klikamy na bucket i następnie na "Properties". Klikamy na "Static website hosting" i wybieramy "Redirect requests". W "Target bucket or domain" podajemy naszą domenę bez przedrostka www "kylos-s3.tk". W polu "Protocol" podajemy http i klikamy "Save" (Rys. 11).

 

Zweryfikuj działanie strony

Teraz możemy sprawdzić, czy nasza strona wyświetla się prawidłowo, odwiedzając adres podany w polu "Endpoint". Jeśli nie zapisaliśmy go, możemy ponownie kliknąć "Static website hosting" aby go uzyskać. Zapiszmy go na boku, gdyż będzie nam potrzebny w dalszej części artykułu.

Konfiguracja domeny

Kolejnym krokiem jest skonfigurowanie domeny. W tym celu zaloguj się do panelu rejestratora domeny i ustaw rekord CNAME na adres swojego "Endpointa".

W naszym wypadku są to rekordy:

kylos-s3.tk CNAME kylos-s3.tk.s3-website-us-east-1.amazonaws.com

www.kylos-s3.tk CNAME  kylos-s3.tk

W zrzucie ekranu widoczny jest panel z zarządzania domeną .tk http://www.dot.tk

 

Podsumowanie

Podsumowując, obecnie wszystko działa na podstawie protokołu http. Jeżeli chcemy skorzystać z protokołu https w większości przypadków wykorzystuje się do tego usługi CloudFront lub Cloudflare. Zagadnienie to jest dość obszerne i opiszemy je w którymś z następnych artykułów.

Upewnij się najpierw czy dostępny jest 'bucket' o nazwie adresu swojej strony internetowej, zanim go utworzysz. Ten sposób utrzymywania statycznych stron jest idealny, gdy chcesz zamieścić podstawowe informacje w formie niedynamicznej wizytówki firmy. Jeśli jednak planujesz uruchomić CMS (taki jak WordPress czy PrestaShop), lepszym rozwiązaniem będzie skorzystanie z maszyny wirtualnej EC2 lub oferty VPS w Kylos.

Można również rozszerzyć funkcjonalność i wykorzystać Amazon Lambda, która jest technologią serverless. Jednak jest ona dedykowana bardziej zaawansowanym użytkownikom. W kolejnym artykule pokażemy, jak połączyć te dwie usługi i jak je wykorzystać w praktycznym zastosowaniu. Jeśli chcesz wykorzystać to rozwiązanie u siebie, możesz to zrobić.

Poprzedni artykuł był poświęcony usłudze Amazon S3, w którym wyjaśniliśmy, jak właściwie utworzyć "Kubeł" oraz omówiliśmy związane z nią pojęcia. W niniejszym artykule pokażemy, jak stworzyć własną statyczną stronę internetową korzystając z usługi Amazon S3. Strona ta będzie wykorzystywała tylko HTML i CSS, a kod i grafiki będą ładowane bezpośrednio z S3.