Lernprogramm: Erstellen einer sicheren N-Ebene-App in Azure App Service

Viele Anwendungen verfügen über mehr als eine einzelne Komponente. Sie können beispielsweise über ein Frontend verfügen, das öffentlich zugänglich ist und eine Verbindung mit einer Back-End-API oder Web-App herstellt. Die Back-End-Ressourcen können eine Verbindung mit einer Datenbank, einem Speicherkonto, einem Schlüsseltresor, einem anderen virtuellen Computer oder einer Kombination dieser Ressourcen herstellen. Diese Architektur ist die Grundlage einer N-Ebene-Anwendung. Es ist wichtig, dass Anwendungen wie diese so entwickelt werden, um Back-End-Ressourcen möglichst zu schützen.

In diesem Lernprogramm wird beschrieben, wie Sie eine sichere N-Tier-Anwendung mit einer Front-End-Web-App bereitstellen, die eine Verbindung mit einer anderen netzwerkisolten Web-App herstellt. Der gesamte Datenverkehr wird durch die Verwendung von Virtual Network integration und privaten Endpunkten innerhalb Ihres Azure Virtual Network isoliert. Eine umfassendere Anleitung, die andere Szenarien enthält, finden Sie unter:

In diesem Tutorial lernen Sie:

Erstellen eines virtuellen Netzwerks und Subnetze für die Integration des virtuellen App Service-Netzwerks
Erstellen privater DNS-Zonen und privater Endpunkte
Konfigurieren der Integration virtueller Netzwerke in App Service
Deaktivieren der Standardauthentifizierung im App-Dienst
Fortlaufende Bereitstellung in einer gesperrten Back-End-Web-App

Voraussetzungen

Das Lernprogramm verwendet zwei Beispiel-Node.js Apps, die auf GitHub gehostet werden. Erstellen Sie ein kostenloses Konto, wenn Sie noch nicht über ein GitHub-Konto verfügen.

Wenn Sie nicht über ein Azure-Konto verfügen, erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Für dieses Tutorial benötigen Sie Folgendes:

Verwenden Sie die Bash-Umgebung in Azure Cloud Shell. Weitere Informationen finden Sie unter "Erste Schritte mit Azure Cloud Shell".
Wenn Sie CLI-Referenzbefehle lieber lokal ausführen, installieren Sie die Azure CLI. Wenn Sie Windows oder macOS ausführen, sollten Sie die Azure CLI in einem Docker-Container ausführen. Weitere Informationen finden Sie unter Ausführen der Azure CLI in einem Docker-Container.
- Wenn Sie eine lokale Installation verwenden, melden Sie sich mithilfe des Befehls az login bei der Azure CLI an. Um den Authentifizierungsprozess abzuschließen, führen Sie die in Ihrem Terminal angezeigten Schritte aus. Weitere Anmeldeoptionen finden Sie unter Authentifizieren bei Azure mithilfe der Azure CLI.
- Installieren Sie die Azure CLI-Erweiterung bei der ersten Verwendung, wenn Sie dazu aufgefordert werden. Weitere Informationen zu Erweiterungen finden Sie unter Verwenden und Verwalten von Erweiterungen mit der Azure CLI.
- Führen Sie az version aus, um die installierte Version und die abhängigen Bibliotheken zu ermitteln. Führen Sie az upgrade aus, um das Upgrade auf die aktuelle Version durchzuführen.

Überprüfen der Szenarioarchitektur

In diesem Lernprogramm wird veranschaulicht, wie Sie eine Architektur konfigurieren, die im folgenden Diagramm veranschaulicht wird. Das Szenario stellt eine der möglichen N-Ebenen-Konfigurationen in App Service dar. Sie können die in diesem Tutorial behandelten Konzepte verwenden, um komplexere n-schichtige Apps zu erstellen.

Diagramm der Architektur für einen N-Ebenen-App-Dienst, einschließlich der Integration des virtuellen Netzwerks mit einer Frontend-App und einem privaten Endpunkt im Back-End.

Die Architektur verfügt über ein virtuelles Netzwerk , das zwei Subnetze enthält. Ein Subnetz ist in die Frontend-Web-App integriert, und das andere Subnetz verfügt über einen privaten Endpunkt für die Back-End-Web-App. Das virtuelle Netzwerk blockiert den gesamten eingehenden Netzwerkdatenverkehr, mit Ausnahme des Datenverkehrs, der auf die integrierte Frontend-App ausgerichtet ist.
Eine Frontend-Web-App ist in das virtuelle Netzwerk integriert und über das öffentliche Internet zugänglich.
Auf eine Back-End-Web-App kann nur über den privaten Endpunkt im virtuellen Netzwerk zugegriffen werden.
Ein privater Endpunkt ist in die Back-End-Web-App integriert und macht die Web-App über eine private IP-Adresse zugänglich.
Eine Privates DNS Zone ermöglicht die Auflösung eines DNS-Namens an die IP-Adresse des privaten Endpunkts.

