Set up local development for Azure Static Web Apps (Konfigurowanie lokalnego tworzenia aplikacji dla usługi Azure Static Web Apps)

Po opublikowaniu w chmurze witryna usługi Azure Static Web Apps łączy ze sobą wiele usług, które współpracują ze sobą tak, jakby były one tą samą aplikacją. Usługi te obejmują:

• Statyczna aplikacja internetowa
• Azure Functions API
• Usługi uwierzytelniania i autoryzacji
• Usługi routingu i konfiguracji

Te usługi muszą komunikować się ze sobą, a usługa Azure Static Web Apps obsługuje tę integrację w chmurze.

Jednak po uruchomieniu aplikacji lokalnie te usługi nie są automatycznie powiązane.

Aby zapewnić podobne środowisko, jak w przypadku korzystania z platformy Azure, interfejs wiersza polecenia usługi Azure Static Web Apps udostępnia następujące usługi:

• Lokalny serwer statycznej lokacji
• Serwer proxy do serwera programistycznego platformy frontonu
• Serwer proxy dla punktów końcowych interfejsu API — dostępny za pośrednictwem narzędzi Azure Functions Core Tools
• Pozorowanie uwierzytelniania i serwera autoryzacji
• Wymuszanie tras lokalnych i ustawień konfiguracji

Jak to działa

Na poniższym wykresie przedstawiono sposób obsługi żądań lokalnie.

• Żądania wysyłane do portu 4280 są przekazywane do odpowiedniego serwera w zależności od typu żądania.

• Żądania zawartości statycznej, takie jak HTML lub CSS, są obsługiwane przez wewnętrzny serwer zawartości statycznej interfejsu wiersza polecenia lub przez serwer platformy frontonu na potrzeby debugowania.

• Żądania uwierzytelniania i autoryzacji są obsługiwane przez emulator, który udostępnia aplikacji fałszywy profil tożsamości.

• Środowisko uruchomieniowe^{narzędzi Functions Core Tools 1} obsługuje żądania do interfejsu API witryny.

• Odpowiedzi ze wszystkich usług są zwracane do przeglądarki tak, jakby wszystkie były pojedynczą aplikacją.

Po samodzielnym uruchomieniu interfejsu użytkownika i aplikacji interfejsu API usługi Azure Functions uruchom interfejs wiersza polecenia usługi Static Web Apps i wskaż uruchomione aplikacje przy użyciu następującego polecenia:

swa start http://localhost:<DEV-SERVER-PORT-NUMBER> --api-location http://localhost:7071

Opcjonalnie, jeśli używasz swa init polecenia, interfejs wiersza polecenia usługi Static Web Apps analizuje kod aplikacji i kompiluje plik konfiguracji swa-cli.config.json dla interfejsu wiersza polecenia. Gdy używasz pliku swa-cli.config.json , możesz uruchomić swa start polecenie , aby uruchomić aplikację lokalnie.

¹ Narzędzia Azure Functions Core Tools są instalowane automatycznie przez interfejs wiersza polecenia, jeśli nie są jeszcze w systemie.

W poniższym artykule szczegółowo opisano kroki uruchamiania aplikacji opartej na węźle, ale proces jest taki sam dla dowolnego języka lub środowiska.

Wymagania wstępne

• Istniejąca witryna usługi Azure Static Web Apps: jeśli jej nie masz, zacznij od aplikacji początkowej vanilla-api .
• Node.js za pomocą narzędzia npm: uruchom wersję Node.js LTS, która obejmuje dostęp do narzędzia npm.
• Visual Studio Code: używany do debugowania aplikacji interfejsu API, ale nie jest wymagany dla interfejsu wiersza polecenia.

Rozpocznij

Otwórz terminal w folderze głównym istniejącej witryny azure Static Web Apps.

1. Zainstaluj interfejs wiersza polecenia.

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

   Napiwek

   Jeśli chcesz zainstalować interfejs wiersza polecenia programu SWA globalnie, użyj zamiast -Dprogramu -g . Zdecydowanie zaleca się jednak zainstalowanie struktury SWA jako zależności programistycznej.

