Konfigurera lokal utveckling för Azure Static Web Apps

När den publiceras i molnet länkar en Azure Static Web Apps-webbplats samman många tjänster som fungerar tillsammans som om de vore samma program. Här är några exempel på sådana tjänster:

  • Den statiska webbappen
  • Azure Functions API
  • Autentiserings- och auktoriseringstjänster
  • Routnings- och konfigurationstjänster

Dessa tjänster måste kommunicera med varandra och Azure Static Web Apps hanterar den här integreringen åt dig i molnet.

De här tjänsterna körs dock inte automatiskt.

För att ge en liknande upplevelse som vad du får i Azure tillhandahåller Azure Static Web Apps CLI följande tjänster:

  • En lokal statisk platsserver
  • En proxy till klientdelsramverkets utvecklingsserver
  • En proxy till dina API-slutpunkter – tillgänglig via Azure Functions Core Tools
  • En falsk autentiserings- och auktoriseringsserver
  • Tillämpning av lokala vägar och konfigurationsinställningar

Anteckning

Webbplatser som skapats med ett klientdelsramverk kräver ofta en proxykonfigurationsinställning för att hantera begäranden under api vägen korrekt. När du använder Azure Static Web Apps CLI är /apiproxyplatsvärdet och utan CLI är http://localhost:7071/apivärdet .

Så här fungerar det

Följande diagram visar hur begäranden hanteras lokalt.

Azure Static Web App CLI request and response flow

Viktigt

Gå till http://localhost:4280 för att komma åt programmet som hanteras av CLI.

  • Begäranden som görs till porten 4280 vidarebefordras till lämplig server beroende på typen av begäran.

  • Begäranden om statiskt innehåll , till exempel HTML eller CSS, hanteras antingen av den interna cli-servern för statiskt innehåll eller av klientdelsramverksservern för felsökning.

  • Autentiserings- och auktoriseringsbegäranden hanteras av en emulator som tillhandahåller en falsk identitetsprofil till din app.

  • Functions Core Tools-körningen hanterar begäranden till webbplatsens API.

  • Svar från alla tjänster returneras till webbläsaren som om de vore ett enda program.

I följande artikel beskrivs stegen för att köra ett nodbaserat program, men processen är densamma för alla språk eller miljöer. När du startar användargränssnittet och Azure Functions API-apparna oberoende av varandra startar du Static Web Apps CLI och pekar det på de appar som körs med följande kommando:

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

Förutsättningar

Kom igång

Öppna en terminal till rotmappen för din befintliga Azure Static Web Apps-webbplats.

  1. Installera CLI.

    npm install -g @azure/static-web-apps-cli azure-functions-core-tools
    
  2. Skapa din app om det behövs av ditt program.

    Kör npm run buildeller motsvarande kommando för projektet.

  3. Ändra till utdatakatalogen för din app. Utdatamappar kallas ofta build eller liknande.

  4. Starta CLI.

    swa start
    
  5. Gå till http://localhost:4280 för att visa appen i webbläsaren.

Andra sätt att starta CLI

Description Kommando
Hantera en specifik mapp swa start ./output-folder
Använda en ramverksutvecklingsserver som körs swa start http://localhost:3000
Starta en Functions-app i en mapp swa start ./output-folder --api-location ./api
Använda en Functions-app som körs swa start ./output-folder --api-location http://localhost:7071

Emulering av auktorisering och autentisering

Static Web Apps CLI emulerar säkerhetsflödet som implementeras i Azure. När en användare loggar in kan du definiera en falsk identitetsprofil som returneras till appen.

När du till exempel försöker navigera till /.auth/login/githubreturneras en sida som gör att du kan definiera en identitetsprofil.

Anteckning

Emulatorn fungerar med alla säkerhetsleverantörer, inte bara GitHub.

Local authentication and authorization emulator

Emulatorn innehåller en sida där du kan ange följande värden för klientens huvudnamn :

Värde Beskrivning
Användarnamn Kontonamnet som är associerat med säkerhetsprovidern. Det här värdet visas som userDetails egenskapen i klientobjektet och genereras automatiskt om du inte anger något värde.
Användar-ID Värde som genereras automatiskt av CLI.
Roller En lista med rollnamn, där varje namn finns på en ny rad.

När du har loggat in:

  • Du kan använda /.auth/me slutpunkten eller en funktionsslutpunkt för att hämta användarens klienthuvudnamn.

  • Navigera till rensar /.auth/logout klientens huvudnamn och loggar ut den falska användaren.

Felsökning

Det finns två felsökningskontexter i en statisk webbapp. Den första gäller den statiska innehållswebbplatsen och den andra gäller API-funktioner. Lokal felsökning är möjlig genom att tillåta Static Web Apps CLI att använda utvecklingsservrar för en eller båda dessa kontexter.

Följande steg visar ett vanligt scenario som använder utvecklingsservrar för båda felsökningskontexterna.

  1. Starta den statiska platsutvecklingsservern. Det här kommandot är specifikt för det klientdelsramverk som du använder, men kommer ofta i form av kommandon som npm run build, npm starteller npm run dev.

  2. Öppna API-programmappen i Visual Studio Code och starta en felsökningssession.

  3. Starta Static Web Apps CLI med följande kommando.

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

    Ersätt <DEV-SERVER-PORT-NUMBER> med utvecklingsserverns portnummer.

Följande skärmbilder visar terminalerna för ett typiskt felsökningsscenario:

Den statiska innehållswebbplatsen körs via npm run dev.

Static site development server

Azure Functions API-programmet kör en felsökningssession i Visual Studio Code.

Visual Studio Code API debugging

Static Web Apps CLI startas med båda utvecklingsservrarna.

Azure Static Web Apps CLI terminal

Nu dirigeras begäranden som går via porten 4280 till antingen den statiska innehållsutvecklingsservern eller API-felsökningssessionen.

Mer information om olika felsökningsscenarier, med vägledning om hur du anpassar portar och serveradresser, finns i AZURE Static Web Apps CLI-lagringsplatsen.

Exempel på felsökningskonfiguration

Visual Studio Code använder en fil för att aktivera felsökningssessioner i redigeraren. Om Visual Studio Code inte genererar en launch.json-fil åt dig kan du placera följande konfiguration i .vscode/launch.json.

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

Nästa steg