Hinweis

Um die Integration virtueller Netzwerke und private Endpunkte zu konfigurieren, benötigen Sie die Basic-Ebene von Azure App Service oder einer höheren Ebene. Der Free-Tarif unterstützt diese Features nicht.

Das Szenario in diesem Lernprogramm bietet das folgende Verhalten:

Der öffentliche Datenverkehr an die Back-End-App wird blockiert.
Der ausgehende Datenverkehr von App Service wird an das virtuelle Netzwerk geleitet und kann die Backend-App erreichen.
App Service kann die DNS-Auflösung der Backend-App durchführen.

Erstellen der beiden Web-Apps

Sie benötigen zwei App Service-Web-Apps, eine für das Frontend und eine für das Back-End. Die Apps können am selben Ort der Region ausgeführt werden. Um die Integration des virtuellen Netzwerks einzurichten und mit privaten Endpunkten zu arbeiten, verwenden Sie mindestens die Basic Ebene der Azure App Service. Sie konfigurieren die Integration des virtuellen Netzwerks und andere Einstellungen später.

Erstellen Sie eine Ressourcengruppe, um alle Ressourcen für dieses Lernprogramm zu verwalten.

Legen Sie den <resource-group>-Platzhalter auf den Namen Ihrer neuen Ressourcengruppe fest, z. B. zava-resources. Legen Sie den Platzhalter <region-location> auf die Region für Ihre neue Ressourcengruppe fest, beispielsweise eastus.
```
# Define variables for the resource group name and region location
resourceGroupName=<resource-group>
regionLocation=<region-location>

# Create the resource group
az group create --name $resourceGroupName --location $regionLocation
```
Weitere Informationen finden Sie in der Az Group Create Command Reference.
Erstellen Sie einen App Service-Plan für Ihre Ressourcen.

Setzen Sie den Platzhalter <app-service-plan> auf den Namen für Ihren neuen App Service-Plan, z. B. zava-app-service-plan.

Im Lernprogrammbeispiel wird der --sku Parameter auf P1V3 (Premium V3) festgelegt. Sie können diesen Wert verwenden oder eine andere SKU angeben. Die SKU muss die erforderlichen Netzwerkfeatures für dieses Lernprogramm unterstützen. Wählen Sie die Stufe "Einfach " oder höher aus.
```
# Define a variable for the App Service plan name
appServicePlanName=<app-service-plan>

# Create the App Service plan
az appservice plan create --name $appServicePlanName --resource-group $resourceGroupName --is-linux --location $regionLocation --sku P1V3
```
Weitere Informationen finden Sie im Az appservice plan create command reference.
Erstellen Sie die Frontend- und Back-End-Web-Apps.

Im Lernprogrammbeispiel werden zwei Beispiel-Node.js-Apps erstellt, wobei die Laufzeitsprachenversion lautet NODE:24-lts. Wenn Sie Ihre eigenen Apps verwenden möchten, legen Sie den --runtime Parameterwert <language-version> entsprechend fest. Sie können den az webapp list-runtimes Befehl für die Liste der verfügbaren Laufzeiten ausführen:
```
az webapp list-runtimes
```
Setzen Sie den Platzhalter <frontend-app-name> auf den Namen Ihrer neuen Frontend-Web-App, z. B. zava-frontend-app. Der Name muss global eindeutig sein und aus gültigen Zeichen (a-z, 0-9, -) bestehen. Setzen Sie den Platzhalter <backend-app-name> ebenfalls auf den Namen Ihrer neuen Backend-Web-App, z. B. zava-backend-app.
```
# Define variables for the App Service web app names
frontendAppName=<frontend-app-name>
backendAppName=<backend-app-name>

# Create the web apps
az webapp create --name $frontendAppName --resource-group $resourceGroupName --plan $appServicePlanName --runtime "NODE:24-lts"
az webapp create --name $backendAppName  --resource-group $resourceGroupName --plan $appServicePlanName --runtime "NODE:24-lts"
```
Weitere Informationen finden Sie in der Az webapp create command reference.

Erstellen der Netzwerkinfrastruktur

Die virtuelle Netzwerkinfrastruktur besteht aus den folgenden Ressourcen:

