Tutorial Langkah 2: otomatisasi penyesuaian ukuran gambar yang diunggah menggunakan Event Grid

Tutorial ini memperluas tutorial Mengunggah data gambar di cloud dengan Azure Storage untuk menambahkan pembuatan gambar mini otomatis tanpa server menggunakan Azure Event Grid dan Azure Functions. Berikut adalah alur kerja tingkat tinggi:

Dalam tutorial ini, Anda melakukan tugas-tugas berikut:

• Membuat akun Azure Storage
• Membuat, mengonfigurasi, dan menyebarkan aplikasi fungsi
• Membuat langganan peristiwa ke peristiwa penyimpanan
• Menguji aplikasi sampel

Prasyarat

Untuk menyelesaikan tutorial ini:

• Anda memerlukan langganan Azure. Tutorial ini tidak berfungsi dengan langganan gratis.
• Anda harus menyelesaikan tutorial penyimpanan Blob sebelumnya: Mengunggah data gambar di cloud dengan Azure Storage.

Membuat akun Azure Storage

Azure Functions memerlukan akun penyimpanan umum. Selain akun penyimpanan Blob yang Anda buat di tutorial sebelumnya, buat akun penyimpanan umum terpisah di grup sumber daya. Nama akun penyimpanan harus sepanjang 3 dan 24 karakter dan dapat mengandung angka dan huruf kecil saja.

Atur variabel untuk menyimpan nama grup sumber daya yang Anda buat di tutorial sebelumnya, lokasi sumber daya yang akan dibuat, dan nama akun penyimpanan baru yang diperlukan Azure Functions. Lalu, buat akun penyimpanan untuk fungsi Azure.

Azure CLI

Gunakan perintah az storage account create.

Catatan

Gunakan perintah berikut di shell Bash Cloud Shell. Gunakan daftar tarik-turun di sudut kiri atas Cloud Shell untuk beralih ke Bash shell jika diperlukan.

Jalankan perintah berikut untuk membuat akun penyimpanan Azure.

functionstorage="funcstorage$RANDOM"
az storage account create --name $functionstorage --location $region --resource-group $rgName --sku Standard_LRS --kind StorageV2  --allow-blob-public-access true

PowerShell

Gunakan perintah New-AzStorageAccount.

$functionstorage="funcstorage"  + (Get-Random).ToString()   
New-AzStorageAccount -ResourceGroupName $rgName -AccountName $functionstorage -Location $region -SkuName Standard_LRS -Kind StorageV2 -AllowBlobPublicAccess $true       

Membuat aplikasi fungsi

Anda harus memiliki aplikasi fungsi untuk menghosting eksekusi fungsi Anda. Aplikasi fungsi menyediakan lingkungan untuk eksekusi tanpa server dari kode fungsi Anda. Dalam perintah berikut, berikan nama aplikasi fungsi unik Anda sendiri. Nama aplikasi fungsi digunakan sebagai domain DNS default untuk aplikasi fungsi, sehingga namanya harus unik di semua aplikasi di Azure. Tentukan nama untuk aplikasi fungsi yang akan dibuat, lalu buat fungsi Azure.

Azure CLI

Buat aplikasi Functions menggunakan perintah az functionapp create.

functionapp="funcapp$RANDOM"
az functionapp create --name $functionapp --storage-account $functionstorage --resource-group $rgName --consumption-plan-location $region --functions-version 4

PowerShell

Buat aplikasi fungsi dengan menggunakan perintah New-AzFunctionApp.

$functionapp="funcapp" + (Get-Random).ToString()    
New-AzFunctionApp -Location $region -Name $functionapp -ResourceGroupName $rgName -Runtime PowerShell -StorageAccountName $functionstorage    

Sekarang konfigurasikan aplikasi fungsi untuk terhubung ke akun penyimpanan Blob yang Anda buat di tutorial sebelumnya.

Mengonfigurasi aplikasi fungsi

Fungsi ini membutuhkan kredensial untuk akun penyimpanan Blob, yang ditambahkan ke pengaturan aplikasi dari aplikasi fungsi menggunakan perintah az functionapp config appsettings set atau Update-AzFunctionAppSetting.

Azure CLI

storageConnectionString=$(az storage account show-connection-string --resource-group $rgName --name $blobStorageAccount --query connectionString --output tsv)

az functionapp config appsettings set --name $functionapp --resource-group $rgName --settings AzureWebJobsStorage=$storageConnectionString THUMBNAIL_CONTAINER_NAME=thumbnails THUMBNAIL_WIDTH=100 FUNCTIONS_EXTENSION_VERSION=~2 FUNCTIONS_WORKER_RUNTIME=dotnet

PowerShell

$storageConnectionString=$(az storage account show-connection-string --resource-group $rgName --name $blobStorageAccount --query connectionString --output tsv)

Update-AzFunctionAppSetting -Name $functionapp -ResourceGroupName $rgName -AppSetting @{'AzureWebJobsStorage'=$storageConnectionString; 'THUMBNAIL_CONTAINER_NAME'='thumbnails'; 'THUMBNAIL_WIDTH'=100; 'FUNCTIONS_EXTENSION_VERSION'='~2'; 'FUNCTIONS_WORKER_RUNTIME'='dotnet'}

Pengaturan FUNCTIONS_EXTENSION_VERSION=~2 membuat aplikasi fungsi berjalan pada versi 2.x dari runtime Azure Functions. Kini Anda dapat menerapkan project kode fungsi ke aplikasi fungsi ini.

