Schritt 1: Hochladen von Bilddaten in die Cloud mit Azure Storage
Dieses Tutorial ist der erste Teil einer Serie. In diesem Tutorial erfahren Sie, wie Sie eine Web-App bereitstellen. Die Web-App nutzt die Azure Blob Storage-Clientbibliothek, um Bilder in ein Speicherkonto hochzuladen.
Im ersten Abschnitt führen Sie die folgenden Aufgaben aus:
- Speicherkonto erstellen
- Erstellen eines Containers und Festlegen von Berechtigungen
- Abrufen eines Zugriffsschlüssels
- Bereitstellen einer Web-App in Azure
- Konfigurieren von App-Einstellungen
- Interagieren mit der Web-App
Voraussetzungen
Sie benötigen ein Azure-Abonnement, um dieses Tutorial durcharbeiten zu können. Erstellen Sie ein kostenloses Konto, bevor Sie beginnen.
Azure Cloud Shell
Azure hostet Azure Cloud Shell, eine interaktive Shell-Umgebung, die Sie über Ihren Browser nutzen können. Sie können entweder Bash oder PowerShell mit Cloud Shell verwenden, um mit Azure-Diensten zu arbeiten. Sie können die vorinstallierten Befehle von Cloud Shell verwenden, um den Code in diesem Artikel auszuführen, ohne etwas in Ihrer lokalen Umgebung installieren zu müssen.
Starten von Azure Cloud Shell:
| Option | Beispiel/Link |
|---|---|
| Wählen Sie rechts oben in einem Code- oder Befehlsblock die Option Ausprobieren aus. Durch die Auswahl von Ausprobieren wird der Code oder Befehl nicht automatisch in Cloud Shell kopiert. |  |
| Rufen Sie https://shell.azure.com auf, oder klicken Sie auf die Schaltfläche Cloud Shell starten, um Cloud Shell im Browser zu öffnen. |  |
| Wählen Sie im Azure-Portal rechts oben im Menü die Schaltfläche Cloud Shell aus. |  |
So verwenden Sie Azure Cloud Shell:
Starten Sie Cloud Shell.
Wählen Sie die Schaltfläche Kopieren für einen Codeblock (oder Befehlsblock) aus, um den Code oder Befehl zu kopieren.
Fügen Sie den Code oder Befehl mit STRG+UMSCHALT+V unter Windows und Linux oder CMD+UMSCHALT+V unter macOS in die Cloud Shell-Sitzung ein.
Drücken Sie die EINGABETASTE, um den Code oder Befehl auszuführen.
Erstellen einer Ressourcengruppe
Wichtig
In Schritt 2 des Tutorials verwenden Sie Azure Event Grid mit dem Blob-Speicher, den Sie in diesem Schritt erstellen. Erstellen Sie Ihr Speicherkonto in einer Azure-Region, die Event Grid unterstützt. Eine Liste mit den unterstützten Regionen finden Sie unter Azure-Produkte nach Region.
Wählen Sie in Azure Cloud Shell in der linken oberen Ecke die Option Bash aus, falls noch nicht ausgewählt.
Erstellen Sie mithilfe des Befehls az group create eine Ressourcengruppe. Eine Azure-Ressourcengruppe ist ein logischer Container, in dem Azure-Ressourcen bereitgestellt und verwaltet werden.
Hinweis
Legen Sie entsprechende Werte für
regionundrgName(Name der Ressourcengruppe) fest.region="eastus" rgName="egridtutorialrg" az group create --name $rgName --location $region
Speicherkonto erstellen
Das Beispiel lädt Bilder in einen Blobcontainer in einem Azure-Speicherkonto hoch.
Erstellen Sie ein Speicherkonto in der Ressourcengruppe, die Sie erstellt haben, indem Sie den Befehl az storage account create verwenden.
blobStorageAccount="myblobstorage$RANDOM"
az storage account create --name $blobStorageAccount --location $region \
--resource-group $rgName --sku Standard_LRS --kind StorageV2 --access-tier hot --allow-blob-public-access true
Erstellen von Blob Storage-Containern
Die App verwendet zwei Container im Blob Storage-Konto. In den Container images lädt die App Bilder mit voller Auflösung hoch. In zweiten Abschnitt lädt eine Azure Funktions-App Miniaturbilder mit angepasster Größe in den Container Miniaturansichten hoch.
Der öffentliche Zugriff für den Container images ist auf off festgelegt. Der öffentliche Zugriff für den Container thumbnails ist auf container festgelegt. Bei der Einstellung container für den öffentlichen Zugriff können Benutzer, die die Webseite besuchen, die Miniaturansichten anzeigen.
Rufen Sie mit dem Befehl az storage account keys list den Speicherkontoschlüssel ab. Verwenden Sie anschließend diesen Schlüssel, um mit dem Befehl az storage container create zwei Container zu erstellen.
blobStorageAccountKey=$(az storage account keys list -g $rgName \
-n $blobStorageAccount --query "[0].value" --output tsv)
az storage container create --name images \
--account-name $blobStorageAccount \
--account-key $blobStorageAccountKey
az storage container create --name thumbnails \
--account-name $blobStorageAccount \
--account-key $blobStorageAccountKey --public-access container
Die Beispiel-App stellt mithilfe ihres Namens und Zugriffsschlüssels eine Verbindung mit dem Speicherkonto her.
Wie erstelle ich einen Plan?
Ein App Service-Plan gibt den Standort, die Größe und die Funktionen der Webserverfarm an, die Ihre App hostet. Im folgenden Beispiel wird ein App Service-Plan namens myAppServicePlan mit dem Tarif Free erstellt:
Erstellen Sie mit dem Befehl az appservice plan create einen App Service-Plan.
planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free
Erstellen einer Web-App
Die Web-App umfasst einen Hostingort für den Code der Beispiel-App, der aus dem GitHub-Beispielrepository bereitgestellt wird.
Erstellen Sie eine Web-App im App Service-Plan myAppServicePlan mit dem Befehl az webapp create.
webapp="mywebapp$RANDOM"
az webapp create --name $webapp --resource-group $rgName --plan $planName
Bereitstellen der Beispiel-App aus dem GitHub-Repository
App Service unterstützt verschiedene Möglichkeiten zum Bereitstellen von Inhalt für eine Web-App. In diesem Tutorial stellen Sie die Web-App aus einem öffentlichen GitHub-Beispielrepository bereit. Konfigurieren Sie die GitHub-Bereitstellung für die Web-App mit dem Befehl az webapp deployment source config.
Das Beispielprojekt enthält eine ASP.NET MVC-App. Die App akzeptiert ein Bild, speichert es unter einem Speicherkonto und zeigt Bilder aus einem Container mit Miniaturansichten an. Die Web-App verwendet die Namespaces Azure.Storage, Azure.Storage.Blobs und Azure.Storage.Blobs.Models für die Interaktion mit dem Azure Storage-Dienst.
az webapp deployment source config --name $webapp --resource-group $rgName \
--branch master --manual-integration \
--repo-url https://github.com/Azure-Samples/storage-blob-upload-from-webapp
Konfigurieren von Einstellungen für Web-Apps
Die Beispiel-Web-App nutzt die Azure Storage-APIs für .NET zum Hochladen von Bildern. Die Anmeldeinformationen des Speicherkontos werden in den App-Einstellungen für die Web-App festgelegt. Fügen Sie der bereitgestellten App mit dem Befehl az webapp config appsettings set oder New-AzStaticWebAppSetting App-Einstellungen hinzu.
az webapp config appsettings set --name $webapp --resource-group $rgName \
--settings AzureStorageConfig__AccountName=$blobStorageAccount \
AzureStorageConfig__ImageContainer=images \
AzureStorageConfig__ThumbnailContainer=thumbnails \
AzureStorageConfig__AccountKey=$blobStorageAccountKey
Nachdem Sie die Web-App bereitgestellt und konfiguriert haben, können Sie die Funktionalität zum Hochladen von Bildern in der App testen.
Hochladen von Images
Navigieren Sie zum Testen der Web-App zur URL Ihrer veröffentlichten App. Die Standard-URL der Web-App lautet https://<web_app>.azurewebsites.net. Wählen Sie dann den Bereich Fotos hochladen aus, um eine Datei anzugeben und hochzuladen, oder ziehen Sie eine Datei in den Bereich. Das Bild wird nicht mehr angezeigt, wenn es erfolgreich hochgeladen wurde. Der Abschnitt Generierte Miniaturansichten bleibt leer, bis er später in diesem Tutorial getestet wird.
Hinweis
Führen Sie zum Abrufen des Namens der Web-App den folgenden Befehl aus: echo $webapp
Im Beispielcode wird der Task UploadFileToStorage in der Datei Storagehelper.cs verwendet, um die Bilder mit der UploadAsync-Methode in den Container images des Speicherkontos hochzuladen. Das folgende Codebeispiel enthält einen Task „UploadFileToStorage“.
public static async Task<bool> UploadFileToStorage(Stream fileStream, string fileName,
AzureStorageConfig _storageConfig)
{
// Create a URI to the blob
Uri blobUri = new Uri("https://" +
_storageConfig.AccountName +
".blob.core.windows.net/" +
_storageConfig.ImageContainer +
"/" + fileName);
// Create StorageSharedKeyCredentials object by reading
// the values from the configuration (appsettings.json)
StorageSharedKeyCredential storageCredentials =
new StorageSharedKeyCredential(_storageConfig.AccountName, _storageConfig.AccountKey);
// Create the blob client.
BlobClient blobClient = new BlobClient(blobUri, storageCredentials);
// Upload the file
await blobClient.UploadAsync(fileStream);
return await Task.FromResult(true);
}
Die folgenden Klassen und Methoden werden in den vorhergehenden Tasks verwendet:
| Klasse | Methode |
|---|---|
| URI | Uri-Konstruktor |
| StorageSharedKeyCredential | StorageSharedKeyCredential(String, String)-Konstruktor |
| BlobClient | UploadAsync |
Sicherstellen, dass das Bild im Speicherkonto angezeigt wird
Melden Sie sich beim Azure-Portal an. Wählen Sie im linken Menü Speicherkonten aus, und wählen Sie dann den Namen Ihres Speicherkontos aus.
Hinweis
Führen Sie Folgendes aus, um den Namen des Speicherkontos abzurufen:
echo $blobStorageAccountWählen Sie im linken Menü im Abschnitt Datenspeicher die Option Container aus.
Wählen Sie den Blob-Container Bilder aus.
Stellen Sie sicher, dass das Bild im Container angezeigt wird.
Testen der Miniaturansichtenanzeige
Zum Testen der Miniaturansicht laden Sie ein Bild in den Container Miniaturansichten hoch. Auf diese Weise soll überprüft werden, ob die App den Container Miniaturansichten lesen kann.
Melden Sie sich beim Azure-Portal an. Wählen Sie im linken Menü Speicherkonten aus, und wählen Sie dann den Namen Ihres Speicherkontos aus. Wählen Sie Container und dann den Container thumbnails aus. Klicken Sie auf Hochladen, um den Bereich Blob hochladen zu öffnen.
Wählen Sie mit der Dateiauswahl eine Datei aus, und wählen Sie dann die Option Hochladen.
Navigieren Sie wieder zu Ihrer App, um zu überprüfen, ob das in den Container thumbnails hochgeladene Bild sichtbar ist.
Im zweiten Teil der Reihe automatisieren Sie die Erstellung der Miniaturansicht, sodass Sie dieses Image nicht benötigen. Wählen Sie im Container thumbnails das Bild aus, das Sie hochgeladen haben, und klicken Sie anschließend auf Löschen, um das Bild zu entfernen.