Samouczek: konfigurowanie usługi CDN dla usługi Azure Static Web Apps

Dodając usługę Azure Front Door jako sieć CDN dla statycznej aplikacji internetowej, możesz skorzystać z bezpiecznego punktu wejścia w celu szybkiego dostarczania aplikacji internetowych.

W przypadku usługi Static Web Apps masz dwie opcje integracji z usługą Azure Front Door. Usługę Azure Front Door można dodać do statycznej aplikacji internetowej, włączając brzeg klasy korporacyjnej, zarządzaną integrację usługi Azure Front Door z usługą Static Web Apps. Alternatywnie możesz ręcznie skonfigurować zasób usługi Azure Front Door przed statyczną aplikacją internetową.

Rozważ poniższe korzyści, aby określić, która opcja najlepiej odpowiada Twoim potrzebom.

Krawędź klasy korporacyjnej zapewnia:

• Zero zmian konfiguracji
• Brak przestoju
• Automatycznie zarządzane certyfikaty SSL i domeny niestandardowe

Ręczna konfiguracja usługi Azure Front Door zapewnia pełną kontrolę nad konfiguracją usługi CDN, w tym możliwość:

• Ogranicz pochodzenie ruchu według źródła
• Dodawanie zapory aplikacji internetowej (WAF)
• Kierowanie między wieloma aplikacjami
• Korzystanie z bardziej zaawansowanych funkcji usługi Azure Front Door

Z tego samouczka dowiesz się, jak dodać usługę Azure Front Door do statycznej aplikacji internetowej.

Wymagania wstępne

• Domena niestandardowa skonfigurowana dla statycznej aplikacji internetowej z czasem wygaśnięcia (TTL) ustawiona na mniej niż 48 godzin.
• Aplikacja wdrożona w usłudze Azure Static Web Apps korzystająca z planu hostingu w warstwie Standardowa.

Włączanie brzegu klasy korporacyjnej w zasobie Static Web Apps

Witryna Azure Portal

1. Przejdź do statycznej aplikacji internetowej w witrynie Azure Portal.

2. W menu po lewej stronie wybierz pozycję Krawędź klasy korporacyjnej.

3. Zaznacz pole wyboru z etykietą Włącz krawędź klasy korporacyjnej.

4. Wybierz pozycję Zapisz.

5. Wybierz przycisk OK , aby potwierdzić zapisanie.

   Włączenie tej funkcji wiąże się z dodatkowymi kosztami.

Interfejs wiersza polecenia platformy Azure

az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

Wymagania wstępne

• Konto platformy Azure z aktywną subskrypcją. Bezpłatne tworzenie konta
• Witryna usługi Azure Static Web Apps. Tworzenie pierwszej statycznej aplikacji internetowej
• Plany Usługi Azure Static Web Apps w warstwie Standardowa i Azure Front Door w warstwie Standardowa/Premium. Aby uzyskać więcej informacji, zobacz Cennik usługi Static Web Apps
• Rozważ użycie krawędzi klasy korporacyjnej, aby szybciej ładować strony, zwiększyć bezpieczeństwo i zoptymalizować niezawodność aplikacji globalnych.

Tworzenie usługi Azure Front Door

1. Zaloguj się w witrynie Azure Portal.

2. Na stronie głównej lub w menu platformy Azure wybierz pozycję + Utwórz zasób. Wyszukaj profile usługi Front Door i CDN, a następnie wybierz pozycję Utwórz>profile usługi Front Door i CDN.

3. Na stronie Porównanie ofert wybierz pozycję Szybkie tworzenie, a następnie wybierz pozycję Kontynuuj, aby utworzyć usługę Front Door.