Menerapkan aplikasi fungsi

Contoh fungsi mengubah ukuran C# tersedia di GitHub. Terapkan proyek kode ini ke aplikasi fungsi dengan menggunakan perintah az functionapp deployment source config.

az functionapp deployment source config --name $functionapp --resource-group $rgName --branch master --manual-integration --repo-url https://github.com/Azure-Samples/function-image-upload-resize

Fungsi resize gambar dipicu oleh permintaan HTTP yang dikirim ke dalamnya dari layanan Event Grid. Anda memberi tahu Event Grid bahwa Anda ingin mendapatkan notifikasi ini di URL fungsi Anda dengan membuat langganan acara. Untuk tutorial ini, Anda berlangganan acara yang dibuat oleh blob.

Data yang diteruskan ke fungsi dari pemberitahuan Event Grid menyertakan URL blob. URL tersebut kemudian diteruskan ke input pengikatan untuk mendapatkan gambar yang diupload dari penyimpanan Blob. Fungsi ini menghasilkan gambar thumbnail dan menulis aliran yang dihasilkan ke kontainer terpisah di penyimpanan Blob.

Proyek ini menggunakan EventGridTrigger sebagai tipe pemicunya. Penggunaan pemicu Event Grid disarankan melalui pemicu HTTP generik. Event Grid secara otomatis memvalidasi pemicu fungsi Event Grid. Dengan pemicu HTTP generik, Anda harus menerapkan respons validasi.

Untuk mempelajari selengkapnya tentang fungsi ini, lihat function.json and run.csx files.

Kode proyek fungsi diterapkan langsung dari repositori sampel publik. Untuk mempelajari selengkapnya tentang opsi penerapan untuk Azure Functions, lihat Penerapan berkelanjutan untuk Azure Functions.

Membuat langganan peristiwa

Langganan peristiwa menunjukkan peristiwa yang dihasilkan penyedia mana yang ingin Anda kirim ke titik akhir tertentu. Dalam hal ini, titik akhir diekspos oleh fungsi Anda. Gunakan langkah-langkah berikut untuk membuat langganan acara yang mengirim pemberitahuan ke fungsi Anda di portal Microsoft Azure:

1. Di portal Microsoft Azure, di bagian atas halaman cari dan pilih Function App lalu pilih aplikasi fungsi yang baru saja Anda buat. Pilih Functions dan pilih fungsi Thumbnail.

   

2. Pilih pilih Integrasi lalu pilih Pemicu Event Grid dan pilih Buat langganan Event Grid.

   

3. Gunakan pengaturan langganan acara seperti yang ditentukan dalam tabel.

   

   Pengaturan	Nilai yang disarankan	Deskripsi
   Nama	imageresizersub	Nama yang mengidentifikasi langganan acara baru Anda.
   Jenis topik	Akun penyimpanan	Pilih penyedia peristiwa akun Azure Storage.
   Langganan	Langganan Azure Anda	Secara default, langganan Azure Anda saat ini dipilih.
   Grup Sumber Daya	myResourceGroup	Pilih Gunakan yang sudah ada dan pilih grup sumber daya yang telah Anda gunakan dalam tutorial ini.
   Sumber daya	Akun penyimpanan Azure Blob	Pilih akun penyimpanan Blob tempat gambar disimpan, bukan yang digunakan oleh aplikasi fungsi Azure.
   Nama Topik Sistem	imagestoragesystopic	Tentukan nama untuk topik sistem. Untuk mempelajari selengkapnya tentang topik sistem, lihat Gambaran umum topik sistem.
   Jenis kejadian	Blob dibuat	Hapus centang semua tipe selain Blob yang dibuat. Hanya jenis peristiwa Microsoft.Storage.BlobCreated yang diteruskan ke fungsi.
   Jenis titik akhir	autogenerated	Ditentukan sebelumnya sebagai Azure Function.
   Endpoint	autogenerated	Nama fungsi. Dalam hal ini, ini adalah Thumbnail.

4. Beralih ke tab Filter, dan lakukan tindakan berikut ini:

   1. Pilih Opsi Aktifkan pemfilteran subjek.

   2. Untuk Subjek yang dimulai dengan, masukkan nilai berikut: /blobServices/default/containers/images/.

      

5. Pilih Buat untuk menambahkan langganan peristiwa untuk membuat langganan peristiwa yang memicu fungsiThumbnailsaat blob ditambahkan ke kontainerimages. Fungsi ini mengubah ukuran gambar dan menambahkannya ke kontainer thumbnails.

Sekarang setelah layanan backend dikonfigurasi, Anda menguji fungsi mengubah ukuran gambar di aplikasi web sampel.

Menguji aplikasi sampel

Untuk menguji pengubahan ukuran gambar di aplikasi web, telusuri URL aplikasi yang dipublikasikan. URL default aplikasi web adalah https://<web_app>.azurewebsites.net.

Pilih Unggah foto untuk memilih dan mengunggah file. Anda juga dapat menyeret foto ke daerah ini.

Perhatikan bahwa setelah gambar yang diunggah menghilang, salinan gambar yang diunggah ditampilkan di carousel Thumbnail yang Dihasilkan. Gambar ini telah diubah ukurannya oleh fungsi, ditambahkan ke kontainer thumbnail, dan diunduh oleh klien web.

Langkah berikutnya

Lihat tutorial lain di bagian Tutorial dari daftar isi (TOC).