2. Skompiluj aplikację, jeśli jest to wymagane przez aplikację.

   Uruchom npm run buildpolecenie , lub równoważne polecenie dla projektu.

3. Zainicjuj repozytorium interfejsu wiersza polecenia.

   swa init
   

   Odpowiedz na pytania zadawane przez interfejs wiersza polecenia, aby sprawdzić, czy ustawienia konfiguracji są poprawne.

4. Uruchom interfejs wiersza polecenia.

   swa start
   

5. Przejdź do witryny , http://localhost:4280 aby wyświetlić aplikację w przeglądarce.

Inne sposoby uruchamiania interfejsu wiersza polecenia

Emulacja autoryzacji i uwierzytelniania

Interfejs wiersza polecenia usługi Static Web Apps emuluje przepływ zabezpieczeń zaimplementowany na platformie Azure. Po zalogowaniu użytkownika można zdefiniować fałszywy profil tożsamości zwrócony do aplikacji.

Na przykład podczas próby przejścia do /.auth/login/githubstrony zostanie zwrócona strona, która umożliwia zdefiniowanie profilu tożsamości.

Emulator udostępnia stronę umożliwiającą podanie następujących wartości podmiotu zabezpieczeń klienta:

Po zalogowaniu:

• Możesz użyć punktu końcowego /.auth/me lub punktu końcowego funkcji, aby pobrać jednostkę klienta użytkownika.

• Przejście w celu /.auth/logout wyczyszczenia podmiotu zabezpieczeń klienta i wylogowanie się z pozoru użytkownika.

Debugowanie

Istnieją dwa konteksty debugowania w statycznej aplikacji internetowej. Pierwsza dotyczy witryny zawartości statycznej, a druga dotyczy funkcji interfejsu API. Lokalne debugowanie jest możliwe, zezwalając interfejsowi wiersza polecenia usługi Static Web Apps na używanie serwerów deweloperskich dla jednego lub obu tych kontekstów.

W poniższych krokach przedstawiono typowy scenariusz korzystający z serwerów deweloperskich na potrzeby obu kontekstów debugowania.

1. Uruchom serwer tworzenia statycznej lokacji. To polecenie jest specyficzne dla używanej platformy frontonu, ale często występuje w postaci poleceń, takich jak npm run build, npm startlub npm run dev.

2. Otwórz folder aplikacji interfejsu API w programie Visual Studio Code i rozpocznij sesję debugowania.

3. Uruchom interfejs wiersza polecenia usługi Static Web Apps przy użyciu następującego polecenia.

   swa start http://localhost:<DEV-SERVER-PORT-NUMBER> --appDevserverUrl http://localhost:7071
   

   Zastąp <DEV_SERVER_PORT_NUMBER> ciąg numerem portu serwera deweloperskiego.

Na poniższych zrzutach ekranu przedstawiono terminale dla typowego scenariusza debugowania:

Witryna zawartości statycznej jest uruchomiona za pośrednictwem polecenia npm run dev.

Aplikacja interfejsu API usługi Azure Functions uruchamia sesję debugowania w programie Visual Studio Code.

Interfejs wiersza polecenia usługi Static Web Apps jest uruchamiany przy użyciu obu serwerów deweloperskich.

Teraz żądania przechodzące przez port 4280 są kierowane do serwera programowania zawartości statycznej lub sesji debugowania interfejsu API.

Aby uzyskać więcej informacji na temat różnych scenariuszy debugowania, ze wskazówkami dotyczącymi dostosowywania portów i adresów serwera, zobacz repozytorium interfejsu wiersza polecenia usługi Azure Static Web Apps.

Przykładowa konfiguracja debugowania

Program Visual Studio Code używa pliku do włączania sesji debugowania w edytorze. Jeśli program Visual Studio Code nie generuje pliku launch.json, możesz umieścić następującą konfigurację w pliku .vscode/launch.json.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Node Functions",
            "type": "node",
            "request": "attach",
            "port": 9229,
            "preLaunchTask": "func: host start"
        }
    ]
}

Następne kroki