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

Azure Event Grid adalah layanan peristiwa untuk cloud. Event Grid memungkinkan Anda membuat langganan acara yang dimunculkan oleh layanan Azure atau sumber daya pihak ketiga.

Tutorial ini memperluas Pengunggahan data gambar di cloud dengan tutorial Azure Storage untuk menambahkan pembuatan gambar mini otomatis tanpa server menggunakan Azure Event Grid dan Azure Functions. Event Grid memungkinkan Azure Functions merespons peristiwa penyimpanan Azure Blob dan menghasilkan thumbnail gambar yang diunggah. Langganan acara dibuat atas peristiwa pembuatan penyimpanan Blob. Ketika blob ditambahkan ke kontainer penyimpanan Blob tertentu, titik akhir fungsi dipanggil. Data yang diteruskan ke fungsi pengikatan dari Event Grid digunakan untuk mengakses blob dan menghasilkan thumbnail.

Anda menggunakan Azure CLI dan portal Microsoft Azure untuk menambahkan fungsionalitas pengubahan ukuran ke aplikasi pengunggahan gambar yang sudah ada.

.NET v12 SDK

Node.js v10 SDK

Dalam tutorial ini, Anda akan mempelajari cara:

• Membuat akun Azure Storage
• Menerapkan kode tanpa server menggunakan Azure Functions
• Membuat langganan acara penyimpanan Blob di Event Grid

Prasyarat

Catatan

Artikel ini menggunakan modul Azure Az PowerShell, yang merupakan modul PowerShell yang direkomendasikan untuk berinteraksi dengan Azure. Untuk mulai menggunakan modul Az PowerShell, lihat Menginstal Azure PowerShell. Untuk mempelajari cara bermigrasi ke modul Az PowerShell, lihat Memigrasikan Azure PowerShell dari AzureRM ke Az.

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.

PowerShell

Gunakan perintah New-AzStorageAccount.

1. Tentukan nama untuk grup sumber daya.

   $resourceGroupName="myResourceGroup"
   

2. Tentukan lokasi untuk akun penyimpanan.

   $location="eastus"    
   

3. Tentukan nama akun penyimpanan yang akan digunakan oleh fungsi tersebut.

   $functionstorage="<name of the storage account to be used by the function>"    
   

4. Membuat akun penyimpanan.

   New-AzStorageAccount -ResourceGroupName $resourceGroupName -AccountName $functionstorage -Location $location -SkuName Standard_LRS -Kind StorageV2        
   

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.

1. Tentukan nama untuk grup sumber daya.

   resourceGroupName="myResourceGroup"    
   

2. Tentukan lokasi untuk akun penyimpanan.

   location="eastus"
   

3. Tentukan nama akun penyimpanan yang akan digunakan oleh fungsi tersebut.

   functionstorage="<name of the storage account to be used by the function>"
   

4. Membuat akun penyimpanan.

   az storage account create --name $functionstorage --location $location --resource-group $resourceGroupName --sku Standard_LRS --kind StorageV2
   

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.

PowerShell

Buat aplikasi fungsi dengan menggunakan perintah New-AzFunctionApp.

1. Tentukan nama untuk aplikasi fungsi.

   $functionapp="<name of the function app>"    
   

2. Buat aplikasi fungsi.

   New-AzFunctionApp -Location $location -Name $functionapp -ResourceGroupName $resourceGroupName -Runtime PowerShell -StorageAccountName $functionstorage    
   

Azure CLI

Buat aplikasi Functions menggunakan perintah az functionapp create.

1. Tentukan nama untuk aplikasi fungsi.

   functionapp="<name of the function app>"
   

2. Buat aplikasi fungsi.

   az functionapp create --name $functionapp --storage-account $functionstorage --resource-group $resourceGroupName --consumption-plan-location $location --functions-version 3    
   

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.

.NET v12 SDK

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

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

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

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

Node.js v10 SDK

blobStorageAccountKey=$(az storage account keys list -g $resourceGroupName -n $blobStorageAccount --query [0].value --output tsv)

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

az functionapp config appsettings set --name $functionapp --resource-group $resourceGroupName --settings FUNCTIONS_EXTENSION_VERSION=~2 BLOB_CONTAINER_NAME=thumbnails AZURE_STORAGE_ACCOUNT_NAME=$blobStorageAccount AZURE_STORAGE_ACCOUNT_ACCESS_KEY=$blobStorageAccountKey AZURE_STORAGE_CONNECTION_STRING=$storageConnectionString FUNCTIONS_WORKER_RUNTIME=node WEBSITE_NODE_DEFAULT_VERSION=~10

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

.NET v12 SDK

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 $resourceGroupName --branch master --manual-integration --repo-url https://github.com/Azure-Samples/function-image-upload-resize

Node.js v10 SDK

Contoh fungsi pengubah ukuran Node.js 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 $resourceGroupName --branch master --manual-integration \
  --repo-url https://github.com/Azure-Samples/storage-blob-resize-function-node

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.

.NET v12 SDK

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

Node.js v10 SDK

Untuk mempelajari selengkapnya tentang fungsi ini, lihat function.json and index.js 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 yang Anda buat.
   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.

.NET v12 SDK

Klik daerah 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.

Node.js v10 SDK

Klik Pilih File untuk memilih file, lalu klik Unggah Gambar. Saat unggahan berhasil, browser menavigasi ke halaman sukses. Klik link untuk kembali ke halaman beranda. Salinan gambar yang diunggah ditampilkan di area Thumbnail yang Dihasilkan. (Jika gambar tidak kunjung muncul, coba muat ulang halaman.) Gambar ini telah diubah ukurannya oleh fungsi, ditambahkan ke kontainer thumbnail, dan diunduh oleh klien web.

Langkah berikutnya

Dalam tutorial ini, Anda mempelajari cara:

• Membuat akun Azure Storage umum
• Menerapkan kode tanpa server menggunakan Azure Functions
• Membuat langganan acara penyimpanan Blob di Event Grid

Lanjutkan ke bagian tiga dari seri tutorial Azure Storage untuk mempelajari cara mengamankan akses ke akun penyimpanan.

Akses aman ke data aplikasi di cloud

• Untuk mempelajari selengkapnya tentang Event Grid, lihat Pengenalan Azure Event Grid.
• Untuk mencoba tutorial lain yang menampilkan Azure Functions, lihat Membuat fungsi yang terintegrasi dengan Azure Logic Apps.