Eine Azure Virtual Network Instanz
Ein Subnetz für die Integration des virtuellen App Service-Netzwerks
Ein weiteres Subnetz für den privaten Endpunkt
Eine Azure Privates DNS Zone
Ein privater Endpunkt

Erstellen Sie ein virtuelles Azure-Netzwerk.

Legen Sie für den Platzhalter <virtual-network-name> den Namen Ihres neuen virtuellen Netzwerks fest, z. B. zava-virtual-network. Der Name muss global eindeutig sein.
```
# Define a variable for the virtual network name
virtualNetworkName=<virtual-network-name>

# Create the virtual network
az network vnet create --resource-group $resourceGroupName --location $regionLocation --name $virtualNetworkName --address-prefixes 10.0.0.0/16
```
Weitere Informationen finden Sie in der az network vnet create-Befehlsreferenz.
Erstellen Sie ein Subnetz für die Integration des virtuellen App Service-Netzwerks.

Setzen Sie den Platzhalter <network-integration-subnet> auf den Namen Ihres neuen Subnetzes, das die Integration in virtuelle Netzwerke unterstützt, z. B. zava-integration-subnet.

Für App Service wird empfohlen, dass das Subnetz für die Integration virtueller Netzwerke einen CIDR-Block von mindestens /26 besitzt. /24 ist mehr als ausreichend. --delegations Microsoft.Web/serverfarms gibt an, dass das Subnetz für die Integration virtueller Netzwerke in App Service delegiert ist.
```
# Define a variable for the integration subnet name
networkIntegrationSubnet=<network-integration-subnet>

# Create the subnet for virtual network integration
az network vnet subnet create --resource-group $resourceGroupName --vnet-name $virtualNetworkName --name $networkIntegrationSubnet \
   --address-prefixes 10.0.0.0/24 --delegations Microsoft.Web/serverfarms \
   --disable-private-endpoint-network-policies false
```
Weitere Informationen finden Sie in der Befehlsreferenz für den Befehl az network vnet subnet create.
Erstellen Sie ein weiteres Subnetz für die privaten Endpunkte.

Setzen Sie den Platzhalter <private-endpoint-subnet> auf den Namen Ihres neuen Subnetzes, das den privaten Endpunkt unterstützt, z. B. zava-endpoint-subnet.
```
# Define a variable for the private endpoint subnet name
privateEndpointSubnet=<private-endpoint-subnet>

# Create the subnet for the private endpoint
az network vnet subnet create --resource-group $resourceGroupName --vnet-name $virtualNetworkName --name $privateEndpointSubnet \
   --address-prefixes 10.0.1.0/24 \
   --disable-private-endpoint-network-policies true
```
Für private Endpunkt-Subnetze müssen Sie netzwerkrichtlinien für private Endpunkte deaktivieren, indem Sie das --disable-private-endpoint-network-policies Kennzeichen auf truefestlegen. Weitere Informationen finden Sie unter den optionalen Parametern für den Az-Netzwerk-vnet-Subnetzerstellungsbefehl .

Hinweis

Die --private-endpoint-network-policies Kennzeichnung wird möglicherweise bald durch die --disable-private-endpoint-network-policies Kennzeichnung ersetzt.
Erstellen Sie die zone Azure Privates DNS.

Legen Sie den Platzhalter <private-zone-name> auf den Namen für die neue Privates DNS Zone fest, z. B. zava-private.azurewebsites.net.
```
# Define a variable for the Private DNS zone
privateDNSZone=<private-zone-name>

# Create the Private DNS zone
az network private-dns zone create --resource-group $resourceGroupName --name $privateDNSZone
```
Weitere Informationen finden Sie in der Befehlsreferenz für den Befehl az network vnet subnet create. Weitere Informationen zum Konfigurieren der Privates DNS Zone finden Sie unter Azure Dienst-DNS-Zonenkonfiguration.

Hinweis

Wenn Sie den privaten Endpunkt im Azure Portal erstellen, wird automatisch eine Azure Privates DNS Zone für Ihre Konfiguration erstellt. Für die Konsistenz in diesem Lernprogramm erstellen Sie die Privates DNS Zone und den privaten Endpunkt separat mithilfe der Azure CLI.

Verknüpfen Sie die zone Privates DNS mit dem virtuellen Netzwerk.

Setzen Sie den Platzhalter <dns-link-name> auf den Namen Ihres neuen DNS-Links, beispielsweise zava-private-link.

# Define a variable for the DNS link name
dnsLinkName=<dns-link-name>

