W dzisiejszym wpisie chciałbym omówić konkretny przypadek z projektu Knowle.pl. Moja aplikacja składa się z kilku mikroserwisów, zarówno na backendzie (BE), jak i froncie (FE). Głównym celem było tutaj efektywne rozdzielenie poszczególnych ścieżek URL, kierujących do tych serwisów.

Stojąc przed wyzwaniem optymalizacji SEO dla mojej aplikacji typu Single Page Application (SPA) stworzonej w Angularze, doszedłem do wniosku, że lepszym rozwiązaniem będzie serwowanie statycznego HTML dla samych robotów indeksujących (crawlerów), pozostawiając aplikację SPA w tle i nie skupiając się na jej indeksowaniu.

Jak zarządzać ruchem, aby wszystko działało płynnie i efektywnie? Jak połączyć to z backendem, tak aby front-end mógł się z nim łatwo łączyć i komunikować? W moim przypadku kluczem do sukcesu okazało się wykorzystanie Nginx jako narzędzia do rozdzielania ruchu i efektywnego zarządzania zapytaniami do odpowiednich części aplikacji.

Konfiguracja Docker'a

NGINX skonfigurowałem z wykorzystaniem Dockera, jest to proste i szybkie. Myślę, że w kolejnym wpisie mogę opisać, dlaczego warto korzystać z konteneryzacji. Oto jak wygląda moja konfiguracja w Docker compose dla ngnixa :

version: '3.8'

services:
  nginx:
    image: nginx:latest
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - angular_files:/path/to/angular # Ścieżka, gdzie nginx powinien szukać plików Angular
      - landing_page:/path/to/landing_page # Ścieżka dla Landing Page
      - nginx_config:/etc/nginx/conf.d # Lokalizacja konfiguracji nginx

volumes:
  angular_files:
    # Konfiguracja dla woluminu Angular
  landing_page:
    # Konfiguracja dla woluminu Landing Page
  nginx_config:
    # Konfiguracja dla woluminu konfiguracyjnego nginx
  ssl_certs:
    # Tutaj ścieżka do twoich certyfikatów SSL
  ssl_private:
    # Tutaj ścieżka do twojego klucza prywatnego SSL

Wyjaśnienie konfiguracji

• Usługa nginx: Używamy najnowszego obrazu nginx.
• Port 80/443 jest mapowany z kontenera na maszynę hosta, co pozwala na dostęp do naszej aplikacji z przeglądarki.

Woluminy:

• angular_files: Przechowuje pliki aplikacji Angular.
• landing_page: Miejsce dla plików Landing Page.
• nginx_config: Zawiera pliki konfiguracyjne nginx, które definiują, jak serwer powinien obsługiwać żądania.
• ssl_certs: Ścieżka do miejsca z certem
• ssl_private: Ścieżka do miejsca z kluczem

Rozszerzenie Konfiguracji Nginx dla Przekierowań Ścieżek

Po skonfigurowaniu podstawowego środowiska z Docker Compose, następnym krokiem jest dostosowanie konfiguracji serwera nginx, aby zapewnić odpowiednie przekierowania dla różnych części naszej aplikacji.

Nginx jest bardzo elastyczny i pozwala na skonfigurowanie wielu ścieżek (tak zwanych lokacji), które mogą wskazywać na różne zasoby lub aplikacje. W naszym przypadku chcemy skonfigurować trzy główne ścieżki:

• /api - która będzie przekierowywać żądania do naszego backendu.
• /application - gdzie znajdzie się nasza aplikacja Angular.
• Główny adres / - który będzie serwować naszą Landing Page.

Poniżej znajdziesz przykładową konfigurację nginx, którą możesz wykorzystać lub dostosować do swoich potrzeb:

Ważne jest, aby dokładnie dostosować tę konfigurację do Twojego środowiska.

Ścieżki i adresy hostów muszą odpowiadać Twojej infrastrukturze i rozmieszczeniu plików. Po skonfigurowaniu i uruchomieniu kontenerów za pomocą Docker Compose, Twoje aplikacje powinny być dostępne pod odpowiednimi ścieżkami.

http {
    server {
        listen 80;
        listen 443 ssl;

        # Konfiguracja SSL (przykładowa, dostosuj do swoich plików)
        ssl_certificate /etc/ssl/certs/your_cert.crt;
        ssl_certificate_key /etc/ssl/private/your_private.key;

        # Główna strona - Landing Page
        location / {
            root /path/to/landing_page;
            try_files $uri $uri/ =404;
        }

        # Aplikacja Angular
        location /application {
            alias /path/to/angular;
            try_files $uri $uri/ /index.html;
        }

        # Backend API
        location /api {
            proxy_pass http://backend-host:backend-port;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
}

Wyjaśnienie konfiguracji:

• SSL Configuration: Ta sekcja jest potrzebna, jeśli używasz HTTPS. Pamiętaj o zmianie ścieżek do swoich plików certyfikatów.
• Landing Page (location /): Dla głównego adresu URL (/) serwowane są pliki z lokalizacji Landing Page. try_files sprawdza, czy plik istnieje i w przeciwnym razie zwraca błąd 404.
• Aplikacja Angular (location /application): Dla ścieżki /application serwowane są pliki z aplikacji Angular. alias wskazuje na lokalizację plików Angular. try_files przekierowuje wszystkie żądania na index.html Angulara, co jest typowe dla aplikacji jednostronicowych (SPA).
• Backend API (location /api): Żądania do /api są przekazywane do backendu. proxy_pass wskazuje na host i port Twojego backendu. Reszta dyrektyw zapewnia poprawne przekazywanie nagłówków i obsługę połączeń.

Podsumowanie

Efektywne zarządzanie ruchem sieciowym w aplikacji złożonej z mikroserwisów wymaga skrupulatnego planowania i dobrego zrozumienia narzędzi, które mamy do dyspozycji. Nginx, w połączeniu z Dockerem, stanowi potężne narzędzie, pozwalające na elastyczne i skuteczne rozdzielenie ruchu do różnych części aplikacji. Przykład, który przedstawiłem, pokazuje, jak możemy skutecznie wykorzystać te technologie, aby osiągnąć optymalne rezultaty.

Dzięki temu podejściu, zarówno SEO, jak i ogólna wydajność aplikacji, mogą zostać znacząco poprawione. Mam nadzieję, że ten wpis będzie dla Ciebie pomocny w tworzeniu własnych, efektywnych rozwiązań.