Angular na AWS S3: Hosting w 6 krokach

Czym jest AWS S3?

Amazon Simple Storage Service (S3) to platforma chmurowa oferująca bezpieczne i skalowalne przechowywanie obiektów. Jest to popularny wybór do hostowania statycznych stron internetowych, aplikacji internetowych, a nawet obrazów i filmów. S3 słynie z prostoty użytkowania, niskich kosztów i niezawodności.

Dlaczego warto hostować Angulara na AWS S3?

• Prostota: S3 jest niezwykle łatwy w konfiguracji i użytkowaniu. Wystarczy utworzyć bucket, przesłać pliki aplikacji i skonfigurować adres URL.
• Skalowalność: S3 może automatycznie skalować się w górę lub w dół w zależności od potrzeb aplikacji. Bez względu na to, czy obsługujesz ruch z kilku osób, czy z milionów użytkowników, S3 poradzi sobie z tym bez problemu.
• Niskie koszty: S3 oferuje darmowy plan, który obejmuje 5 GB pamięci masowej i 20 000 żądań miesięcznie. To świetne rozwiązanie do testowania i hostowania małych aplikacji. Nawet po wyczerpaniu darmowego poziomu, S3 nadal oferuje konkurencyjne ceny.
• Wysoka dostępność: S3 replikuje dane w wielu centrach danych na całym świecie, co zapewnia wysoką dostępność i odporność na awarie.
• Bezpieczeństwo: S3 oferuje szereg funkcji bezpieczeństwa, które chronią Twoje dane przed nieautoryzowanym dostępem.

Praca z AWS to nie tylko ułatwienie hostingu, ale również doskonała okazja do rozwoju zawodowego. AWS jest niezwykle popularny na rynku IT, a umiejętność jego obsługi to cenny atut w CV każdego dewelopera. Znajomość S3 może ułatwić Ci znalezienie nowej pracy, awans zawodowy, a nawet przejście do roli DevOpsa, gdzie umiejętność zarządzania infrastrukturą chmurową jest wysoko ceniona.

1. Zakładanie nowego konta na AWS

Wchodzimy na stronę rejestracyjną AWS:  https://portal.aws.amazon.com/billing/signup

Będziemy potrzebowali potwierdzić kilka danych w procesie rejestracji:

• E-mail
• Numer telefonu
• Dane karty kredytowej (można użyć tymczasowej np. Revolut)

Pierwsze logowanie i wstępne ustawienia

Po poprawnej rejestracji logujemy się do panelu adresem e-mail i hasłem.

Na początku dobrze sobie wybrać lokalizację, w której będą tworzone nasze usługi.

Dostępne lokalizacje widoczne są w prawym górnym rogu panelu.

Domyślnie będzie lokalizacja gdzieś w Stanach Zjednoczonych. Żeby mieć trochę lepsze pingi (czasy odpowiedzi serwera) polecam ustawić lokalizacje usługi na coś bliżej nas lub grupy docelowej aplikacji.

W przypadku Polski, polecam ustawić Frankfurt, albo inny region zaczynający się od eu.

Z kolei w lewym górnym rogu możemy zapoznać się z dostępnymi serwisami, wyszukać konkretnej usługi i dodać je do ulubionych.

W tym celu klikamy w pole wyszukania, wpisujemy S3 i klikamy gwiazdkę, aby dodać usługę do paska ulubionych. Dzięki temu szybciej dostaniemy się do naszych najważniejszych usług w przyszłości.

2. Tworzenie nowego bucketu S3

Wchodzimy w usługę S3 (z pasku na górze) i klikamy utworzenie nowego bucketa - czyli przestrzeni w której przechowywana będzie nasza zbudowana aplikacja Angularowa.

W części głównej konfiguracji nowego bucketa wpisujemy nazwę, która musi być unikatowa. Resztę pozostawiamy bez zmian.

W sekcji 'Object Ownership' zostawiamy domyślne ustawienia, czyli 'ACLs disabled' - nie będziemy korzystali z tej opcji.

Następnie mamy część z ustawieniami dostępu. Tutaj musimy odznaczyć opcję 'block all public access', ponieważ chcemy aby nasza aplikacja była dostępna publicznie.

Pozostałe sekcje:
- Bucket Versioning,
- Tags,
- Default encryption
zostawiamy bez zmian.

Ustawienia zaawansowane również w tym przypadku nas nie dotyczą.

Przechodzimy na sam dół strony i klikamy w prawym dolnym rogu 'Create bucket'

Po tym zabiegu przeniesie nas do listy bucketów, na której zobaczymy nowo utworzony kontener

3. Konfiguracja AWS S3 pod Web Hosting

Mamy utworzony nowy bucket i jest do niego publiczny dostęp, ale potrzebujemy dodać jeszcze kilka reguł i przede wszystkim — aktywować na nim usługę Web Hostingu.

Aktywowanie usługi Web Hostingu na S3:

Na liście bucketów, klikamy w nasz nowo utworzony, następnie przechodzimy w zakładkę "Properties"

Zjeżdżamy na sam dół strony i klikamy "Edit" w sekcji "Static website hosting"

W ekranie edycji:

• aktywujemy opcje "Static website hosting"
• upewniamy się, że mamy zaznaczoną opcję "Host a static website"
• Ustawiamy w polach "Index document" oraz "Error document" tą samą wartość: index.html

Zapisujemy zmiany i jeżeli wszystko jest dobrze wypełnione, zostaniemy przekierowani na detale naszego bucketa, do zakładki "Properties".