# Create the link between the Private DNS zone and the virtual network
az network private-dns link vnet create --resource-group $resourceGroupName --name $dnsLinkName --zone-name $privateDNSZone \
   --virtual-network $virtualNetworkName --registration-enabled False

Weitere Informationen finden Sie in der Befehlsreferenz für den Befehl az network private-dns link vnet create.

Erstellen Sie im subnetz des privaten Endpunkts Ihres virtuellen Netzwerks einen privaten Endpunkt für Ihre Back-End-Web-App.

Setzen Sie den Platzhalter <private-endpoint-name> auf den Namen des neuen privaten Endpunkts für Ihre Back-End-Web-App, z. B. zava-backend-endpoint. Legen Sie den Platzhalter <service-connection-name> auf den Namen der neuen Dienstverbindung fest, z. B. zava-backend-connection.

# Define variables for the private endpoint and service connection
privateEndpointName=<private-endpoint-name>
serviceConnectionName=<service-connection-name>

# Get the resource ID of the backend web app
resourceId=$(az webapp show --resource-group $resourceGroupName --name $backendAppName --query id --output tsv)

# Create the private endpoint for the backend web app by using the resource ID
az network private-endpoint create --resource-group $resourceGroupName --name $privateEndpointName --location $regionLocation \
   --connection-name $serviceConnectionName --private-connection-resource-id $resourceId \
   --group-id sites --vnet-name $virtualNetworkName --subnet $privateEndpointSubnet

Weitere Informationen finden Sie unter az network private-endpoint create command reference.

Verknüpfen Sie den privaten Endpunkt mit der privaten DNS-Zone mit einer DNS-Zonengruppe für den privaten Endpunkt der Back-End-Web-App.

Setzen Sie den Platzhalter <dns-zone-group-name> auf den Namen Ihrer neuen DNS-Zonengruppe, z. B. zava-dns-zone-group. Die DNS-Zonengruppe hilft bei der automatischen Aktualisierung der Privates DNS Zone, wenn der private Endpunkt aktualisiert wird.
```
# Define a variable for the DNS Zone group
dnsZoneGroupName=<dns-zone-group-name>

# Link the private endpoint to the Private DNS      
az network private-endpoint dns-zone-group create --resource-group $resourceGroupName --endpoint-name $privateEndpointName \
   --name $dnsZoneGroupName --private-dns-zone $privateDNSZone --zone-name $privateDNSZone
```
Weitere Informationen finden Sie in der Befehlsreferenz zum Befehl az network private-endpoint dns-zone-group create.
Bestätigen Sie, dass der direkte Zugriff auf Ihren privaten Endpunkt verweigert wurde.

Wenn Sie einen privaten Endpunkt für eine App Service-App erstellen, wird der öffentliche Zugriff implizit deaktiviert. Wenn Sie versuchen, mithilfe der Standard-URL auf Ihre Back-End-Web-App zuzugreifen, wird der Zugriff verweigert.

Geben Sie in einem Browser die Standard-URL für Ihre Backend-Web-App ein, z. B. <backend-app-name>.azurewebsites.net.

Die Browsermeldung gibt an, dass der direkte Zugriff verweigert wird:

Weitere Informationen zu App Service-Zugriffseinschränkungen bei privaten Endpunkten finden Sie unter Azure App Service Zugriffsbeschränkungen.

Konfigurieren der virtuellen Netzwerkintegration

Nachdem Sie die virtuelle Netzwerkinfrastruktur erstellt haben, können Sie die Integration des virtuellen Netzwerks in Ihrer Front-End-Web-App einrichten. Die Integration virtueller Netzwerke ermöglicht ausgehendem Datenverkehr, direkt in das virtuelle Netzwerk zu fließen. Standardmäßig werden nur lokaler IP-Datenverkehr, der im RFC-1918 > Private Address Space-Protokoll definiert ist, an das virtuelle Netzwerk weitergeleitet. Diese Ebene des Routings ist das, was Sie zum Aktivieren privater Endpunkte benötigen.

Aktivieren Sie die Integration des virtuellen Netzwerks in Ihre Front-End-Web-App. Der folgende Befehl setzt voraus, dass sich das Subnetz und die Web-App in derselben Ressourcengruppe befinden.

az webapp vnet-integration add --resource-group $resourceGroupName --name $frontendAppName --vnet $virtualNetworkName --subnet $networkIntegrationSubnet

Weitere Informationen finden Sie in der az webapp vnet-integration add-Befehlsreferenz.

Informationen zum Weiterleiten des gesamten Datenverkehrs an das virtuelle Netzwerk finden Sie unter Verwalten des Routings für die Integration virtueller Netzwerke. Das Routing des gesamten Datenverkehrs kann auch verwendet werden, wenn Sie Internetdatenverkehr über Ihr virtuelles Netzwerk weiterleiten möchten, z. B. über eine Azure Virtual Network NAT oder Azure Firewall.

