Langkah 1: Unggah data gambar di cloud dengan Azure Storage
Tutorial ini adalah bagian pertama dari seri. Dalam tutorial ini, Anda mempelajari cara menyebarkan aplikasi web. Aplikasi web menggunakan pustaka klien Azure Blob Storage untuk mengunggah gambar ke akun penyimpanan.
Di bagian salah satu seri, Anda melakukan tugas berikut:
- Buat akun penyimpanan
- Membuat kontainer dan mengatur izin
- Mengambil kunci akses
- Sebarkan aplikasi web ke Azure
- Mengonfigurasi pengaturan aplikasi
- Berinteraksi dengan aplikasi web
Prasyarat
Anda harus memiliki akun langganan Azure untuk menyelesaikan tutorial ini. Buat akun gratis sebelum Anda mulai.
Azure Cloud Shell
Azure meng-hosting Azure Cloud Shell, lingkungan shell interaktif yang dapat Anda gunakan melalui browser. Anda dapat menggunakan Bash atau PowerShell dengan Cloud Shell untuk bekerja dengan layanan Azure. Anda dapat menggunakan perintah Cloud Shell yang telah diinstal sebelumnya untuk menjalankan kode dalam artikel ini tanpa harus menginstal apa-apa di lingkungan lokal Anda.
Untuk memulai Azure Cloud Shell:
| Opsi | Contoh/Tautan |
|---|---|
| Pilih Coba di pojok kanan atas blok kode atau perintah. Memilih Coba tidak otomatis menyalin kode atau perintah ke Cloud Shell. |  |
| Buka https://shell.azure.com, atau pilih tombol Luncurkan Cloud Shell untuk membuka Cloud Shell di browser Anda. |  |
| Pilih tombol Cloud Shell pada bilah menu di kanan atas di portal Microsoft Azure. |  |
Untuk menggunakan Azure Cloud Shell:
Mulai Cloud Shell.
Pilih tombol Salin pada blok kode (atau blok perintah) untuk menyalin kode atau perintah.
Tempel kode atau perintah ke dalam sesi Cloud Shell dengan memilih Ctrl+Shift+V di Windows dan Linux, atau dengan memilih Cmd+Shift+V di macOS.
Pilih Masukkan untuk menjalankan kode atau perintah.
Buat grup sumber daya
Penting
Di langkah 2 tutorial, Anda menggunakan Azure Event Grid dengan penyimpanan blob yang Anda buat di langkah ini. Buat akun penyimpanan Anda di wilayah Azure yang mendukung Event Grid. Untuk daftar wilayah yang didukung, lihat produk Azure menurut wilayah.
Di Azure Cloud Shell, pilih Bash di sudut kiri atas jika belum dipilih.
Buat grup sumber daya dengan perintah az group create. Grup sumber daya Azure adalah kontainer logis tempat sumber daya Azure disebarkan dan dikelola.
Catatan
Atur nilai yang sesuai untuk
regiondanrgName(nama grup sumber daya).region="eastus" rgName="egridtutorialrg" az group create --name $rgName --location $region
Buat akun penyimpanan
Sampel mengunggah gambar ke kontainer blob di akun penyimpanan Azure.
Buat akun penyimpanan di grup sumber daya yang Anda buat dengan menggunakan perintah membuat akun penyimpanan az.
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
Membuat kontainer penyimpanan Blob
Aplikasi ini menggunakan dua kontainer di akun penyimpanan Blob. Kontainer gambar adalah tempat aplikasi mengunggah gambar beresolusi penuh. Pada langkah kedua seri ini, aplikasi fungsi Azure mengunggah gambar mini gambar yang diubah ukurannya ke kontainer gambar mini .
Akses publik kontainer gambar diatur ke off. Akses publik kontainer gambar mini diatur ke container. Pengaturan akses publik container memungkinkan pengguna yang mengunjungi halaman web untuk melihat gambar mini.
Dapatkan kunci akun penyimpanan dengan menggunakan perintah daftar kunci akun penyimpanan az. Kemudian, gunakan kunci ini untuk membuat dua kontainer dengan perintah buat kontainer penyimpanan az.
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
Aplikasi sampel terhubung ke akun penyimpanan menggunakan nama dan kunci aksesnya.
Membuat Paket App Service
Rencana App Service menentukan lokasi, ukuran, dan fitur farm server web yang menghosting aplikasi Anda. Contoh berikut membuat paket App Service yang dinamai myAppServicePlan dalam tingkat harga Gratis:
Buat rencana App Service dengan perintah buat appservice az.
planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free
Membuat aplikasi web
Aplikasi web menyediakan ruang hosting untuk contoh kode aplikasi yang diterapkan dari repositori sampel GitHub.
Buat aplikasi web di rencana App Service myAppServicePlan dengan perintah buat webapp az.
webapp="mywebapp$RANDOM"
az webapp create --name $webapp --resource-group $rgName --plan $planName
Menyebarkan aplikasi sampel dari repositori GitHub
App Service mendukung beberapa cara untuk menyebarkan konten ke aplikasi web. Dalam tutorial ini, Anda menyebarkan aplikasi web dari repositori sampel GitHub publik. Konfigurasikan penyebaran GitHub ke aplikasi web dengan perintah konfigurasi sumber penyebaran webapp az.
Proyek sampel berisi aplikasi ASP.NET MVC. Aplikasi ini menerima gambar, menyimpannya ke akun penyimpanan, dan menampilkan gambar dari kontainer gambar mini. Aplikasi web menggunakan ruang nama Azure.Storage, Azure.Storage.Blobs, and Azure.Storage.Blobs.Models untuk berinteraksi dengan layanan 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
Mengonfigurasi pengaturan aplikasi web
Aplikasi web sampel menggnakan API Azure Storage untuk .NET untuk mengunggah gambar. Kredensial akun penyimpanan diatur dalam pengaturan aplikasi untuk aplikasi web. Tambahkan pengaturan aplikasi ke aplikasi yang diterapkan dengan perintah az webapp config appsettings set atau 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
Setelah menerapkan dan mengonfigurasi aplikasi web, Anda dapat menguji fungsionalitas pengunggahan gambar di aplikasi.
Mengunggah gambar
Untuk menguji aplikasi web, telusuri URL aplikasi yang diterbitkan. URL default aplikasi web adalah https://<web_app>.azurewebsites.net. Lalu, pilih wilayah Unggah foto untuk menentukan dan mengunggah file, atau seret file ke wilayah tersebut. Gambar menghilang jika berhasil diunggah. Bagian Gambar Mini yang Dihasilkan tetap kosong sampai kita mengujinya nanti dalam tutorial ini.
Catatan
Jalankan perintah berikut untuk mendapatkan nama aplikasi web: echo $webapp
Dalam kode sampel, tugas UploadFileToStorage dalam file Storagehelper.cs digunakan untuk mengunggah gambar ke kontainer gambar dalam akun penyimpanan menggunakan metode UploadAsync. Sampel kode berikut berisi tugas 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);
}
Kelas dan metode berikut digunakan dalam tugas sebelumnya:
| Kelas | Metode |
|---|---|
| Uri | Konstruktor Uri |
| StorageSharedKeyCredential | Konstruktor StorageSharedKeyCredential(String, String) |
| BlobClient | UploadAsync |
Memverifikasi bahwa gambar ditampilkan di akun penyimpanan
Masuk ke portal Azure. Dari menu sebelah kiri, pilih Akun penyimpanan, lalu pilih nama akun penyimpanan Anda.
Catatan
Jalankan yang berikut ini untuk mendapatkan nama akun penyimpanan:
echo $blobStorageAccount.Di menu sebelah kiri, di bagian Penyimpanan data , pilih Kontainer.
Pilih kontainer blob gambar .
Verifikasi gambar ditampilkan dalam kontainer.
Menguji tampilan gambar mini
Untuk menguji tampilan gambar mini, Anda mengunggah gambar ke kontainer gambar mini untuk memeriksa apakah aplikasi dapat membaca kontainer gambar mini .
Masuk ke portal Azure. Dari menu sebelah kiri, pilih Akun penyimpanan, lalu pilih nama akun penyimpanan Anda. Pilih Kontainer, lalu pilih kontainer gambar mini. Pilih Unggah untuk membuka panel Unggah blob.
Pilih file dengan pemilih file dan pilih Unggah.
Navigasi kembali ke aplikasi Anda untuk memverifikasi bahwa gambar yang diunggah ke kontainer gambar mini terlihat.
Di bagian dua seri tutorial ini, Anda mengotomatiskan pembuatan gambar mini sehingga Anda tidak memerlukan gambar ini. Di k gambar mini, pilih gambar yang Anda unggah, dan pilih Hapus untuk menghapus gambar.