Pubblicare l'app su Azure Static Web Apps

In questo esercizio si apprenderà come distribuire l'app React ACS e Funzioni di Azure nel cloud usando App Web statiche di Azure.

1. Visitare il portale di Azure nel browser e accedere.

2. Digitare app Web statiche nella barra di ricerca superiore e selezionare App Web statiche nelle opzioni visualizzate.

   

3. Selezionare Crea sulla barra degli strumenti.

4. Eseguire le attività seguenti:

   • Selezionare la sottoscrizione.
   • Selezionare il gruppo di risorse da usare (crearne uno nuovo, se necessario). Se si vuole, è possibile usare lo stesso gruppo di risorse usato per ACS.
   • Immettere il nome di un'app Web statica di Azure acs-to-teams-meeting.
   • Selezionare il tipo di piano gratuito .
   • Scegliere un'area.

5. Selezionare il pulsante di opzione GitHub e accedere all'account GitHub.

6. Dopo aver eseguito l'accesso, selezionare GitHub:

   • Organizzazione
   • Repository: selezionare il repository MicrosoftCloud creato in precedenza in questa esercitazione
   • Ramo: selezionare main

7. Nella sezione Dettagli compilazione eseguite le seguenti attività:

   • Set di impostazioni di compilazione: React
   • Percorso dell'app: /samples/acs-to-teams-meeting/client/react
   • Posizione API:
   TypeScript

   /samples/acs-to-teams-meeting/server/typescript

   C#

   /samples/acs-to-teams-meeting/server/csharp

   • Percorso di output: build

8. Selezionare Rivedi e crea.

9. Rivedere i dettagli, quindi selezionare Crea.

10. Nota l'URL associato alla tua app Web statica. Copiare l'URL visualizzato nella schermata Panoramica in un file. Questo elemento sarà necessario più tardi nell'esercizio.

11. Selezionare Impostazioni -> Configurazione per la nuova app Web statica.

12. Aggiungere tutte le coppie chiave/valore seguenti nelle impostazioni applicazione selezionando il pulsante + Aggiungi . Ottieni valori dal local.settings.json nella cartella server/typescript.

    # Get the values from your local.settings.json file
    TENANT_ID: <YOUR_VALUE>
    CLIENT_ID: <YOUR_VALUE>
    CLIENT_SECRET: <YOUR_VALUE>
    USER_ID: <YOUR_VALUE>
    ACS_CONNECTION_STRING: <YOUR_VALUE>
    

13. Selezionare il pulsante Salva nella parte superiore della schermata Configurazione nel portale di Azure.

14. Dopo aver completato la configurazione dell'app Web statica di Azure, tornare al repository GitHub (quello creato in precedenza) nel browser e notare che un file .yml è stato aggiunto nella cartella .github/workflows .

15. Effettua il pull delle modifiche più recenti dal tuo repository GitHub al tuo computer eseguendo il comando seguente dalla radice del repository locale MicrosoftCloud:

    git pull
    

16. Aprire il file .yml nella cartella .github/workflows in VS Code e aggiungere il codice YAML seguente subito dopo il ###### End of Repository/Build Configurations ###### commento. Sostituire i segnaposto <YOUR_AZURE_SWA_DOMAIN> con il valore dell'URL di Azure Static Web Apps.

    IMPORTANTE: assicurarsi che la proprietà env: sia rientrata correttamente. Deve corrispondere al rientro della proprietà with: sopra di essa.

    env: # Add environment variables here
        REACT_APP_ACS_USER_FUNCTION: https://<YOUR_AZURE_SWA_DOMAIN>/api/httpTriggerAcsToken
        REACT_APP_TEAMS_MEETING_FUNCTION: https://<YOUR_AZURE_SWA_DOMAIN>/api/httpTriggerTeamsUrl
    

    Annotazioni

    Verranno aggiunte variabili di ambiente al processo di compilazione per l'app React in modo da sapere quali API chiamare per ottenere il token utente ACS e per creare una riunione di Teams.

17. Salvare il file .yml ed eseguire il push delle modifiche nel repository GitHub. Verrà attivata una nuova compilazione dell'applicazione React e quindi la distribuirà nell'app Web statica di Azure.

18. Al termine del processo di compilazione, visitare l'URL dell'app Web statica di Azure e verrà visualizzata l'applicazione in esecuzione.

19. Hai distribuito con successo la tua applicazione utilizzando Azure Static Web Apps!

Passaggio successivo

Distribuire l'app in Funzioni di Azure e app Azure Container