Aktivieren Sie die Bereitstellung in der Backend-Web-App

Da Ihre Back-End-Web-App nicht öffentlich zugänglich ist, müssen Sie Ihrem tool für die kontinuierliche Bereitstellung erlauben, Ihre App zu erreichen, indem Sie die SCM-Website öffentlich über das Internet zugänglich machen. Die Haupt-Web-App selbst kann weiterhin den gesamten Datenverkehr verweigern.

Aktivieren Sie den öffentlichen Zugriff für die Back-End-Web-App.

az webapp update --resource-group $resourceGroupName --name $backendAppName --set publicNetworkAccess=Enabled

Legen Sie die Aktion bei nicht übereinstimmender Regel für die Haupt-Web-App so fest, dass der gesamte Datenverkehr verweigert wird.

Mit dieser Einstellung wird der öffentliche Zugriff auf die Haupt-Web-App verweigert, auch wenn die allgemeine Einstellung für den App-Zugriff auf „öffentlicher Zugriff zulassen“ festgelegt ist.
```
az resource update --resource-group $resourceGroupName --name $backendAppName --namespace Microsoft.Web \
   --resource-type sites --set properties.siteConfig.ipSecurityRestrictionsDefaultAction=Deny
```

Legen Sie die Aktion bei nicht übereinstimmender Regel für die SCM-Website fest, um den gesamten Datenverkehr zuzulassen.

az resource update --resource-group $resourceGroupName --name $backendAppName --namespace Microsoft.Web \
   --resource-type sites --set properties.siteConfig.scmIpSecurityRestrictionsDefaultAction=Allow

Einschränken des FTP- und SCM-Zugriffs

Da Ihre Back-End-SCM-Website öffentlich zugänglich ist, müssen Sie sie mit besserer Sicherheit sperren.

FTP-Zugriff sowohl für die Frontend- als auch für die Back-End-Web-App deaktivieren:

az resource update --resource-group $resourceGroupName --name ftp --namespace Microsoft.Web \
   --resource-type basicPublishingCredentialsPolicies --parent sites/<frontend-app-name> --set properties.allow=false

az resource update --resource-group $resourceGroupName --name ftp --namespace Microsoft.Web \
   --resource-type basicPublishingCredentialsPolicies --parent sites/<backend-app-name> --set properties.allow=false

Deaktivieren Sie den Standardauthentifizierungszugriff auf die WebDeploy-Ports und SCM/erweiterte Toolwebsites für beide Web-Apps:

az resource update --resource-group $resourceGroupName --name scm --namespace Microsoft.Web \
   --resource-type basicPublishingCredentialsPolicies --parent sites/<frontend-app-name> --set properties.allow=false

az resource update --resource-group $resourceGroupName --name scm --namespace Microsoft.Web \
   --resource-type basicPublishingCredentialsPolicies --parent sites/<backend-app-name> --set properties.allow=false

Wenn Sie die Standardauthentifizierung für App Service deaktivieren, beschränken Sie den Zugriff auf die FTP- und SCM-Endpunkte auf Benutzer, die mit Microsoft Entra ID registriert sind. Diese Aktion sichert Ihre Apps weiter. Weitere Informationen zum Deaktivieren der Standardauthentifizierung, einschließlich des Testens und Überwachens von Anmeldungen, finden Sie unter Deaktivieren der Standardauthentifizierung für App Service.

Konfigurieren der kontinuierlichen Bereitstellung mit GitHub Actions

Für dieses Verfahren benötigen Sie zwei Apps, die für die Bereitstellung in Ihren App Service-Frontend- und Back-End-Apps bereit sind. Um auf die Web-Apps zuzugreifen, benötigen Sie einen Dienstprinzipal und eine kontinuierliche Bereitstellung mit GitHub Actions.

Abrufen von Web-Apps für Bereitstellungstests

Die Azure Samples-Repositories auf GitHub stellen Node.js-Beispiel-Apps für die Bereitstellung bereit.

Wechseln Sie in einem Browser zur Node.js Back-End-Beispiel-App.

Forken Sie das GitHub-Repository, damit Sie Ihre eigene Kopie haben, um Änderungen daran vorzunehmen. In diesem Beispiel wird eine "Hallo Welt"-App erstellt. Sie stellen diese App in Ihrer Back-End-Web-App bereit.
Wiederholen Sie denselben Prozess für die Node.js Frontend-Beispiel-App.