Ponownie przechodząc na sam dół strony, powinniśmy widzieć informacje o aktywowanym Static website hostingu oraz link do naszej publicznej witryny

Jednak gdy spróbujemy przejść na dedykowany adres URL, dostaniemy błąd 403 - brak dostępu. Dlatego musimy jeszcze przypisać odpowiednie reguły dostępowe.

Określenie reguł dostępowych

Ciągle będąc w widoku detalu naszego bucketa, przechodzimy do zakładki "Permissions" i klikamy "Edit" w sekcji "Bucket policy".

W polu tekstowym wpisujemy następującą konfiguracje:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicRead",
      "Principal": "*",
      "Effect": "Allow",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": [
        "arn:aws:s3:::nazwa-bucketa/*"
      ]
    }
  ]
}

W naszym przykładowym bucketcie, pełna prawidłowa konfiguracja wygląda tak:

Zapisujemy zmiany. Przechodzimy do zakladki "Properties", zjeżdżamy na sam dół strony i jeszcze raz próbujemy wejść na dedykowany dla tego bucketa adres URL.

Jeżeli wszystko zrobiliśmy dobrze, to teraz powinien nam się wyświetlić błąd 404:

Co oznacza, że dostępy są dobrze skonfigurowane. Błąd wynika z tego, że nie wrzuciliśmy jeszcze plików aplikacji na nasz hosting S3.

Jeżeli wrzucilibyśmy jakiś plik index.html, to już prawidłowo się wyświetli.

No ale przejdźmy teraz do aplikacji Angularowej.

4. Tworzenie nowej aplikacji

Zapewne posiadasz już jakąś aplikację napisaną w Angularze, ale na wszelki wypadek zacznijmy od początku, czyli utworzenia podstawowej aplikacji zgodnie z dokumentacja dostępną na oficjalnej stronie angular.io.

W wielkim skrócie:

1. Instalujemy node.js wraz z npm (najlepiej przez nvm)
2. Instalujemy globalnie Angular CLI poleceniem w terminalu:
   npm install -g @angular/cli
3. Inicjujemy nowy projekt Angular poleceniem:
   ng new my-app
   i odpowiadamy na pojawiające się pytania zgodnie z naszymi preferencjami.
4. Dla pewności uruchamiamy aplikację przez:
   npm run start
   i sprawdzamy w przeglądarce czy aplikacja prawidłowo się wyświetla pod adresem http://localhost:4200

W przypadku Angular v17 domyślna strona powinna wyglądać ta:

5. Budowanie aplikacji

Gdy jesteśmy już pewni, że posiadamy działającą aplikację, możemy przejść do procesu budowania.

W tym poradniku będziemy budowali aplikacje lokalnie, a wynik budowania przerzucimy na AWS S3.

W kolejnym poście zautomatyzujemy ten proces z wykorzystaniem GitHub Actions. Subskrybuj, aby być na bieżąco z aktualnościami

Budowanie aplikacji odbywa się standardowo, przez wywołanie polecenia npm run build.

Po zakończonym procesie budowania powinniśmy zobaczyć w naszym projekcie nowy folder o nazwie dist, w którym znajduje się nasza zbudowana aplikacja, a konkretnie:

my-app/
├─ dist/
│  ├─ my-app/
│  │  ├─ browser/

Proces budowania i wygenerowane pliki powinny wyglądać przykładowo w taki sposób:

Tak wygenerowane pliki, możemy już wrzucać na nasz skonfigurowany bucket S3.

6. Wrzucenie zbudowanej aplikacji na AWS S3

To już ostatni krok, żeby osiągnąć nasz cel.

Wchodzimy ponownie na stronę z detalami naszego skonfigurowanego bucketa. Przechodzimy do zakładki "Objects" i klikamy w przycisk "Upload"

Klikamy "Add files" i dodajemy wszystkie pliki z naszej zbudowanej aplikacji Angular, czyli w naszym przypadku zawartosc folderu my-app/dist/my-app/browser/

Po dodaniu plików upewniamy się, że lista plików zgadza się z tym co mamy lokalnie na komputerze.

Jeżeli wszystko jest ok, nic więcej nie zmiemiamy, tylko klikamy "Upload" w prawym dolnym rogu

Zostaniemy następnie poinformowani, czy wszystkie pliki wgrały sie prawidłowo.

I na tym koniec!

Pozostaje ponownie odwiedzić nasz dedykowany adres URL i cieszyć się z opublikowanej aplikacji Angularowej 👏

Podsumowanie

W tym artykule poznaliśmy prostą i skuteczną metodę hostowania aplikacji Angulara na AWS S3.
Przeszliśmy przez 6 kroków, które obejmowały konfigurację konta AWS, utworzenie bucketa S3, skonfigurowanie hostingu statycznego, ustawienie reguł dostępu i wgranie zbudowanej aplikacji.

Warto również wspomnieć, że AWS S3 doskonale nadaje się nie tylko do hostowania aplikacji Angulara. Możemy tam również umieszczać aplikacje napisane w React.js, Astro czy proste strony statyczne.
Dzięki temu zyskujemy uniwersalną platformę hostingową, która spełni potrzeby wielu projektów webowych zarówno hobbystycznych, jak i komercyjnych.

Dodatkowe linki:

• Oficjalna strona AWS S3: https://aws.amazon.com/s3/
• Oficjalna dokumentacja Angulara: https://angular.io/
• Oficjalna dokumentacja React.js: https://react.dev/