Wdrażanie aplikacji internetowej w usłudze Azure Static Web Apps

W tym artykule utworzysz nową aplikację internetową z wybraną strukturą, uruchomisz ją lokalnie, a następnie wdrożysz w usłudze Azure Static Web Apps.

Wymagania wstępne

Do ukończenia tego samouczka niezbędne są następujące elementy:

Potrzebny jest również edytor tekstów. W przypadku pracy z platformą Azure zaleca się użycie programu Visual Studio Code .

Aplikację utworzoną w tym artykule możesz uruchomić na wybranej platformie, w tym: Linux, macOS, Windows lub Podsystem Windows dla systemu Linux.

Tworzenie aplikacji internetowej

1. Otwórz okno terminalu.

3. Wybierz pozycję Cmd/Ctrl+C, aby zatrzymać serwer deweloperów.

Tworzenie statycznej aplikacji internetowej na platformie Azure

Statyczną aplikację internetową można utworzyć przy użyciu witryny Azure Portal, interfejsu wiersza polecenia platformy Azure, programu Azure PowerShell lub programu Visual Studio Code (z rozszerzeniem Azure Static Web Apps). W tym samouczku jest używany interfejs wiersza polecenia platformy Azure.

1. Zaloguj się do interfejsu wiersza polecenia platformy Azure:

   az login
   

   Domyślnie to polecenie otwiera przeglądarkę, aby ukończyć proces. Interfejs wiersza polecenia platformy Azure obsługuje różne metody logowania, jeśli ta metoda nie działa w danym środowisku.

2. Jeśli masz wiele subskrypcji, może być konieczne wybranie subskrypcji. Bieżącą subskrypcję można wyświetlić przy użyciu następującego polecenia:

   az account show
   

   Aby wybrać subskrypcję, możesz uruchomić az account set polecenie .

   az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"
   

3. Utwórz grupę zasobów.

   Grupy zasobów służą do grupowania zasobów platformy Azure.

   az group create -n swa-tutorial -l centralus --query "properties.provisioningState"
   

   Parametr -n odwołuje się do nazwy witryny, a -l parametr jest nazwą lokalizacji platformy Azure. Polecenie kończy się --query "properties.provisioningState" z poleceniem , więc polecenie zwraca tylko komunikat o powodzeniu lub błędzie.

4. Utwórz statyczną aplikację internetową w nowo utworzonej grupie zasobów.

   az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"
   

   Parametr -n odwołuje się do nazwy witryny, a -g parametr odwołuje się do nazwy grupy zasobów platformy Azure. Upewnij się, że w poprzednim kroku określono tę samą nazwę grupy zasobów. Statyczna aplikacja internetowa jest globalnie dystrybuowana, więc lokalizacja nie jest ważna dla sposobu wdrażania aplikacji.

   Polecenie jest skonfigurowane do zwracania adresu URL aplikacji internetowej. Możesz skopiować wartość z okna terminalu do przeglądarki, aby wyświetlić wdrożona aplikacja internetowa.

Konfigurowanie pod kątem wdrożenia

1. staticwebapp.config.json Dodaj plik do kodu aplikacji z następującą zawartością:

   {
       "navigationFallback": {
           "rewrite": "/index.html"
       }
   }
   

   Zdefiniowanie trasy rezerwowej umożliwia lokacji serwer plików index.html dla wszystkich żądań wysyłanych do domeny.

   Sprawdź ten plik w systemie kontroli kodu źródłowego (takim jak git), jeśli używasz go.

2. Zainstaluj interfejs wiersza polecenia usługi Azure Static Web Apps (SWA) w projekcie.

   npm install -D @azure/static-web-apps-cli
   

   Interfejs wiersza polecenia swa ułatwia tworzenie i testowanie lokacji lokalnie przed wdrożeniem jej w chmurze.

3. Utwórz nowy plik dla projektu i nadaj mu swa-cli.config.jsonnazwę .

   W swa-cli.config.json pliku opisano sposób kompilowania i wdrażania witryny.

   Po utworzeniu tego pliku możesz wygenerować jego zawartość przy użyciu npx swa init polecenia .

   npx swa init --yes
   

4. Skompiluj aplikację do dystrybucji.

   npx swa build
   

5. Zaloguj się do platformy Azure przy użyciu interfejsu wiersza polecenia swa.

   npx swa login --resource-group swa-tutorial --app-name swa-demo-site
   

   Użyj tej samej nazwy grupy zasobów i statycznej nazwy aplikacji internetowej utworzonej w poprzedniej sekcji. Podczas próby zalogowania zostanie otwarta przeglądarka, aby ukończyć proces w razie potrzeby.

Wdrażanie witryny na platformie Azure

Wdróż kod w statycznej aplikacji internetowej:

npx swa deploy --env production

Wdrożenie aplikacji może potrwać kilka minut. Po zakończeniu zostanie wyświetlony adres URL witryny.

W większości systemów można wybrać adres URL witryny, aby otworzyć ją w domyślnej przeglądarce.

Czyszczenie zasobów (opcjonalnie)

Jeśli nie kontynuujesz pracy z innymi samouczkami, usuń grupę zasobów i zasoby platformy Azure:

az group delete -n swa-tutorial

Usunięcie grupy zasobów spowoduje usunięcie wszystkich zawartych w niej zasobów. Tej akcji nie można cofnąć.

Następne kroki

Powiązana zawartość

• Uwierzytelnianie i autoryzacja
• Połączenia bazy danych
• Domeny niestandardowe
• Seria wideo: wdrażanie witryn internetowych w chmurze za pomocą usługi Azure Static Web Apps