Forken Sie das GitHub-Repository, damit Sie Ihre eigene Kopie haben, um Änderungen daran vorzunehmen. In diesem Beispiel wird eine Web-App erstellt, die den Inhalt einer URL abruft und anzeigt. Sie stellen diese App in Ihrer Frontend-Web-App bereit.

Konfigurieren des Dienstprinzipals

Sie benötigen einen Service Principal für Ihre Frontend-Web-App und Backend-Web-App.

Erstellen eines Dienstprinzipals

Setzen Sie den <service-principal-name>-Platzhalter auf den Namen für Ihren neuen Dienstprinzipal, z. B. zava-service-principal.

Ersetzen Sie die anderen <placeholder> Parameterwerte durch die Informationen für Ihre eigenen Ressourcen.

# Define a variable for the service principal name
servicePrincipalName=<service-principal-name>

# Link the private endpoint to the Private DNS 

 az ad sp create-for-rbac --name <service-principal-name> --role contributor --scopes \
   /subscriptions/<subscription-ID>/resourceGroups/<resource-group>/providers/Microsoft.Web/sites/<frontend-app-name> \
   /subscriptions/<subscription-ID>/resourceGroups/<resource-group>/providers/Microsoft.Web/sites/<backend-app-name>

Die Ausgabe ist ein JSON-Objekt mit den Anmeldeinformationen für die Rollenzuweisung, die Zugriff auf Ihre App Service-Apps gewähren.

{
  "appId": "00001111-aaaa-2222-bbbb-3333cccc4444",
  "displayName": "<service-principal-name>",
  "password": "0Aa!1Bb!2Cc!3Dd!4Ee!5Ff!6Gg!7Hh!8Ii!9Jj!",
  "tenantId": "aaaabbbb-6666-cccc-7777-dddd8888eeee"
}

Der JSON-Code enthält Ihr Dienstprinzipalkennwort, das derzeit nur angezeigt wird.

Tip

Es empfiehlt sich, mindesten Zugriff zu gewähren. In diesem Beispiel ist der Bereich nur auf die Apps beschränkt, nicht auf die gesamte Ressourcengruppe.

Kopieren Sie das JSON-Objekt, damit Sie über einen Datensatz ihres Dienstprinzipalnamens verfügen.

Geben Sie die Anmeldedaten Ihres Dienstes als Teil Ihres GitHub Action-Workflows an den Azure-Anmeldevorgang weiter.

Speichern Sie die Anmeldeinformationen als GitHub-Secrets, auf die Ihr Workflow verweist.

Gehen Sie in einem Browser zu dem geforkten Repository Ihres Node.js-Back-Ends auf GitHub.
Gehen Sie zu Einstellungen>Sicherheit>Geheimnisse und Variablen>Aktionen.

Wählen Sie "Neuer Repositoryschlüssel " aus, und erstellen Sie für jede der folgenden Einstellungen einen geheimen Schlüssel.

Verwenden Sie die Werte aus Ihrer JSON-Ausgabe.

Einstellung	Wert	Example
AZURE_CLIENT_ID	`<application/client-id>`	`00001111-aaaa-2222-bbbb-3333cccc4444`
AZURE_TENANT_ID	`<tenant-id>`	`aaaabbbb-6666-cccc-7777-dddd8888eeee`
AZURE_SUBSCRIPTION_ID	`<subscription-id>`	`cccc2c2c-dd3d-ee4e-ff5f-aaaaaa6a6a6a`

Wiederholen Sie diesen Vorgang für das geforkte Repository Ihrer Frontend-Node.js-App auf GitHub.

Einrichten einer kontinuierlichen Bereitstellung mit GitHub Actions

Sie können die kontinuierliche Bereitstellung mit GitHub Actions einrichten.

Wechseln Sie im Azure-Portal zur Seite Overview für Ihre Frontend-Web-App.
Wählen Sie im linken Menü Bereitstellung>Bereitstellungscenter aus.
Legen Sie auf der Registerkarte Settings die Option Source auf GitHub fest:
Wenn Sie zum ersten Mal eine Bereitstellung aus GitHub durchführen, klicken Sie auf Autorisieren, und befolgen Sie die Anweisungen für die Autorisierung. Wenn Sie die Bereitstellung aus dem Repository eines anderen Benutzers durchführen möchten, klicken Sie auf Konto ändern.
Nachdem Sie Ihr Azure Konto mit GitHub autorisiert haben, wählen Sie die Organization, Repository und Branch zum Konfigurieren von CI/CD aus. Wenn Sie eine Organisation oder ein Repository nicht finden können, müssen Sie möglicherweise weitere Berechtigungen für GitHub aktivieren. Weitere Informationen finden Sie unter Verwalten des Benutzerzugriffs auf die Repositorys Ihrer Organisation.

