Jak zarabiać więcej w IT? Jednym ze sposobów jest dać się zauważyć. Jeśli jest popyt na twoje usługi, więcej osób chce z tobą współpracować, to ich cena rośnie. A więc, jak zostać zauważonym w IT? Można wyróżnić się z tłumu, mając stronę internetową, prowadząc blog, vlog, kanał na YouTube albo podcast. Dzisiaj chciałem pokazać 2 sposoby na to, by uruchomić w prosty sposób statyczną stronę www w AWS. Poniżej przedstawiam 2 sposoby, ponieważ ludzie często je mylą, mieszają i potem coś nie działa.
Jeśli bardziej przypadła Ci do gustu chmura Azure, to się nie przejmuj. W artykule, który napisałem jakiś czas temu, znajdziesz opis jak stworzyć statyczną stronę www w chmurze Azure.
Stworzenie własnej strony internetowej może być pierwszym krokiem do wyższych zarobków. Własna strona dostarcza wiele możliwości. Możemy na niej prezentować także własne osiągnięcia albo sprzedawać swoje produkty. Jeśli jesteśmy dobrzy w tym co robimy, to warto się tym podzielić z innymi napisać poradnik, książkę, przygotować kurs albo własną aplikację. Ludzie naprawdę chętnie zapłacą za konkretną dawkę wiedzy, która może im pomóc.
Jeśli chcesz dostać pracę swoich marzeń, posiadanie swojego miejsca w sieci sprawia, że wyróżniasz się z tłumu. Pomyśl o tym. Nie powiedziałeś ani słowa, a już robisz pozytywne wrażenie, bo chcesz się rozwijać i dzielić swoją wiedzą.
Niezależnie w jakiej chmurze chcesz stworzyć statyczną stronę www na początek najlepiej wykupić fajną domenę. Kwestie SEO zostawię w spokoju, bo nie jestem od tego specjalistą. Mała porada z mojej strony, dobrze, żeby w nazwie domeny, którą kupujemy, były słowa kluczowe powiązane z dziedziną, w której będziemy tworzyć stronę/blog.
Utworzenie statycznej strony www pokażę na przykładzie domeny “poradnikadmina.pl”.
MeetUp SysOpsDevOps Polska
Jeśli wolisz słuchać zamiast czytać, to mam świetną informację. Wystąpiłem na żywo w meetupie zorganizowanym przez SysOpsDevOps Polska. Wystąpienie możesz zobaczyć na YouTube klikając w poniższy link „Jak zarabiać więcej w IT? I co ma z tym wspólnego CDN oraz statyczne strony www w chmurze AWS?” – Wojciech Lepczyński
Dlaczego S3?
Ponieważ łatwo się go obsługuje, można zmapować jako zwykły dysk sieciowy i możemy tam przechowywać dane chyba w każdym formacie. Nasza statyczna strona będzie mogła zawierać np. pliki html, css, obrazki, nagrania video, javaScript i wiele innych.
S3 czyli Amazon Simple Storage Service kosztuje niewiele, płacimy tylko za przestrzeń, którą wykorzystujemy i ruch do naszej strony. Amazon zapewnia także wysokie bezpieczeństwo, skalowalność i wysoką dostępność na poziomie 99,99% . Dostęp do danych i ich edycji przyznajemy za pomocą odpowiednich uprawnień i polityk.
Sposób nr1 – S3 Website endpoint czyli “Static website hosting”
Poniżej znajdziesz pierwszy sposób na uruchomienie Statycznej strony www na AWS. Jest on prosty, polega na użyciu S3 Website endpoint, ale niestety daje też mniejsze możliwości konfiguracji. Bardzo szybko można w ten sposób stworzyć prostą stronę bez dodatkowych kosztów.
1) S3 bucket – Create
Po pierwsze będziemy musieli utworzyć S3 bucket na platformie AWS. Nazwa bucketa musi być jak zwykle unikalna. Najlepiej, żeby była taka sama jak nazwa domeny. W moim przypadku będzie to poradnikadmina.pl.
Gdy utworzymy nasz bucket możemy dodać do niego np zwykły plik html jak ten poniżej:
<!doctype html>
<html>
<head>
<title>tytuł strony</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Tytuł stopnia pierwszego</h1>
<h2>Tytuł stopnia drugiego</h2>
<h3>Tytuł stopnia trzeciego</h3>
<h4>Tytuł stopnia czwartego</h4>
<h5>Tytuł stopnia piątego</h5>
<h6>Tytuł stopnia szóstego</h6
<p>To jest treść pierwszego akapitu</p>
To jest pierwszy wiersz<br>
To jest drugi wiersz<br>
To jest trzeci wiersz<br>
To jest czwarty wiersz<br>
<p>To jest treść drugiego akapitu</p>
<p>To jest LISTA:</p>
<ul>
<li>punkt numer 1</li>
<li>punkt numer 2</li>
<li>punkt numer 3</li>
</ul>
<span style="color: red">Ten tekst został napisany czcionką koloru czerwonego</span>
<span style="color: green">Ten tekst został napisany czcionką koloru zielonego</span>
</body>
</html>Zalecam trochę bardziej się wysilić i poszukać fajny szablon, może być darmowy, żeby Twoja strona nie wyglądała tak:
Jeśli troszkę poszukasz fajnych statycznych szablonów, to Twoja strona może wyglądać znacznie lepiej bez dużego wysiłku. Poniżej znajdziesz 2 przykłady:
2) S3 bucket – Permissions
Gdy utworzysz S3 bucket i dodasz do niego zawartość, to przechodzisz do zakładki Permissions i wyłączasz blokowanie publicznego dostępu. Kliknij edit i odznacz wszystkie checkboxy.
Aby pliki były dostępne dla wszystkich dodaj jeszcze odpowiednią politykę. W sekcji “Bucket policy” dopisz:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowReads3bucket",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::poradnikadmina.pl/*"
}
]
}Polityka o nazwie AllowReads3bucket pozwala “Allow” każdemu “*” na odczyt “s3:GetObject” całej zawartości bucketa “poradnikadmina.pl/*”. Zamień oczywiście ‘poradnikadmina.pl‘ na nazwę swojego bucketa.
3) S3 bucket – Properties
Teraz przechodzimy na zakładkę “Properties” i będziemy konfigurować ustawienia naszej internetowej strony www.
Schodzimy na sam dół do sekcji Static website hosting. Po kliknięciu Edit będziemy mogli włączyć Static website hosting i zacząć używać Amazon S3 do hostowania strony www. Niema tu dużo opcji. Podajemy nazwę pliku, który będzie domyślnie wyświetlany. Nie musimy, ale możemy podać też nazwę pliku, który będzie wyświetlany podczas napotkania błędów na naszej stronie.
Gdy zapiszemy, to zobaczymy adres url, pod jakim jest dostępna nasza strona. Jeśli wszystko zrobiliśmy poprawnie, to powinniśmy zobaczyć pod tym adresem naszą stronę 🙂
4) Domena – przekierowanie na S3
Strona działa, tylko jest jedno ale. Adres naszej strony utworzony przez Amazon Static website hosting wygląda mało zachęcająco. Jeśli masz już wykupioną domenę, to warto ustawić, żeby wskazywała naszą statyczną stronę internetową hostowaną na AWS S3. Możemy to zrobić bezpośrednio, wskazując na nasz bucket S3.
Zaloguj się w miejscu, gdzie wykupiłeś domenę i ustaw przekierowanie. W większości przypadków wystarczy ustawić przekierowanie CNAME, z nazwa_domeny.com na adres podany w S3. W moim przypadku wpis DNS wygląda następująco:
Teoretycznie propagacja może trwać do 24h dla domen regionalnych (np. .pl) i 72h dla domen globalnych (np. .com). W praktyce zazwyczaj po kilkunastu minutach przekierowanie zaczyna działać.
Jeśli dobrze ustawiliśmy przekierowanie, to strona będzie dostępna bezpośrednio pod adresem utworzonym w S3 http://poradnikadmina.pl.s3-website.eu-central-1.amazonaws.com, oraz także pod nowym http://poradnikadmina.pl, który właśnie przekierowaliśmy na S3. Jeden krok więcej, ale dużo ładniej to wygląda.
5) SSL
Jeśli uważnie się przyjrzysz to zauważysz, że strona jest niezabezpieczona. Możemy się do niej połączyć tylko po HTTP a nie HTTPS.
Teraz mamy 2 wyjścia:
- Nie robimy nic i zostajemy z niezabezpieczoną stroną na http.
- Tworzymy darmowy certyfikat w ACM (AWS Certificate Manager) dla naszej domeny i podpinamy go, do CloudFront (płatny CDN). W CloudFront podpinamy nasz S3 bucket. Zmieniamy przekierowanie DNS dla naszej domeny z S3 na CloudFront.
Opcji numer 1 nie polecam, jeśli strona ma być naszą wizytówką, ale może czasem się przydać w innych projektach. Opcję nr 2 za chwilę opiszę, tylko pierw omówię, co to tak naprawdę jest CDN i do czego służy.
CDN (Content Delivery Network)
CDN – Content Delivery Network, czyli rozproszony system dostarczania treści do wielu centrów danych. Upraszczając, są to serwery w różnych miejscach na świecie pobierające dane ze źródła i przekazujące je użytkownikom końcowym. Czyli np. użytkownik, który przegląda stronę internetową, nie łączy się z głównym serwerem tylko z tym który jest najbliżej niego.
Dzięki temu strona wczytuje się szybciej. Główny serwer nie jest już wąskim gardłem, do którego łączą się tysiące ludzi, jest bardziej odporny na ataki DDoS. Użytkownik, który chce wejść na daną stronę WWW, odwiedza w rzeczywistości kopię dostarczaną przez jeden z komputerów podłączonych do sieci CDN.
6) CloudFront
Jak już wiesz co to jest i do czego służy CDN, to możemy przejść do praktyki. Uruchamiamy AWS CloudFront CDN i klikamy Create Distribution.
W Origin Domain Name podajemy punkt końcowy, z którego CloudFront ma pobierać dane. Tutaj podajemy adres wygenerowany wcześniej przez AWS S3 static website, pomijamy tylko przedrostek http:// . Nazwa Origin ID uzupełni się sama. Dobrze jest zaznaczyć opcję przekierowania http na https (Redirect HTTP to HTTPS). Dzięki temu cały ruch będzie automatycznie przekierowywany na HTTPS. Nawet jeśli ktoś się pomyli i będzie chciał wejść przez HTTP, to zostanie przekierowany na HTTPS.
Ponieważ kupiliśmy domenę, to zaznaczamy opcję Custom SSL Certificate (example.com) i za pomocą ACM tworzymy nowy certyfikat. Po kliknięciu ‘Request or Import a Certificate with ACM‘ otworzy nam się nowa karta.
Podajemy nazwę domeny. Ja użyłem poradnikadmina.pl, następnie klikamy Next. Wybieramy sposób weryfikacji. AWS sprawdzi, czy ta domena należy do nas. Ja wybieram DNS i przechodzę dalej. Na końcu potwierdzam i zostaję poproszony o dodanie nowego przekierowania na serwerze DNS. Gdy AWS potwierdzi, że jesteś właścicielem domeny (zazwyczaj trwa to trochę czasu) to status certyfikatu zmieni się z Pending validation na Issued. Wtedy będzie on dostępny na liście certyfikatów do wyboru.
Gdy status zmieni się na Issued, to możesz przejść do konfiguracji CloudFront i wybrać darmowy certyfikat z listy. W Alternate Domain Names należy dopisać nazwę domeny, która będzie przekierowywała nas na CloudFront. W moim przypadku jest to poradnikadmina.pl. Gdy skończysz, to kliknij Create Distribution. Na stronie głównej CloudFront zobaczysz zapewne, że jest w stanie In Progress.
W tym czasie możesz przejść do serwera DNS, gdzie masz wykupioną domenę i zmienić przekierowanie. Na początku ustawialiśmy, żeby domena kierowała bezpośrednio na S3. Teraz należy zmienić to przekierowanie, na adres url CloudFronta. W moim przypadku tworzę przekierowanie CNAME z domeny poradnikadmina.pl na adres CloudFront d37qw17dokfl8g.cloudfront.net.
To już koniec. Jeśli wszystko zrobiłeś dobrze, to Twoja strona będzie otwierała się poprawnie za pomocą https. Więcej na temat konfiguracji CloudFront dowiesz się z drugiego sposobu.
Sposób nr2 – S3 API endpoint i CloudFront
Używając S3 API endpoint mamy dużo większe możliwości konfiguracji naszej strony. Możemy użyć polityki pozwalającej na odczyt strony tylko poprzez CloudFront. Używając tego sposobu, nie musimy zezwalać na dostęp do naszego S3 anonimowym użytkownikom.
1) S3 bucket – Create
Proces tworzenia bucketu S3 przebiega dokładnie w taki sam sposób jak w pierwszym przypadku. Po utworzeniu bucketu, w taki sam sposób dodajemy do niego pliki naszej strony. No i na tym podobieństwa się kończą.
2) S3 bucket – Permissions
W tym przypadku nie musimy udostępniać plików wszystkim. Możemy mieć trochę więcej kontroli. Ja cały czas blokuję publiczny dostęp do AWS S3.
W sekcji “Bucket policy” możemy dopisać uprawnienia dla CloudFront, ja jednak oszczędzę sobie pracy i zdam się na AWS. Podczas konfiguracji CloudFront będziemy mieli możliwość, by AWS ustawił wszystko za nas.
3) Cloudfront
Uruchamiamy Cloudfront CDN i klikamy Create Distribution.
W Origin Domain Name podajemy punkt końcowy z którego Cloudfront ma pobierać dane. Tutaj podajemy nazwę naszego s3(wybieramy go z listy). W pierwszym przykładzie podawaliśmy adres wygenerowany przez static website, tutaj używamy innego endpointu. Nazwa Origin ID uzupełni się sama. Zalecam włączenie Restrict Bucket Access i zaznaczenie Create a New Identity. Zostanie wtedy automatycznie utworzona tożsamość pozwalająca CloudFront na dostęp do naszego S3. Należy pamiętać żeby zaznaczyć Yes, Update Bucket Policy. AWS wtedy automatycznie utworzy dla nas politykę w naszym S3. Dobrze jest zaznaczyć opcję przekierowania http na https (Redirect HTTP to HTTPS). Dzięki temu cały ruch będzie automatycznie przekierowywany na HTTPS. Nawet jeśli ktoś się pomyli i będzie chciał wejść przez HTTP, to zostanie przekierowany na HTTPS.
Teraz, ponieważ używamy naszej ładnej domeny zaznaczamy opcję Custom SSL Certificate (example.com) i wybieramy z listy nasz certyfikat jeśli go mamy, albo za pomocą ACM tworzymy nowy. Po kliknięciu Request or Import a Certificate with ACM otworzy nam się nowa karta.
Podajemy nazwę domeny. Ja użyłem poradnikadmina.pl, następnie klikamy Next. Wybieramy sposób weryfikacji. AWS sprawdza, czy ta domena należy do nas. Ja wybieram DNS i przechodzę dalej. Na końcu potwierdzam i zostaję poproszony o dodanie nowego przekierowania na serwerze DNS. Gdy AWS potwierdzi, że jesteś właścicielem domeny (zazwyczaj trwa to trochę czasu) to status certyfikatu zmieni się z Pending validation na Issued. Wtedy będzie on dostępny na liście certyfikatów do wyboru.
Gdy status zmieni się na Issued, to możesz przejść do konfiguracji CloudFront i wybrać darmowy certyfikat z listy. W Alternate Domain Names należy także dopisać adres, który będzie przekierowywał na CloudFront.
Pamiętaj, żeby w Default Root Object podać nazwę swojego głównego pliku strony www. W moim przypadku jest to plik index.html. Reszta ustawień może zostać domyślna. Gdy skończysz, kliknij Create Distribution. Na stronie głównej CloudFront zobaczysz zapewne, że jest w stanie In Progress.
W tym czasie możesz przejść do serwera DNS, gdzie masz wykupioną swoją domenę i przekierować ją na CloudFront. W moim przypadku tworzę przekierowanie CNAME z domeny poradnikadmina.pl na url w CloudFront d37qw17dokfl8g.cloudfront.net.
4) Błędy
Jeśli wszystko poszło dobrze to super. Powinieneś pod twoją nazwą domeny zobaczyć statyczną stronę www zamieszczoną na S3. S3 będzie blokować publiczny dostęp, a strona będzie dostępna przez CND tylko po https.
Niestety nie zawsze jest tak wesoło, czasem coś się posypie. Podczas jednego z testów AWS się pogubił i nie potrafił utworzyć poprawnie polityki dla S3.
W takim przypadku należy politykę dodać ręcznie. Otwieramy nasz S3 i dopisujemy politykę pozwalającą CloudFront na dostęp do S3. Możesz wzorować się na mojej, tylko pamiętaj, żeby zmienić nazwę bucketu i ID CloudFrontu.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowReads3bucket",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E1XGCP5MAMC0E3"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::poradnikadmina.pl/*"
}
]
}Polityka o nazwie AllowReads3bucket pozwala “Allow” tożsamości CloudFron o ID “E1XGCP5MAMC0E3” na odczyt “s3:GetObject” całej zawartości bucketa “poradnikadmina.pl/*”.
ID od swojego CloudFronta znajdziesz w sekcji Security w Origin access identitty. Jeśli nie zaznaczyłeś podczas tworzenia CloudFront dedykowanej tożsamości, to zawsze możesz ją utworzyć ręcznie za pomocą Create Origin Access Identity.
Warto także zdefiniować stronę, która będzie się wyświetlać podczas występowania błędów. Możemy to w prosty sposób zdefiniować w CloudFront. Ja dodałem plik 404.jpg, który wyświetli się za każdym razem, kiedy wystąpi błąd 403 lub 404. Ponadto błąd 403 będzie zwracał kod 404.
Dzięki temu nasza strona nie będzie wyglądała tak:
Tylko może zwracać błąd 403 i 404 w dużo bardziej przyjaznej formie jak np.:
To już wszystko. Po przeczytaniu tego artykułu powinieneś znać 2 sposoby na to, by utworzyć statyczną stronę www w AWS. Będziesz wiedział którego sposobu, kiedy używać. Ponadto dowiedziałeś się także, do czego służy CDN i dlaczego warto go używać.
Pod tym linkiem znajdziesz dokumentację do Amazon CloudFront.
Jeśli chciałbyś się dowiedzieć, jak można zastąpić CDN CloudFront czymś tańszym, to bądź na bieżąco z moim blogiem. Niedługo ukaże się artykuł dotyczący alternatywy dla CloudFront. Bardzo dużo ludzi jej używa, nie płacąc nawet jednego dolara. Mają dzięki temu darmowy CDN i dostęp do pomocą https.
Świetny artykuł, który kompleksowo podchodzi do tematu i lekko napisany, że dobrze się czyta. Gratuluję!
Dziękuję za miłe słowa. Postaram się utrzymać poziom.
🙂
Możliwość komentowania została wyłączona.