4. Na stronie Tworzenie profilu usługi Front Door wprowadź lub wybierz następujące ustawienia.

   Ustawienie	Wartość
   Subskrypcja	Wybierz subskrypcję platformy Azure.
   Resource group	Wprowadź nazwę grupy zasobów. Ta nazwa jest często tą samą nazwą grupy używaną przez statyczną aplikację internetową.
   Lokalizacja grupy zasobów	Jeśli tworzysz nową grupę zasobów, wprowadź najbliższą lokalizację.
   Nazwisko	Wprowadź ciąg my-static-web-app-front-door.
   Warstwa	Wybierz opcję Standardowa.
   Nazwa punktu końcowego	Wprowadź unikatową nazwę hosta usługi Front Door.
   Typ rekordu początkowego	Wybierz pozycję Statyczna aplikacja internetowa.
   Nazwa hosta pochodzenia	Wybierz nazwę hosta statycznej aplikacji internetowej z listy rozwijanej.
   Buforowanie	Zaznacz pole wyboru Włącz buforowanie.
   Buforowanie łańcuchów zapytań	Wybierz pozycję Użyj ciągu zapytania
   Kompresja	Wybierz pozycję Włącz kompresję
   Polityka WAF	Wybierz pozycję Utwórz nową lub wybierz z listy rozwijanej istniejące zasady zapory aplikacji internetowej, jeśli chcesz włączyć tę funkcję.

   Uwaga

   Podczas tworzenia profilu usługi Azure Front Door musisz wybrać źródło z tej samej subskrypcji, w której jest tworzona usługa Front Door.

5. Wybierz opcję Przejrzyj i utwórz, a następnie wybierz pozycję Utwórz. Proces tworzenia może potrwać kilka minut.

6. Po zakończeniu wdrażania wybierz pozycję Przejdź do zasobu.

7. Dodaj warunek.

Wyłączanie pamięci podręcznej dla przepływu pracy uwierzytelniania

Uwaga

Wygaśnięcie pamięci podręcznej, ciąg zapytania klucza pamięci podręcznej i akcje zastąpienia grupy pochodzenia są przestarzałe. Te akcje nadal mogą działać normalnie, ale zestaw reguł nie może ulec zmianie. Zastąp te przesłonięcia nowymi akcjami konfiguracji trasy przed zmianą zestawu reguł.

Dodaj następujące ustawienia, aby wyłączyć zasady buforowania usługi Front Door przed próbą buforowania stron uwierzytelniania i autoryzacji.

Dodaj warunek

1. W usłudze Front Door w obszarze Ustawienia wybierz pozycję Zestaw reguł.

2. Wybierz Dodaj.

3. W polu tekstowym Nazwa zestawu reguł wprowadź wartość Zabezpieczenia.

4. W polu tekstowym Nazwa reguły wprowadź ciąg NoCacheAuthRequests.

5. Wybierz pozycję Dodaj warunek.

6. Wybierz pozycję Ścieżka żądania.

7. Wybierz listę rozwijaną Operator , a następnie pozycję Zaczyna się od.

8. Wybierz link Edytuj powyżej pola tekstowego Wartość.

9. Wprowadź /.auth w polu tekstowym, a następnie wybierz pozycję Aktualizuj.

10. Wybierz brak opcji z listy rozwijanej Przekształcanie ciągu.

Dodawanie akcji

1. Wybierz listę rozwijaną Dodaj akcję.

2. Wybierz pozycję Przesłoń konfigurację trasy.

3. Wybierz pozycję Wyłączone na liście rozwijanej Buforowanie .

4. Wybierz pozycję Zapisz.

Kojarzenie reguły z punktem końcowym

Po utworzeniu reguły zastosuj regułę do punktu końcowego usługi Front Door.

1. W usłudze Front Door wybierz pozycję Zestaw reguł, a następnie link Niezwiązany .

   

2. Wybierz nazwę punktu końcowego, do którego chcesz zastosować regułę buforowania, a następnie wybierz przycisk Dalej.

3. Wybierz pozycję Skojarz.

   

Kopiowanie identyfikatora usługi Front Door

Wykonaj poniższe kroki, aby skopiować unikatowy identyfikator wystąpienia usługi Front Door.

1. W usłudze Front Door wybierz link Przegląd w obszarze nawigacji po lewej stronie.

2. Skopiuj wartość z etykietą Identyfikator usługi Front Door i wklej ją do pliku do późniejszego użycia.

   

Aktualizowanie statycznej konfiguracji aplikacji internetowej

Aby ukończyć integrację z usługą Front Door, należy zaktualizować plik konfiguracji aplikacji, aby wykonać następujące funkcje:

• Ograniczanie ruchu do witryny tylko za pośrednictwem usługi Front Door
• Ograniczanie ruchu do witryny tylko z wystąpienia usługi Front Door
• Definiowanie domen, które mogą uzyskiwać dostęp do witryny
• Wyłączanie buforowania dla zabezpieczonych tras

Otwórz plik staticwebapp.config.json witryny i wprowadź następujące zmiany.

1. Ogranicz ruch tylko do używania usługi Front Door, dodając następującą sekcję do pliku konfiguracji:

   "networking": {
     "allowedIpRanges": ["AzureFrontDoor.Backend"]
   }
   

2. Aby zdefiniować, które wystąpienia i domeny usługi Azure Front Door mogą uzyskiwać dostęp do witryny, dodaj sekcję forwardingGateway .

   "forwardingGateway": {
     "requiredHeaders": {
       "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
     },
     "allowedForwardedHosts": [
       "my-sitename.azurefd.net"
     ]
   }
   

   Najpierw skonfiguruj aplikację tak, aby zezwalała tylko na ruch z wystąpienia usługi Front Door. W każdym żądaniu zaplecza usługa Front Door automatycznie dodaje X-Azure-FDID nagłówek zawierający identyfikator wystąpienia usługi Front Door. Konfigurując statyczną aplikację internetową tak, aby wymagać tego nagłówka, ogranicza ruch wyłącznie do wystąpienia usługi Front Door. forwardingGateway W sekcji w pliku konfiguracji dodaj sekcję requiredHeaders i zdefiniuj X-Azure-FDID nagłówek. Zastąp <YOUR-FRONT-DOOR-ID> element identyfikatorem usługi Front Door, który został wcześniej odłożone.

   Następnie dodaj nazwę hosta usługi Azure Front Door (nie nazwę hosta usługi Azure Static Web Apps) do tablicy allowedForwardedHosts . Jeśli masz domeny niestandardowe skonfigurowane w wystąpieniu usługi Front Door, uwzględnij je również na tej liście.

   W tym przykładzie zastąp my-sitename.azurefd.net ciąg nazwą hosta usługi Azure Front Door dla swojej witryny.

3. W przypadku wszystkich zabezpieczonych tras w aplikacji wyłącz buforowanie usługi Azure Front Door, dodając "Cache-Control": "no-store" do definicji nagłówka trasy.

   {
       ...
       "routes": [
           {
               "route": "/members",
               "allowedRoles": ["authenticated", "members"],
               "headers": {
                   "Cache-Control": "no-store"
               }
           }
       ]
       ...
   }
   

W przypadku tej konfiguracji witryna nie jest już dostępna za pośrednictwem wygenerowanej *.azurestaticapps.net nazwy hosta, ale wyłącznie za pośrednictwem nazw hostów skonfigurowanych w wystąpieniu usługi Front Door.

Kwestie wymagające rozważenia

• Domeny niestandardowe: teraz, gdy usługa Front Door zarządza witryną, nie używasz już funkcji domeny niestandardowej usługi Azure Static Web Apps. Usługa Azure Front Door ma oddzielny proces dodawania domeny niestandardowej. Zobacz Dodawanie domeny niestandardowej do usługi Front Door. Po dodaniu domeny niestandardowej do usługi Front Door należy zaktualizować statyczny plik konfiguracji aplikacji internetowej, aby uwzględnić ją na allowedForwardedHosts liście.

• Statystyki ruchu: domyślnie usługa Azure Front Door konfiguruje sondy kondycji , które mogą mieć wpływ na statystyki ruchu. Możesz edytować wartości domyślne dla sond kondycji.

• Obsługa starych wersji: podczas wdrażania aktualizacji istniejących plików w statycznej aplikacji internetowej usługa Azure Front Door może nadal obsługiwać starsze wersje plików do czasu wygaśnięcia . Przeczyść pamięć podręczną usługi Azure Front Door dla ścieżek, których dotyczy problem, aby upewnić się, że są obsługiwane najnowsze pliki.

Czyszczenie zasobów

Jeśli nie chcesz już używać zasobów utworzonych w tym samouczku, usuń wystąpienia usługi Azure Static Web Apps i Azure Front Door.

Następne kroki

Dodawanie interfejsu API