Einstellung Wert

Organisation <your-GitHub-organization>

Repository <forked-repository-name>

Filiale Standard
Wählen Sie Speichern aus.
Wiederholen Sie diesen Vorgang für Ihre Backend-Web-App und das entsprechende geforkte Repository.

Einstellung	Wert
Organisation	`<your-GitHub-organization>`
Repository	`<forked-repository-name>`
Filiale	Standard

Überprüfen von Verbindungen und App-Zugriff

Jetzt können Sie die Verbindungen und den Zugriff auf Ihre Frontend- und Back-End-Web-Apps überprüfen.

Versuchen Sie, mit der URL direkt zu Ihrer Back-End-Web-App zu navigieren. https://<backend-app-name>.azurewebsites.net

Die folgende Browsermeldung sollte angezeigt werden:

Wenn Sie die App erreichen können , überprüfen Sie Ihre Konfiguration:
- Vergewissern Sie sich, dass der private Endpunkt ordnungsgemäß eingerichtet ist.
- Vergewissern Sie sich, dass die Zugriffsbeschränkungen für Ihre App so festgelegt sind, dass der gesamte Datenverkehr für die Hauptweb-App verweigert wird.
Versuchen Sie jetzt, direkt zu Ihrer Frontend-Web-App mit der URL zu navigieren. https://<frontend-app-name>.azurewebsites.net

Wenn die Verbindung erfolgreich ist, wird die folgende Seite angezeigt:
Geben Sie im URL-Feld die URL für Ihre Backend-Web-App https://<backend-app-name>.azurewebsites.net ein, und wählen Sie Abrufen aus.

Wenn Sie die Verbindungen ordnungsgemäß einrichten, wird die Seite aktualisiert, um den Nachrichteninhalt aus der Back-End-Web-App anzuzeigen:

Der gesamte ausgehende Datenverkehr von der Frontend-Web-App leitet über das virtuelle Netzwerk weiter. Ihre Front-End-Web-App stellt über den privaten Endpunkt eine sichere Verbindung mit Ihrer Back-End-Web-App her.

Wenn bei Ihren Verbindungen ein Fehler auftritt, wird in der Ausgabe die Meldung "Fehler 403 – Unzulässig " angezeigt.

Einrichten einer SSH-Sitzung und Öffnen einer Remoteshell

Überprüfen Sie, ob die Frontend-Web-App die Back-End-Web-App über den privaten Link erreicht, indem Sie SSH zu einer Frontend-Instanz verwenden.

Richten Sie eine SSH-Sitzung für den Webcontainer Ihrer App ein, und öffnen Sie eine Remoteshell in Ihrem Browser:
```
az webapp ssh --resource-group $resourceGroupName --name $frontendAppName
```
Weitere Informationen finden Sie in der Az webapp ssh-Befehlsreferenz .
Nachdem die Shell in Ihrem Browser geöffnet wurde, bestätigen Sie, dass Ihre Back-End-Web-App über die private IP Ihrer Back-End-Web-App erreicht wird.

Ersetzen Sie in den folgenden Befehlen die <placeholder> Parameterwerte durch die Informationen für Ihre eigene Ressource.
1. Führen Sie den Befehl nslookup aus:
```
nslookup <backend-app-name>.azurewebsites.net
```
2. Führen Sie den curl Befehl aus, um den Websiteinhalt erneut zu überprüfen:
```
curl https://<backend-app-name>.azurewebsites.net
```
Der Befehl nslookup sollte in die private IP-Adresse Ihrer Back-End-Web-App aufgelöst werden. Die private IP-Adresse sollte eine Adresse aus Ihrem virtuellen Netzwerk sein.

Sie können Ihre private IP-Adresse im Azure Portal bestätigen. Wechseln Sie zur Seite "Netzwerkeinstellungen"> für Ihre Back-End-Web-App.
Wiederholen Sie dieselben nslookup Befehle und curl Befehle von einem anderen Terminal (eine, bei der es sich nicht um eine SSH-Sitzung in Ihren Frontend-Instanzen handelt).

Der nslookup Befehl gibt die öffentliche IP für die Back-End-Web-App zurück. Da der öffentliche Zugriff auf die Back-End-Web-App deaktiviert ist, wird beim Versuch, die öffentliche IP-Adresse zu erreichen, ein Fehler "Zugriff verweigert" angezeigt. Dieser Fehler bedeutet, dass die Website nicht über das öffentliche Internet zugänglich ist, was das beabsichtigte Verhalten ist.

