Krok 1. Przekazywanie danych obrazu w chmurze za pomocą usługi Azure Storage
Niniejszy samouczek jest pierwszą częścią serii. Z tego samouczka dowiesz się, jak wdrożyć aplikację internetową. Aplikacja internetowa używa biblioteki klienta usługi Azure Blob Storage do przekazywania obrazów na konto magazynu.
W jednej części serii wykonasz następujące zadania:
- Tworzenie konta magazynu
- Tworzenie kontenera i ustawianie uprawnień
- Pobieranie klucza dostępu
- Wdrażanie aplikacji internetowej na platformie Azure
- Konfigurowanie ustawień aplikacji
- Korzystanie z aplikacji internetowej
Wymagania wstępne
Do wykonania kroków tego samouczka potrzebna jest subskrypcja platformy Azure. Zanim rozpoczniesz, utwórz bezpłatne konto.
Azure Cloud Shell
Na platforma Azure hostowane jest Azure Cloud Shell, interaktywne środowisko powłoki, z którego można korzystać w przeglądarce. Do pracy z usługami platformy Azure można używać programu Bash lub PowerShell w środowisku Cloud Shell. Aby uruchomić kod w tym artykule, możesz użyć wstępnie zainstalowanych poleceń usługi Cloud Shell bez konieczności instalowania niczego w środowisku lokalnym.
Aby uruchomić środowisko Azure Cloud Shell:
| Opcja | Przykład/link |
|---|---|
| Wybierz pozycję Wypróbuj w prawym górnym rogu bloku kodu lub polecenia. Wybranie pozycji Wypróbuj nie powoduje automatycznego skopiowania kodu lub polecenia do usługi Cloud Shell. |  |
| Przejdź do witryny https://shell.azure.com lub wybierz przycisk Uruchom Cloud Shell, aby otworzyć środowisko Cloud Shell w przeglądarce. |  |
| Wybierz przycisk Cloud Shell na pasku menu w prawym górnym rogu witryny Azure Portal. |  |
Aby użyć usługi Azure Cloud Shell:
Uruchom usługę Cloud Shell.
Wybierz przycisk Kopiuj w bloku kodu (lub bloku poleceń), aby skopiować kod lub polecenie.
Wklej kod lub polecenie do sesji usługi Cloud Shell, wybierając klawisze Ctrl+Shift V w systemach Windows i Linux lub wybierając pozycję Cmd+Shift++V w systemie macOS.
Wybierz klawisz Enter, aby uruchomić kod lub polecenie.
Tworzenie grupy zasobów
Ważne
W kroku 2 samouczka użyjesz usługi Azure Event Grid z magazynem obiektów blob utworzonym w tym kroku. Utwórz konto magazynu w regionie świadczenia usługi Azure, który obsługuje usługę Event Grid. Lista obsługiwanych regionów znajduje się w artykule Produkty platformy Azure według regionu.
W usłudze Azure Cloud Shell wybierz pozycję Bash w lewym górnym rogu, jeśli nie została jeszcze wybrana.
Utwórz grupę zasobów za pomocą polecenia az group create. Grupa zasobów platformy Azure to logiczny kontener przeznaczony do wdrażania zasobów platformy Azure i zarządzania nimi.
Uwaga
Ustaw odpowiednie wartości dla
regionirgName(nazwa grupy zasobów).region="eastus" rgName="egridtutorialrg" az group create --name $rgName --location $region
Tworzenie konta magazynu
Przykład przekazuje obrazy do kontenera obiektów blob na koncie usługi Azure Storage.
Utwórz konto magazynu w utworzonej grupie zasobów przy użyciu polecenia az storage account create.
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
Tworzenie kontenerów w usłudze Blob Storage
Aplikacja używa dwóch kontenerów w ramach konta usługi Blob Storage. Z kontenerem images mamy do czynienia wtedy, gdy aplikacja przekazuje obrazy w pełnej rozdzielczości. W drugim kroku serii aplikacja funkcji platformy Azure przekazuje miniatury obrazów o zmienionym rozmiarze do kontenera thumbnails .
Dostęp publiczny do kontenera images jest ustawiony na wartość off. Dostęp publiczny do kontenera thumbnails jest ustawiony na wartość container. Ustawienie dostępu publicznego na wartość container powoduje, że użytkownicy, którzy odwiedzają stronę internetową, mogą wyświetlać miniatury.
Pobierz klucz konta magazynu przy użyciu polecenia az storage account keys list. Następnie użyj tego klucza do utworzenia dwóch kontenerów za pomocą polecenia az storage container create.
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
Przykładowa aplikacja łączy się z kontem magazynu przy użyciu jego nazwy i klucza dostępu.
Tworzenie planu usługi App Service
Plan usługi App Service określa lokalizację, rozmiar i funkcje farmy serwerów sieci Web, która jest hostem aplikacji. W poniższym przykładzie jest tworzony plan usługi App Service o nazwie myAppServicePlan przy użyciu warstwy cenowej Bezpłatna:
Utwórz plan usługi App Service za pomocą polecenia az appservice plan create.
planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free
Tworzenie aplikacji internetowej
Aplikacja internetowa zapewnia obszar hostingu dla kodu aplikacji przykładowej, który jest wdrażany z przykładowego repozytorium usługi GitHub.
Utwórz aplikację internetową w myAppServicePlanplanie usługi App Service za pomocą polecenia az webapp create.
webapp="mywebapp$RANDOM"
az webapp create --name $webapp --resource-group $rgName --plan $planName
Wdrażanie aplikacji przykładowej z repozytorium usługi GitHub
Usługa App Service obsługuje kilka metod wdrażania zawartości w aplikacji internetowej. W tym samouczku wdrażasz aplikację internetową z publicznego repozytorium przykładów usługi GitHub. Skonfiguruj wdrożenie usługi GitHub do aplikacji internetowej za pomocą polecenia az webapp deployment source config.
Przykładowy projekt zawiera aplikację ASP.NET MVC. Akceptuje ona obraz, zapisuje go na koncie magazynu i wyświetla obrazy z kontenera miniatur. Aplikacja internetowa używa przestrzeni nazw Azure.Storage, Azure.Storage.Blobs i Azure.Storage.Blobs.Models do interakcji z usługą Azure Storage.
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
Konfigurowanie ustawień aplikacji internetowej
Przykładowa aplikacja internetowa używa interfejsów API usługi Azure Storage dla platformy .NET do przekazywania obrazów. Poświadczenia konta magazynu są ustawiane w ustawieniach aplikacji internetowej. Dodaj ustawienia aplikacji do wdrożonej aplikacji za pomocą polecenia az webapp config appsettings set lub New-AzStaticWebAppSetting .
az webapp config appsettings set --name $webapp --resource-group $rgName \
--settings AzureStorageConfig__AccountName=$blobStorageAccount \
AzureStorageConfig__ImageContainer=images \
AzureStorageConfig__ThumbnailContainer=thumbnails \
AzureStorageConfig__AccountKey=$blobStorageAccountKey
Po wdrożeniu i skonfigurowaniu aplikacji internetowej możesz przetestować funkcję przekazywania obrazów w aplikacji.
Przekaż obraz
Aby przetestować aplikację internetową, przejdź pod adres URL Twojej opublikowanej aplikacji. Domyślnym adresem URL aplikacji internetowej jest https://<web_app>.azurewebsites.net. Następnie wybierz region Przekazywanie zdjęć , aby określić i przekazać plik, lub przeciągnij plik do regionu. Obraz zniknie, jeśli zostanie pomyślnie przekazany. Sekcja Wygenerowane miniatury pozostaje pusta, dopóki nie przetestujemy jej w dalszej części tego samouczka.
Uwaga
Uruchom następujące polecenie, aby uzyskać nazwę aplikacji internetowej: echo $webapp
W przykładowym kodzie zadanie w pliku Storagehelper.cs jest używane do przekazywania obrazów do kontenera images na koncie magazynu przy użyciu metody UploadAsync.UploadFileToStorage Poniższy przykładowy kod zawiera zadanie 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);
}
W poprzednim zadaniu użyto następujących klas i metod:
| Klasa | Method |
|---|---|
| Identyfikator URI | Konstruktor identyfikatora URI |
| StorageSharedKeyCredential | StorageSharedKeyCredential(String, String) konstruktor |
| Obiekt blobClient | UploadAsync |
Sprawdzanie, czy obraz jest wyświetlany na koncie magazynu
Zaloguj się w witrynie Azure Portal. Z menu po lewej stronie wybierz pozycję Konta magazynu, a następnie wybierz nazwę swojego konta magazynu.
Uwaga
Uruchom następujące polecenie, aby uzyskać nazwę konta magazynu:
echo $blobStorageAccount.W menu po lewej stronie w sekcji Magazyn danych wybierz pozycję Kontenery.
Wybierz kontener obiektów blob obrazów.
Sprawdź, czy obraz jest wyświetlany w kontenerze.
Testowanie wyświetlania miniatur
Aby przetestować wyświetlanie miniatur, przekaż obraz do kontenera thumbnails , aby sprawdzić, czy aplikacja może odczytać kontener thumbnails .
Zaloguj się w witrynie Azure Portal. Z menu po lewej stronie wybierz pozycję Konta magazynu, a następnie wybierz nazwę swojego konta magazynu. Wybierz pozycję Kontenery, a następnie wybierz kontener thumbnails . Wybierz pozycję Przekaż, aby otworzyć okienko Przekazywanie obiektu blob.
Wybierz plik za pomocą selektora plików i wybierz pozycję Przekaż.
Przejdź z powrotem do aplikacji, aby sprawdzić, czy obraz przekazany do kontenera thumbnails jest widoczny.
W drugiej części tej serii zautomatyzujesz proces tworzenia obrazów miniatur, dlatego nie potrzebujesz tego obrazu. W kontenerze thumbnails wybierz przekazany obraz, a następnie wybierz pozycję Usuń , aby usunąć obraz.