Bereitstellen der App für Azure-Funktionen und Azure-Container-Apps

In dieser Übung erfahren Sie, wie Sie die in früheren Übungen beschriebenen Microsoft Graph- und ACS-Funktionen in Azure Functions bereitstellen. Sie erstellen auch ein Containerimage und stellen es in Azure-Container-Apps bereit.

Bereitstellen in Azure Functions

Bereitstellen in Azure Container Apps

1. Die erste Aufgabe, die Sie ausführen, besteht darin, eine neue Azure Container Registry (ACR) -Ressource zu erstellen. Nachdem die Registrierung erstellt wurde, erstellen Sie ein Image und übertragen es an die Registrierung.

2. Öffnen Sie ein Befehlsfenster, und führen Sie den folgenden Befehl aus, um sich bei Ihrem Azure-Abonnement anzumelden:

   az login
   

3. Fügen Sie die folgenden Shellvariablen hinzu, indem Sie die Werte für die Platzhalter nach Bedarf ersetzen. Fügen Sie Ihre <GITHUB_USERNAME> als Kleinbuchstaben hinzu, und ersetzen Sie Ihre Azure Functions-Domäne durch den <AZURE_FUNCTIONS_DOMAIN> Wert (schließen Sie den https:// Domänenwert ein).

   • Schlagen
   • PowerShell

   GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
   RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
   ACR_NAME="aca"$GITHUB_USERNAME
   AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"
   

4. Erstellen Sie eine neue Azure Container Registry-Ressource , indem Sie den folgenden Befehl ausführen:

   • Schlagen
   • PowerShell

   az acr create \
       --resource-group $RESOURCE_GROUP \
       --name $ACR_NAME \
       --sku Basic \
       --admin-enabled true
   

5. Öffnen Sie die Datei "client/react/Dockerfile " in Ihrem Editor, und beachten Sie, dass die folgenden Aufgaben ausgeführt werden:

   • Die React-Anwendung wird erstellt und der Buildphase zugewiesen.
   • Der nginx-Server ist konfiguriert, und das Ergebnis der Build-Phase wird in das nginx-Serverimage kopiert.

6. Erstellen Sie das Containerimage in Azure, indem Sie den folgenden Befehl aus dem Stammordner des Client-/React-Ordners ausführen. Ersetzen Sie <YOUR_FUNCTIONS_DOMAIN> durch Ihre Azure Functions-Domäne, die Sie weiter oben in diese Übung in eine lokale Datei kopiert haben.

   • Schlagen
   • PowerShell

   az acr build --registry $ACR_NAME --image acs-to-teams-meeting \
     --build-arg REACT_APP_ACS_USER_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerAcsToken \
     --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerTeamsUrl .
   

7. Führen Sie den folgenden Befehl aus, um die Bilder in Ihrer Registrierung auflisten zu können. Ihr neues Bild sollte aufgeführt sein.

   az acr repository list --name $ACR_NAME --output table
   

8. Nachdem das Image bereitgestellt wurde, müssen Sie eine Azure-Container-App erstellen, die den Container ausführen kann.

9. Besuchen Sie das Azure-Portal in Ihrem Browser, und melden Sie sich an.

10. Geben Sie Container-Apps in der oberen Suchleiste ein, und wählen Sie "Container-Apps " aus den angezeigten Optionen aus.

11. Wählen Sie auf der Symbolleiste "Erstellen" aus.

    Hinweis

    Obwohl Sie das Azure-Portal verwenden, kann eine Container-App auch mithilfe der Azure CLI erstellt werden. Weitere Informationen finden Sie in der Schnellstartanleitung: Bereitstellen Ihrer ersten Container-App. Sie sehen ein Beispiel dafür, wie die Azure CLI am Ende dieser Übung verwendet werden kann.

12. Führen Sie die folgenden Aufgaben aus:

    • Wählen Sie Ihr Abonnement aus.
    • Wählen Sie die zu verwendende Ressourcengruppe aus (erstellen Sie bei Bedarf eine neue Gruppe). Sie können dieselbe Ressourcengruppe verwenden, die Sie für Ihre ACS-Ressource verwendet haben, wenn Sie möchten. Kopieren Sie ihren Ressourcengruppennamen in dieselbe lokale Datei, in der Sie Ihre Azure Functions-Domäne gespeichert haben.
    • Geben Sie einen Container-App-Namen von acs-to-teams-meeting ein.
    • Wählen Sie eine Region aus.
    • Wählen Sie " Neu erstellen " im Abschnitt "Container-Apps-Umgebung " aus.
    • Geben Sie einen Umgebungsnamen von acs-to-teams-meeting-env ein.
    • Wählen Sie die Schaltfläche Erstellen.
    • Wählen Sie "Weiter" aus: App-Einstellungen >.

13. Geben Sie die folgenden Werte im Bildschirm " Container-App erstellen " ein:

    • Deaktivieren Sie das Kontrollkästchen "Schnellstartbild verwenden ".
    • Name: acs-to-teams-meeting
    • Bildquelle: Azure Container Registry
    • Registrierung: <YOUR_ACR_REGISTRY_NAME.azurecr.io>
    • Bild: acs-to-teams-meeting
    • Bild-Tag: neueste
    • CPU und Arbeitsspeicher: 0,25 CPU-Kerne, -.5 Gi Arbeitsspeicher

14. Gehen Sie im Abschnitt "Anwendungseingangseinstellungen " wie folgt vor:

    • Aktivieren Sie das Kontrollkästchen Aktiviert.
    • Wählen Sie das Optionsfeld Datenverkehr von überall aus akzeptieren aus.

    Dadurch wird ein Einstiegspunkt (Ingress) für Ihre React-Anwendung erstellt und ermöglicht es, von überall aus aufgerufen zu werden. Azure Container Apps leitet den gesamten Datenverkehr zu HTTPS um.

    • Zielport: 80

15. Klicken Sie auf Überprüfen + erstellen. Nachdem die Überprüfung bestanden wurde, wählen Sie die Schaltfläche " Erstellen " aus.

    Wenn sie einen Fehler erhalten, liegt dies möglicherweise daran, dass Ihre Container-Apps-Umgebung zu lange inaktiv ist. Die einfachste Lösung besteht darin, den Prozess des Erneuten Erstellens der Container-App zu durchlaufen. Alternativ können Sie den folgenden Befehl ausführen, um die Container-App mit der Azure CLI zu erstellen:

    • Schlagen
    • PowerShell

    az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP \
        --location westus --image acs-to-teams-meeting \
        --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env \
        --ingress-enabled true --ingress-target-port 80 --ingress-type External \
        --ingress-protocol Https --ingress-traffic Anywhere
    

16. Navigieren Sie nach Abschluss der Bereitstellung der Container-App im Azure-Portal zu ihr, und wählen Sie im Übersichtsbildschirm die Anwendungs-URL aus, um die Anwendung anzuzeigen, die im nginx-Container ausgeführt wird.

Nächster Schritt