Der nslookup Befehl wird nicht in die private IP aufgelöst, da die Adresse nur innerhalb des virtuellen Netzwerks über die private DNS-Zone aufgelöst werden kann. Nur die Frontend-Web-App befindet sich innerhalb des virtuellen Netzwerks. Wenn Sie versuchen, den curl Befehl auf der Back-End-Web-App vom externen Terminal aus auszuführen, enthält der zurückgegebene HTML-Code die Fehlermeldung 403, "Verboten" – Die Web-App, die Sie erreicht haben, hat Ihren Zugriff blockiert. Einige Terminals zeigen auch denselben HTML-Code wie die zurückgegebene Fehlerseite an, wenn Sie versuchen, direkt auf die Back-End-Web-App zuzugreifen.

Bereinigen von Ressourcen

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt. Wenn Sie diese Ressourcen in Zukunft nicht mehr benötigen, löschen Sie die Ressourcengruppe, indem Sie den folgenden Befehl in Cloud Shell ausführen.

Ersetzen Sie den <placeholder> Parameterwert durch die Informationen für Ihre eigene Ressource:

az group delete --name <resource-group>

Die Ausführung dieses Befehls kann mehrere Minuten dauern.

Häufig gestellte Fragen

In diesem Tutorial haben Sie eine grundlegende Infrastruktur für den sicheren Betrieb einer N-Tier-Web-App bereitgestellt. Der App-Dienst bietet Features, mit denen Sie sicherstellen können, dass Sie Anwendungen ausführen, die bewährte Methoden und Empfehlungen für die Sicherheit befolgen.

Dieser Abschnitt enthält Antworten auf häufig gestellte Fragen, mit denen Sie Ihre Apps weiter schützen und Ihre Ressourcen entsprechend bewährten Methoden bereitstellen und verwalten können.

Bereitstellen mithilfe anderer Methoden als mit einem Dienstprinzipal

In diesem Lernprogramm haben Sie die Standardauthentifizierung deaktiviert. Sie können sich nicht mit der Back-End-SCM-Website authentifizieren, indem Sie einen Benutzernamen und ein Kennwort verwenden oder ein Veröffentlichungsprofil verwenden. Anstatt sich mit einem Dienstprinzipal zu authentifizieren, können Sie OpenID Connect-Anmeldeinformationen verwenden.

Konfigurieren der GitHub Actions-Bereitstellung in App Service

Azure generiert automatisch eine Workflowdatei in Ihrem Repository. Neue Commits im ausgewählten Repository und Branch werden fortlaufend in Ihrer App Service-App bereitgestellt. Sie können die Commits und Bereitstellungen auf der Registerkarte Logs in GitHub nachverfolgen.

Eine Standardworkflowdatei, die ein Veröffentlichungsprofil zur Authentifizierung bei App Service verwendet, wird Ihrem GitHub-Repository hinzugefügt. Sie können diese Datei anzeigen, indem Sie zum Verzeichnis <repo-name>/.github/workflows/ wechseln.

Bestätigen des sicheren öffentlichen Zugriffs auf die Back-End-SCM-Website

Wenn Sie FTP- und SCM-Zugriff sperren, können Sie sicherstellen, dass nur von Microsoft Entra gesicherte Prinzipale auf den SCM-Endpunkt zugreifen können, auch wenn der Endpunkt öffentlich zugänglich ist. Diese Einstellung hilft Ihnen zu versichern, dass Ihre Back-End-Web-App weiterhin sicher ist.

Bereitstellen ohne geöffnete Back-End-SCM-Website

Wenn Sie Bedenken haben, den öffentlichen Zugriff auf die SCM-Website zu aktivieren, oder wenn Ihre Richtlinien dies einschränken, sollten Sie andere App Service-Bereitstellungsoptionen in Betracht ziehen, z. B. das Ausführen aus einem ZIP-Paket.

Stellen Sie diese Architektur mit einer Vorlage bereit

Die in diesem Lernprogramm erstellten Ressourcen können mithilfe einer Azure Resource Manager Vorlage (ARM-Vorlage) oder Bicep Vorlage bereitgestellt werden. Mit Mit einer Back-End-Web-App verbundene Anwendung können Sie eine sichere Lösung für eine n-schichtige App erstellen.

Informationen zum Bereitstellen von ARM- und Bicep-Vorlagen finden Sie unter Deploy Bicep-Dateien mit dem Azure CLI.

Feedback

War diese Seite hilfreich?

Last updated on 2026-06-01