Mulai menggunakan Azure Cloud Services (klasik) dan ASP.NET

Gambaran Umum

Penting

Cloud Services (klasik) sekarang tidak lagi digunakan untuk pelanggan baru dan akan dihentikan untuk semua pelanggan pada 31 Agustus 2024. Penyebaran baru sebaiknya menggunakan Azure Resource Manager yang baru berdasarkan model penyebaran Azure Cloud Services (dukungan tambahan) .

Tutorial ini menunjukkan cara membuat aplikasi .NET multi-tier dengan ASP.NET front-end MVC, dan menyebarkannya ke layanan awan Azure. Aplikasi ini menggunakan Azure SQL Database, Azure Blob service, dan layanan Azure Queue. Anda dapat mengunduh proyek Visual Studio dari Galeri Kode MSDN.

Tutorial ini menunjukkan kepada Anda cara membuat dan menjalankan aplikasi secara lokal, cara menyebarkan ke Azure dan berjalan di awan, dan cara membangunnya dari awal. Anda dapat memulai dengan membangun dari awal dan kemudian melakukan tes dan menyebarkan langkah-langkah sesudahnya jika Anda mau.

Aplikasi Iklan Contoso

Aplikasi ini adalah papan buletin iklan. Pengguna membuat iklan dengan memasukkan teks dan mengunggah gambar. Mereka dapat melihat daftar iklan dengan gambar mini, dan mereka dapat melihat gambar ukuran penuh saat mereka memilih iklan untuk melihat detailnya.

Aplikasi ini menggunakan pola kerja yang berpusat pada antrean untuk melakukan off-load pada pekerjaan intensif CPU dalam membuat thumbnail ke proses back-end.

Arsitektur alternatif: Layanan Aplikasi dan WebJobs

Tutorial ini menunjukkan cara menjalankan front-end dan back-end dalam layanan cloud Azure. Alternatifnya adalah menjalankan front-end di Azure App Service dan menggunakan fitur WebJobs untuk back-end. Untuk tutorial yang menggunakan WebJobs, lihat Mulai menggunakan Azure WebJobs SDK. Untuk informasi tentang cara memilih layanan yang paling sesuai dengan skenario Anda, lihat Azure App Service, Cloud Services, dan perbandingan komputer virtual.

Apa yang akan Anda pelajari

• Cara mengaktifkan komputer Anda untuk pengembangan Azure dengan menginstal Azure SDK.
• Cara membuat proyek layanan cloud Visual Studio dengan peran ASP.NET web MVC dan peran pekerja.
• Cara menguji proyek layanan awan secara lokal, menggunakan Azure Storage Emulator.
• Cara menerbitkan proyek awan ke layanan awan Azure dan menguji menggunakan akun penyimpanan Azure.
• Cara mengunggah file dan menyimpannya di Azure Blob service.
• Cara menggunakan layanan Azure Queue untuk komunikasi antar tingkatan.

Prasyarat

Tutorial ini mengasumsikan bahwa Anda memahami konsep dasar tentang layanan awan Azure seperti peran web dan terminologi peran pekerja. Ini juga mengasumsikan bahwa Anda tahu cara bekerja dengan ASP.NET MVC atau Web Forms di Visual Studio. Aplikasi sampel menggunakan MVC, tetapi sebagian besar tutorial juga berlaku untuk Formulir Web.

Anda dapat menjalankan aplikasi secara lokal tanpa langganan Azure, tetapi Anda memerlukannya untuk menerapkan aplikasi ke awan. Jika Anda tidak memiliki akun, Anda dapat mengaktifkan manfaat pelanggan MSDN Anda atau mendaftar untuk uji coba gratis.

Instruksi tutorial bekerja dengan salah satu produk berikut:

• Visual Studio 2013
• Visual Studio 2015
• Visual Studio 2017
• Visual Studio 2019

Jika Anda tidak memiliki salah satu dari ini, Visual Studio mungkin diinstal secara otomatis saat Anda menginstal Azure SDK.

Arsitektur aplikasi

Aplikasi ini menyimpan iklan dalam database SQL, menggunakan Kode Kerangka Kerja Entitas Terlebih dahulu untuk membuat tabel dan mengakses data. Untuk setiap iklan, database menyimpan dua URL, satu untuk gambar ukuran penuh dan satu untuk gambar mini.

Saat pengguna mengunggah gambar, front-end yang berjalan di peran web menyimpan gambar dalam gumpalan Azure, dan menyimpan informasi iklan dalam database dengan URL yang menunjuk ke blob. Pada saat yang sama, ia menulis pesan ke antrean Azure. Proses back-end yang berjalan dalam peran pekerja secara berkala polling antrian untuk pesan baru. Saat pesan baru muncul, peran pekerja membuat gambar mini untuk gambar tersebut dan memperbarui bidang database URL gambar mini untuk iklan tersebut. Diagram berikut menunjukkan bagaimana bagian-bagian aplikasi berinteraksi.

Menyiapkan lingkungan pengembangan

Untuk memulai, siapkan lingkungan pengembangan Anda dengan Visual Studio dan Azure SDK.

• Visual Studio 2019 menyertakan Azure SDK. Jika Anda menggunakan Visual Studio 2019, tidak diperlukan penyiapan tambahan untuk lingkungan pengembangan.

• Untuk Visual Studio 2015, klik tautan berikut untuk menginstal Azure SDK for Visual Studio 2015.

• Untuk Visual Studio 2013, klik tautan berikut untuk menginstal Azure SDK for Visual Studio 2013.

• Jika Anda belum menginstal Visual Studio, gunakan tautan berikut untuk menginstal Visual Studio 2019 dengan Azure SDK.

Catatan

Tergantung pada jumlah dependensi SDK yang sudah ada pada komputer Anda, menginstal SDK dapat memakan waktu lama, dari beberapa menit hingga setengah jam atau lebih.

Unduh dan jalankan solusi yang telah selesai

1. Unduh dan buka zip solusi yang telah selesai.

2. Mulai Visual Studio.

3. Dari menu File pilih Buka Proyek,navigasi ke tempat Anda mengunduh solusi, lalu buka file solusi.

4. Tekan CTRL+SHIFT+B untuk membangun solusi.

   Secara default, Visual Studio secara otomatis memulihkan konten paket NuGet, yang tidak disertakan dalam file .zip. Jika paket tidak dipulihkan, pasang secara manual dengan masuk ke kotak dialog Kelola Paket NuGet untuk Solusi dan klik tombol Pulihkan di kanan atas.

5. Di Penjelajah Solusi, pastikan ContosoAdsCloudService dipilih sebagai proyek startup.

6. Jika Anda menggunakan Visual Studio 2015 atau lebih tinggi, ubah string koneksi SQL Server di file aplikasi Web.config daru proyek ContosoAdsWeb dan di file ServiceConfiguration.Local.cscfg dari proyek ContosoAdsCloudService. Dalam setiap kasus, ubah "(localdb)\v11.0" menjadi "(localdb)\MSSQLLocalDB".

7. Klik CTRL + F5 untuk menjalankan aplikasi.

   Saat Anda menjalankan proyek layanan awan secara lokal, Visual Studio secara otomatis memanggil emulator komputasi Azure dan emulator penyimpanan Azure. Emulator komputasi menggunakan sumber daya komputer Anda untuk mensimulasikan peran web dan lingkungan peran pekerja. Emulator penyimpanan menggunakan database SQL Server Express LocalDB untuk mensimulasikan penyimpanan awan Azure.

   Pertama kali Anda menjalankan proyek layanan awan, dibutuhkan satu menit atau lebih agar emulator dapat memulai. Setelah startup emulator selesai, browser default akan terbuka ke halaman beranda aplikasi.

   

8. Klik Buat Iklan.

9. Masukkan beberapa data pengujian dan pilih gambar .jpg untuk diunggah, lalu klik Buat.

   

   Aplikasi ini masuk ke halaman Indeks, tetapi tidak menampilkan gambar mini untuk iklan baru karena pemrosesan tersebut belum terjadi.

10. Tunggu sebentar lalu refresh halaman Indeks untuk melihat gambar mini.

    

11. Klik Detail untuk iklan Anda untuk melihat gambar berukuran penuh.

    

Anda telah menjalankan aplikasi sepenuhnya di komputer lokal Anda, tanpa koneksi ke awan. Emulator penyimpanan menyimpan data antrean dan blob dalam database SQL Server Express LocalDB, dan aplikasi menyimpan data iklan di database LocalDB lain. Kode Kerangka Kerja Entitas Pertama secara otomatis membuat database iklan pertama kali aplikasi web mencoba mengaksesnya.

Di bagian berikut ini Anda akan mengonfigurasi solusi untuk menggunakan sumber daya awan Azure untuk antrean, blob, dan database aplikasi saat berjalan di awan. Jika Anda ingin terus berjalan secara lokal tetapi menggunakan penyimpanan awan dan sumber daya database, Anda bisa melakukannya. Ini hanya masalah pengaturan string koneksi, yang akan Anda lihat bagaimana melakukannya.

Menyebarkan aplikasi ke Azure

Anda akan melakukan langkah-langkah berikut untuk menjalankan aplikasi di awan:

• Membuat layanan awan Azure.
• Membuat database di Azure SQL Database.
• Buat akun penyimpanan Azure.
• Konfigurasikan solusi untuk menggunakan database Anda saat dijalankan di Azure.
• Konfigurasikan solusi untuk menggunakan database Anda saat dijalankan di Azure.
• Sebarkan proyek ke layanan cloud Azure Anda.

Membuat layanan awan Azure

Layanan awan Azure adalah lingkungan yang akan dijalankan aplikasi.

1. Di browser Anda, buka portal Microsoft Azure.

2. Klik Buat sumber daya > Azure Compute > Layanan Cloud.

3. Dalam kotak input nama DNS, masukkan awalan URL untuk layanan awan.

   URL ini harus unik. Anda akan mendapatkan pesan kesalahan jika awalan yang Anda pilih sudah digunakan.

4. Tentukan grup Sumber Daya baru untuk layanan tersebut. Klik Buat baru lalu ketik nama dalam kotak Input grup Sumber Daya, seperti CS_contososadsRG.

5. Pilih wilayah tempat Anda ingin menggunakan aplikasi.

   Bidang ini menentukan pusat data mana layanan awan Anda akan dihosting. Untuk aplikasi produksi, Anda akan memilih wilayah yang paling dekat dengan pelanggan Anda. Untuk tutorial ini, pilih wilayah yang paling dekat dengan Anda.

6. Klik Buat.

   Dalam gambar berikut, layanan awan dibuat dengan URL CSvccontosoads.cloudapp.net.

   

Membuat database di Azure SQL Database

Saat aplikasi berjalan di awan, aplikasi akan menggunakan database berbasis cloud.

1. Di portal Microsoft Azure, klik Buat sumber daya > Database > SQL Database.

2. Dalam kotak Nama Database, masukkan contosoads.

3. Di Grup Sumber Daya, klik Gunakan yang sudah ada dan pilih grup sumber daya yang digunakan untuk layanan awan.

4. Dalam gambar berikut, klik Server - Konfigurasikan pengaturan yang diperlukan dan Buat server baru.

   

   Atau, jika langganan Anda sudah memiliki server, Anda dapat memilih server tersebut dari daftar turun bawah.

5. Dalam kotak Nama server, masukkan csvccontosodbserver.

6. Masukkan Nama Masuk dan Kata Sandi administrator.

   Jika Anda memilih Buat server baru,Anda tidak memasukkan nama dan kata sandi yang sudah ada di sini. Anda memasukkan nama dan kata sandi baru yang Anda tentukan sekarang untuk digunakan nanti saat Anda mengakses database. Jika Anda memilih server yang Anda buat sebelumnya, Anda akan dimintai kata sandi ke akun pengguna administratif yang sudah Anda buat.

7. Pilih Lokasi yang sama dengan yang Anda pilih untuk layanan awan.

   Ketika layanan awan dan database berada di pusat data yang berbeda (wilayah yang berbeda), latensi akan meningkat dan Anda akan dikenakan biaya untuk bandwidth di luar pusat data. Bandwidth dalam pusat data gratis.

8. Centang Perbolehkan layanan azure untuk mengakses server.

9. Klik Pilih untuk server baru.

   

10. Klik Buat.

Membuat akun penyimpanan Azure

Akun penyimpanan Azure menyediakan sumber daya untuk menyimpan data antrean dan blob di awan.

Dalam aplikasi dunia nyata, Anda biasanya akan membuat akun terpisah untuk data aplikasi versus data pencatatan, dan akun terpisah untuk data pengujian versus data produksi. Untuk tutorial ini, Anda hanya akan menggunakan satu akun.

1. Di portal Microsoft Azure, klik Buat sumber daya > Penyimpanan > Akun penyimpanan - blob, file, tabel, antrean.

2. Dalam kotak Nama, masukkan awalan URL.

   Awalan ini ditambah teks yang Anda lihat di bawah kotak akan menjadi URL unik untuk akun penyimpanan Anda. Jika awalan yang Anda masukkan telah digunakan oleh orang lain, Anda harus memilih awalan yang berbeda.

3. Atur Model penyebaran ke Klasik.

4. Atur daftar turun Replikasi ke Penyimpanan yang berlebihan secara lokal.

   Ketika replikasi geografis diaktifkan untuk akun penyimpanan, konten yang disimpan direplikasi ke pusat data sekunder untuk memungkinkan failover jika bencana besar terjadi di lokasi utama. Geo-replikasi dapat dikenakan biaya tambahan. Untuk akun pengujian dan pengembangan, Anda umumnya tidak ingin membayar untuk replikasi geografis. Untuk informasi selengkapnya, lihat Membuat, mengelola, atau menghapus akun penyimpanan.

5. Di Grup Sumber Daya, klik Gunakan yang sudah ada dan pilih grup sumber daya yang digunakan untuk layanan awan.

6. Atur daftar turun Lokasi ke wilayah yang sama dengan yang Anda pilih untuk layanan awan.

   Ketika layanan awan dan database berada di pusat data yang berbeda (wilayah yang berbeda), latensi akan meningkat dan Anda akan dikenakan biaya untuk bandwidth di luar pusat data. Bandwidth dalam pusat data gratis.

   Grup afinitas Azure menyediakan mekanisme untuk meminimalkan jarak antara sumber daya di pusat data, yang dapat mengurangi latensi. Tutorial ini tidak menggunakan grup afinitas. Untuk informasi selengkapnya, lihat Cara Membuat Grup Afinitas di Azure.

7. Klik Buat.

   

   Dalam gambar, akun penyimpanan dibuat dengan URL csvccontosoads.core.windows.net.

Konfigurasikan solusi untuk menggunakan database Anda di Azure SQL Database saat dijalankan di Azure

Proyek web dan proyek peran pekerja masing-masing memiliki string koneksi database sendiri, dan masing-masing perlu menunjuk ke database di Azure SQL Database saat aplikasi berjalan di Azure.

Anda akan menggunakan Web.config transform untuk peran web dan pengaturan lingkungan layanan awan untuk peran pekerja.

Catatan

Di bagian ini dan bagian berikutnya, Anda menyimpan kredensial dalam file proyek. Jangan simpan data sensitif di repositori kode sumber publik.

1. Dalam proyek ContosoAdsWeb, buka file transformasi Web.Release.config untuk file Web.config aplikasi, hapus blok komentar yang berisi <connectionStrings> elemen, dan tempelkan kode berikut di tempatnya.

   <connectionStrings>
       <add name="ContosoAdsContext" connectionString="{connectionstring}"
       providerName="System.Data.SqlClient" xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
   </connectionStrings>
   

   Biarkan file terbuka untuk diedit.

2. Di portal Microsoft Azure,klik Database SQL di panel kiri, klik database yang Anda buat untuk tutorial ini, lalu klik Perlihatkan string koneksi.

   

   Portal menampilkan string koneksi, dengan tempat penampung untuk kata sandi.

   

3. Dalam file transformasi Web.Release.config, hapus {connectionstring} dan tempel di tempatnya string koneksi ADO.NET dari portal Microsoft Azure.

4. Dalam string koneksi yang Anda tempelkan ke dalam file transformasi Web.Release.config, ganti {your_password_here} dengan kata sandi yang Anda buat untuk database SQL baru.

5. Simpan file.

6. Pilih dan salin string koneksi (tanpa tanda kutip di sekitarnya) untuk digunakan dalam langkah-langkah berikut untuk mengonfigurasi proyek peran pekerja.

7. Di Penjelajah Solusi, pada Roles di proyek layanan awan, klik kanan ContosoAdsWorker dan kemudian klik Properties.

   

8. Klik tab Pengaturan.

9. Ubah Konfigurasi Layanan ke Awan.

10. Pilih bidang Nilai untuk pengaturan ContosoAdsDbConnectionString, lalu tempelkan string koneksi yang Anda salin dari bagian tutorial sebelumnya.

    

11. Simpan perubahan Anda.

Konfigurasikan solusi untuk menggunakan database Anda saat dijalankan di Azure

String koneksi akun penyimpanan Azure untuk proyek peran web dan proyek peran pekerja disimpan dalam pengaturan lingkungan di proyek layanan awan. Untuk setiap proyek, ada sekumpulan pengaturan terpisah yang akan digunakan ketika aplikasi berjalan secara lokal dan ketika berjalan di awan. Anda akan memperbarui pengaturan lingkungan awan untuk proyek peran web dan pekerja.

1. Di Penjelajah Solusi, klik kanan ContosoAdsWeb pada Roles di proyek ContosoAdsCloudService, dan kemudian klik Properties.

   

2. Klik tab Pengaturan. Dalam kotak turun bawah Konfigurasi Layanan, pilih Awan.

   

3. Pilih entri StorageConnectionString, dan Anda akan melihat tombol elipsis ( ... ) di ujung kanan baris. Klik tombol elipsis untuk membuka kotak dialog Buat String Koneksi Akun Penyimpanan.

   

4. Dalam kotak dialog Buat String Koneksi Penyimpanan, klik Langganan Anda, pilih akun penyimpanan yang Anda buat sebelumnya, lalu klik OK. Jika Anda belum masuk, Anda akan dimintai kredensial akun Azure Anda.

   

5. Simpan perubahan Anda.

6. Ikuti prosedur yang sama dengan yang Anda gunakan untuk string koneksi StorageConnectionString untuk mengatur string koneksi Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString.

   String koneksi ini digunakan untuk log.

7. Ikuti prosedur yang sama dengan yang Anda gunakanuntuk peran ContosoAdsWeb untuk mengatur kedua string koneksi untuk peran ContosoAdsWorker. Jangan lupa untuk mengatur Konfigurasi Layanan ke Awan.

Pengaturan lingkungan peran yang telah Anda konfigurasi menggunakan UI Visual Studio disimpan dalam file berikut di proyek ContosoAdsCloudService:

• ServiceDefinition.csdef - Menentukan nama pengaturan.
• ServiceConfiguration.Cloud.cscfg - Menyediakan nilai saat aplikasi berjalan di cloud.
• ServiceConfiguration.Local.cscfg - Menyediakan nilai saat aplikasi berjalan lokal.

Misalnya, ServiceDefinition.csdef menyertakan definisi berikut:

<ConfigurationSettings>
    <Setting name="StorageConnectionString" />
    <Setting name="ContosoAdsDbConnectionString" />
</ConfigurationSettings>

Dan file ServiceConfiguration.Cloud.cscfg menyertakan nilai yang Anda masukkan untuk pengaturan tersebut di Visual Studio.

<Role name="ContosoAdsWorker">
    <Instances count="1" />
    <ConfigurationSettings>
        <Setting name="StorageConnectionString" value="{yourconnectionstring}" />
        <Setting name="ContosoAdsDbConnectionString" value="{yourconnectionstring}" />
        <!-- other settings not shown -->

    </ConfigurationSettings>
    <!-- other settings not shown -->

</Role>

Pengaturan <Instances> menentukan jumlah komputer virtual tempat Azure menjalankan kode peran pekerja. Bagian Langkah berikutnya menyertakan link ke informasi selengkapnya tentang penskalaan layanan cloud,

Menyebarkan proyek ke Azure

1. Di Penjelajah Solusi, klik kanan proyek awan ContosoAdsCloudService lalu pilih Terbitkan.

   

2. Di langkah Masuk pada panduan Terbitkan Aplikasi Azure, klik Berikutnya.

   

3. Di langkah Pengaturan dari panduan, klik Berikutnya.

   

   Pengaturan default di tab Tingkat Lanjut tidak masalah saja untuk tutorial ini. Untuk informasi tentang tab tingkat lanjut, lihat Menerbitkan Panduan Aplikasi Azure.

4. Di langkah Ringkasan, klik Terbitkan.

   

   Jendela Log Aktivitas Azure terbuka di Visual Studio.

5. Klik ikon panah kanan untuk memperluas detail penyebaran.

   Penyebaran dapat memakan waktu hingga 5 menit atau lebih untuk menyelesaikannya.

   

6. Ketika status penyebaran selesai, klik URL aplikasi Web untuk memulai aplikasi.

7. Sekarang Anda dapat menguji aplikasi dengan membuat, melihat, dan mengedit beberapa iklan, seperti yang Anda lakukan saat menjalankan aplikasi secara lokal.

Catatan

Setelah selesai menguji, hapus, atau hentikan layanan awan. Bahkan jika Anda tidak menggunakan layanan awan, itu mengumpulkan biaya karena sumber daya komputer virtual disediakan untuk itu. Dan jika Anda membiarkannya berjalan, siapa pun yang menemukan URL Anda dapat membuat dan melihat iklan. Di portal Microsoft Azure, masuk ke tab Gambaran Umum untuk layanan awan Anda, lalu klik tombol Hapus di bagian atas halaman. Jika Anda hanya ingin mencegah orang lain mengakses situs untuk sementara waktu, klik Berhenti sebagai gantinya. Dalam hal ini, biaya akan terus bertambah. Anda dapat mengikuti prosedur serupa untuk menghapus database SQL dan akun penyimpanan saat Anda tidak lagi membutuhkannya.

Buat aplikasi dari awal

Jika Anda belum mengunduh aplikasi yang sudah selesai, lakukan sekarang. Anda akan menyalin file dari proyek yang diunduh ke dalam proyek baru.

Membuat aplikasi Contoso Ads melibatkan langkah-langkah berikut:

• Buat solusi Visual Studio layanan awan.
• Perbarui dan tambahkan paket NuGet.
• Atur referensi proyek.
• Konfigurasi string koneksi.
• Tambahkan file kode.

Setelah solusi dibuat, Anda akan meninjau kode yang unik untuk proyek layanan awan dan blob dan antrean Azure.

Buat solusi Visual Studio layanan awan

1. Di Visual Studio, pilih Proyek Baru dari menu File.

2. Di panel kiri kotak dialog Proyek Baru, perluas Visual C# dan pilih Templat Awan, lalu pilih templat Azure Cloud Service.

3. Beri nama proyek dan solusi ContosoAdsCloudService, lalu klik OK.

   

4. Dalam kotak dialog Layanan Awan Azure Baru, tambahkan peran web dan peran pekerja. Beri nama peran web ContosoAdsWeb, dan beri nama peran pekerja ContosoAdsWorker. (Gunakan ikon pensil di panel kanan untuk mengubah nama default peran.)

   

5. Saat Anda melihat kotak dialog Proyek ASP.NET Baru untuk peran web, pilih templat MVC, lalu klik Ubah Autentikasi.

   

6. Dalam kotak dialog Ubah Autentikasi, pilih Tanpa Autentikasi, lalu klik OK.

   

7. Di dialog Proyek ASP.NET Baru, klik OK.

8. Di Penjelajah Solusi, klik kanan solusi (bukan salah satu proyek), dan pilih Tambahkan - Proyek Baru.

9. Dalam kotak dialog Tambahkan Proyek Baru, pilih Windows pada Visual C# di panel kiri, lalu klik templat Pustaka Kelas.

10. Beri nama proyek ContosoAdsCommon, lalu klik OK.

    Anda perlu mereferensikan konteks Kerangka Kerja Entitas dan model data dari proyek peran web dan pekerja. Sebagai alternatif, Anda dapat menentukan kelas terkait EF dalam proyek peran web dan referensi yang memproyeksikan dari proyek peran pekerja. Tetapi dalam pendekatan alternatif, proyek peran pekerja Anda akan memiliki referensi ke majelis web yang tidak dibutuhkan.

Memperbarui dan menambahkan paket NuGet

1. Buka kotak dialog Kelola Paket NuGet untuk solusi tersebut.

2. Di bagian atas jendela, pilih Pembaruan.

3. Cari paket WindowsAzure.Storage, dan jika ada dalam daftar, pilih dan pilih proyek web dan pekerja untuk memperbaruinya, lalu klik Perbarui.

   Library klien penyimpanan diperbarui lebih sering daripada templat proyek Visual Studio, sehingga Anda akan sering menemukan bahwa versi dalam proyek yang baru dibuat perlu diperbarui.

4. Di bagian atas jendela, pilih Telusur.

5. Temukan paket EntityFramework NuGet, dan pasang di ketiga proyek.

6. Temukan paket NuGet Microsoft.WindowsAzure.ConfigurationManager, dan pasang dalam proyek peran pekerja.

Atur referensi proyek

1. Dalam proyek ContosoAdsWeb, tetapkan referensi ke proyek ContosoAdsCommon. Klik kanan proyek ContosoAdsWeb, lalu klik Referensi - Tambahkan Referensi. Dalam kotak dialog Manajer Referensi, pilih Solusi – Proyek di panel kiri, pilih ContosoAdsCommon, lalu klik OK.

2. Dalam proyek ContosoAdsWeb, tetapkan referensi ke proyek ContosoAdsCommon.

   ContosoAdsCommon akan berisi model data Kerangka Kerja Entitas dan kelas konteks, yang akan digunakan oleh front-end dan back-end.

3. Dalam proyek ContosoAdsWorker, tetapkan referensi ke System.Drawing.

   Perakitan ini digunakan oleh back-end untuk mengonversi gambar menjadi gambar kecil.

Konfigurasi string koneksi

Di bagian ini, Anda mengonfigurasi Azure Storage dan string koneksi SQL untuk pengujian secara lokal. Instruksi penyebaran sebelumnya dalam tutorial menjelaskan cara mengatur string koneksi saat aplikasi berjalan di awan.

1. Dalam proyek ContosoAdsWeb, buka aplikasi Web.config file, dan masukkan elemen connectionStrings berikut setelah configSections elemen.

   <connectionStrings>
       <add name="ContosoAdsContext" connectionString="Data Source=(localdb)\v11.0; Initial Catalog=ContosoAds; Integrated Security=True; MultipleActiveResultSets=True;" providerName="System.Data.SqlClient" />
   </connectionStrings>
   

   Jika Anda menggunakan Visual Studio 2015 atau yang lebih tinggi, ganti "v11.0" dengan "MSSQLLocalDB".

2. Simpan perubahan Anda.

3. Di proyek ContosoAdsCloudService, klik kanan ContosoAdsWeb pada Peran, lalu klik Properti.

   

4. Di jendela properti ContosoAdsWeb [Peran] , klik tab Pengaturan, lalu klik Tambahkan Pengaturan.

   Biarkan Konfigurasi Layanan diatur ke Semua Konfigurasi.

5. Tambahkan pengaturan bernama StorageConnectionString. Atur Tipe ke ConnectionString, dan atur Nilai ke UseDevelopmentStorage=true.

   

6. Simpan perubahan Anda.

7. Ikuti prosedur yang sama untuk menambahkan string koneksi penyimpanan di properti peran ContosoAdsWorker.

8. Masih di jendela properti ContosoAdsWorker [Role] , tambahkan string koneksi lain:

   • Nama: ContosoAdsDbConnectionString

   • Ketik: String

   • Nilai: Tempelkan string koneksi yang sama dengan yang Anda gunakan untuk proyek peran web. (Contoh berikut adalah untuk Visual Studio 2013. Jangan lupa untuk mengubah Sumber Data jika Anda menyalin contoh ini dan Anda menggunakan Visual Studio 2015 atau lebih tinggi.)

     Data Source=(localdb)\v11.0; Initial Catalog=ContosoAds; Integrated Security=True; MultipleActiveResultSets=True;
     

Tambahkan file kode

Di bagian ini, Anda menyalin file kode dari solusi yang diunduh ke solusi baru. Bagian berikut akan menampilkan dan menjelaskan bagian-bagian penting dari kode ini.

Untuk menambahkan file ke proyek atau folder, klik kanan proyek atau folder dan klik Tambahkan - Item yang Sudah Ada. Pilih file yang Anda inginkan lalu klik Tambahkan. Jika ditanya apakah Anda ingin mengganti file yang sudah ada, klik Ya.

1. Dalam proyek ContosoAdsCommon, hapus file Class1.cs dan tambahkan di tempatnya file Ad.cs dan ContosoAdscontext.cs dari proyek yang diunduh.

2. Dalam proyek ContosoAdsWeb, tambahkan file berikut dari proyek yang diunduh.

   • Global.asax.cs.
   • Di folder Views\Shared: _Layout.cshtml.
   • Di folder Views\Home: Index.cshtml.
   • Di folder Pengontrol: AdController.cs.
   • Di folder Views\Ad (buat folder terlebih dahulu): lima file .cshtml.

3. Dalam proyek ContosoAdsWorker, tambahkan WorkerRole.cs dari proyek yang diunduh.

Anda sekarang dapat membangun dan menjalankan aplikasi seperti yang diinstruksikan sebelumnya dalam tutorial, dan aplikasi akan menggunakan database lokal dan sumber daya emulator penyimpanan.

Bagian berikut menjelaskan kode yang terkait dengan bekerja dengan lingkungan Azure, blob, dan antrean. Tutorial ini tidak menjelaskan cara membuat pengontrol dan tampilan MVC menggunakan perancah, cara menulis kode Kerangka Kerja Entitas yang bekerja dengan database SQL Server, atau dasar-dasar pemrograman asinkron di ASP.NET 4.5. Untuk informasi tentang topik ini, lihat sumber daya berikut ini:

• Memulai dengan MVC 5
• Memulai dengan EF 6 dan MVC 5
• Pengantar pemrograman asinkron di .NET 4.5.

ContosoAdsCommon - Ad.cs

File Ad.cs mendefinisikan enum untuk kategori iklan dan kelas entitas POCO untuk informasi iklan.

public enum Category
{
    Cars,
    [Display(Name="Real Estate")]
    RealEstate,
    [Display(Name = "Free Stuff")]
    FreeStuff
}

public class Ad
{
    public int AdId { get; set; }

    [StringLength(100)]
    public string Title { get; set; }

    public int Price { get; set; }

    [StringLength(1000)]
    [DataType(DataType.MultilineText)]
    public string Description { get; set; }

    [StringLength(1000)]
    [DisplayName("Full-size Image")]
    public string ImageURL { get; set; }

    [StringLength(1000)]
    [DisplayName("Thumbnail")]
    public string ThumbnailURL { get; set; }

    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime PostedDate { get; set; }

    public Category? Category { get; set; }
    [StringLength(12)]
    public string Phone { get; set; }
}

ContosoAdsCommon - ContosoAdsContext.cs

Class ContosoAdsContext menentukan bahwa kelas Iklan digunakan dalam koleksi DbSet, di mana Kerangka Kerja Entitas akan disimpan dalam database SQL.

public class ContosoAdsContext : DbContext
{
    public ContosoAdsContext() : base("name=ContosoAdsContext")
    {
    }
    public ContosoAdsContext(string connString)
        : base(connString)
    {
    }
    public System.Data.Entity.DbSet<Ad> Ads { get; set; }
}

Kelas ini memiliki dua konstruktor. Yang pertama digunakan oleh proyek web, dan menentukan nama string koneksi yang disimpan dalam file Web.config. Konstruktor kedua memungkinkan Anda untuk meneruskan string koneksi aktual yang digunakan oleh proyek peran pekerja, karena tidak memiliki file Web.config berbeda. Anda melihat sebelumnya di mana string koneksi ini disimpan, dan Anda akan melihat nanti bagaimana kode mengambil string koneksi ketika instan kelas DbContext.

ContosoAdsWeb - Global.asax.cs

Kode yang disebut dari metode Application_Start membuat kontainer blob gambar dan antrean gambar jika belum ada. Ini memastikan bahwa setiap kali Anda mulai menggunakan akun penyimpanan baru, atau mulai menggunakan emulator penyimpanan di komputer baru, kontainer dan antrean blob yang diperlukan akan dibuat secara otomatis.

Kode mendapatkan akses ke akun penyimpanan dengan menggunakan string koneksi penyimpanan dari file .cscfg.

var storageAccount = CloudStorageAccount.Parse
    (RoleEnvironment.GetConfigurationSettingValue("StorageConnectionString"));

Kemudian mendapat referensi ke kontainer blob gambar, membuat wadah jika belum ada, dan mengatur izin akses pada kontainer baru. Secara default, kontainer baru hanya memungkinkan klien dengan kredensial akun penyimpanan untuk mengakses blob. Situs web ini membutuhkan blob untuk dipublikasikan sehingga dapat menampilkan gambar menggunakan URL yang menunjuk ke blob gambar.

var blobClient = storageAccount.CreateCloudBlobClient();
var imagesBlobContainer = blobClient.GetContainerReference("images");
if (imagesBlobContainer.CreateIfNotExists())
{
    imagesBlobContainer.SetPermissions(
        new BlobContainerPermissions
        {
            PublicAccess =BlobContainerPublicAccessType.Blob
        });
}

Kode serupa mendapatkan referensi ke antrean gambar dan membuat antrean baru. Dalam hal ini, tidak diperlukan perubahan izin.

CloudQueueClient queueClient = storageAccount.CreateCloudQueueClient();
var imagesQueue = queueClient.GetQueueReference("images");
imagesQueue.CreateIfNotExists();

ContosoAdsWeb - _Layout.cshtml

File _Layout.cshtml mengatur nama aplikasi di header dan footer, dan membuat entri menu "Iklan".

ContosoAdsWeb - Views\Home\Index.cshtml

Berkas Views\Home\Index.cshtml menampilkan link kategori pada halaman beranda. Link meneruskan nilai bilangan bulat Category enum dalam variabel querystring ke halaman Indeks Iklan.

<li>@Html.ActionLink("Cars", "Index", "Ad", new { category = (int)Category.Cars }, null)</li>
<li>@Html.ActionLink("Real estate", "Index", "Ad", new { category = (int)Category.RealEstate }, null)</li>
<li>@Html.ActionLink("Free stuff", "Index", "Ad", new { category = (int)Category.FreeStuff }, null)</li>
<li>@Html.ActionLink("All", "Index", "Ad", null, null)</li>

ContosoAdsWeb - AdController.cs

Dalam file AdController.cs, konstruktor memanggil metodeInitializeStorage untuk membuat objek Azure Storage Client Library yang menyediakan API untuk bekerja dengan blob dan antrean.

Kemudian kode mendapatkan referensi ke kontainer gumpalan gambar seperti yang Anda lihat sebelumnya di Global.asax.cs. Saat melakukan itu, ia menetapkan kebijakan coba lagi default yang sesuai untuk aplikasi web. Kebijakan percobaan kembali eksponensial default dapat menyebabkan aplikasi web berhenti merespons lebih dari satu menit pada upaya berulang untuk kesalahan sementara. Kebijakan percobaan kembali yang ditentukan di sini menunggu tiga detik setelah setiap percobaan hingga tiga percobaan.

var blobClient = storageAccount.CreateCloudBlobClient();
blobClient.DefaultRequestOptions.RetryPolicy = new LinearRetry(TimeSpan.FromSeconds(3), 3);
imagesBlobContainer = blobClient.GetContainerReference("images");

Kode serupa mendapat referensi ke antrian gambar .

CloudQueueClient queueClient = storageAccount.CreateCloudQueueClient();
queueClient.DefaultRequestOptions.RetryPolicy = new LinearRetry(TimeSpan.FromSeconds(3), 3);
imagesQueue = queueClient.GetQueueReference("images");

Sebagian besar kode pengontrol khas untuk bekerja dengan model data Kerangka Kerja Entitas menggunakan class DbContext. Pengecualian adalah metode Create HttpPost, yang mengunggah file dan menyimpannya dalam penyimpanan blob. Pengikat model menyediakan objek HttpPostedFileBase ke metode ini.

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create(
    [Bind(Include = "Title,Price,Description,Category,Phone")] Ad ad,
    HttpPostedFileBase imageFile)

Jika pengguna memilih file untuk diunggah, kode mengunggah file, menyimpannya dalam blob, dan memperbarui rekaman database Iklan dengan URL yang menunjuk ke blob.

if (imageFile != null && imageFile.ContentLength != 0)
{
    blob = await UploadAndSaveBlobAsync(imageFile);
    ad.ImageURL = blob.Uri.ToString();
}

Kode yang melakukan unggahan adalah dalam metode UploadAndSaveBlobAsync. Ini membuat nama GUID untuk blob, mengunggah dan menyimpan file, dan mengembalikan referensi ke blob yang disimpan.

private async Task<CloudBlockBlob> UploadAndSaveBlobAsync(HttpPostedFileBase imageFile)
{
    string blobName = Guid.NewGuid().ToString() + Path.GetExtension(imageFile.FileName);
    CloudBlockBlob imageBlob = imagesBlobContainer.GetBlockBlobReference(blobName);
    using (var fileStream = imageFile.InputStream)
    {
        await imageBlob.UploadFromStreamAsync(fileStream);
    }
    return imageBlob;
}

Setelah metode HttpPost Create mengunggah blob dan memperbarui database, ia membuat pesan antrean untuk menginformasikan bahwa proses back-end bahwa gambar siap untuk konversi ke gambar kecil.

string queueMessageString = ad.AdId.ToString();
var queueMessage = new CloudQueueMessage(queueMessageString);
await queue.AddMessageAsync(queueMessage);

Kode untuk metode Edit HttpPost mirip kecuali bahwa jika pengguna memilih file gambar baru, blob apa pun yang sudah ada harus dihapus.

if (imageFile != null && imageFile.ContentLength != 0)
{
    await DeleteAdBlobsAsync(ad);
    imageBlob = await UploadAndSaveBlobAsync(imageFile);
    ad.ImageURL = imageBlob.Uri.ToString();
}

Contoh berikutnya memperlihatkan kode yang menghapus blob saat Anda menghapus iklan.

private async Task DeleteAdBlobsAsync(Ad ad)
{
    if (!string.IsNullOrWhiteSpace(ad.ImageURL))
    {
        Uri blobUri = new Uri(ad.ImageURL);
        await DeleteAdBlobAsync(blobUri);
    }
    if (!string.IsNullOrWhiteSpace(ad.ThumbnailURL))
    {
        Uri blobUri = new Uri(ad.ThumbnailURL);
        await DeleteAdBlobAsync(blobUri);
    }
}
private static async Task DeleteAdBlobAsync(Uri blobUri)
{
    string blobName = blobUri.Segments[blobUri.Segments.Length - 1];
    CloudBlockBlob blobToDelete = imagesBlobContainer.GetBlockBlobReference(blobName);
    await blobToDelete.DeleteAsync();
}

ContosoAdsWeb - Views\Ad\Index.cshtml dan Details.cshtml

File Index.cshtml menampilkan gambar mini dengan data iklan lainnya.

<img src="@Html.Raw(item.ThumbnailURL)" />

File Details.cshtml menampilkan gambar ukuran penuh.

<img src="@Html.Raw(Model.ImageURL)" />

ContosoAdsWeb - Views\Ad\Index.cshtml dan Details.cshtml

File Create.cshtml dan Edit.cshtml menentukan pengkodean formulir yang memungkinkan pengontrol untuk mendapatkan HttpPostedFileBase objek.

@using (Html.BeginForm("Create", "Ad", FormMethod.Post, new { enctype = "multipart/form-data" }))

Elemen <input> memberi tahu browser untuk menyediakan dialog pemilihan file.

<input type="file" name="imageFile" accept="image/*" class="form-control fileupload" />

ContosoAdsWorker - WorkerRole.cs - Metode OnStart

Lingkungan peran pekerja Azure memanggil metode OnStart di kelas ketika peran pekerja WorkerRole dimulai, dan memanggil metode ketika metode RunOnStart selesai.

Metode OnStart ini mendapatkan string koneksi database dari file .cscfg dan meneruskannya ke kelas Kerangka Kerja Entitas DbContext. Penyedia SQLClient digunakan secara default, sehingga penyedia tidak harus ditentukan.

var dbConnString = CloudConfigurationManager.GetSetting("ContosoAdsDbConnectionString");
db = new ContosoAdsContext(dbConnString);

Setelah itu, metode ini mendapatkan referensi ke akun penyimpanan dan membuat kontainer blob dan antrean jika mereka tidak ada. Kode untuk itu mirip dengan apa yang sudah Anda lihat dalam metode peran Application_Start web.

ContosoAdsWorker - WorkerRole.cs - Metode OnStart

Metode Run ini disebut ketika metode menyelesaikan pekerjaan OnStart inisialisasinya. Metode ini menjalankan loop tak terbatas yang mengawasi pesan antrean baru dan memprosesnya ketika mereka tiba.

public override void Run()
{
    CloudQueueMessage msg = null;

    while (true)
    {
        try
        {
            msg = this.imagesQueue.GetMessage();
            if (msg != null)
            {
                ProcessQueueMessage(msg);
            }
            else
            {
                System.Threading.Thread.Sleep(1000);
            }
        }
        catch (StorageException e)
        {
            if (msg != null && msg.DequeueCount > 5)
            {
                this.imagesQueue.DeleteMessage(msg);
            }
            System.Threading.Thread.Sleep(5000);
        }
    }
}

Setelah setiap iterasi loop, jika tidak ada pesan antrean yang ditemukan, program tidur sebentar. Hal ini mencegah peran pekerja menimbulkan biaya transaksi cpu dan penyimpanan yang berlebihan. Tim Penasihat Pelanggan Microsoft bercerita tentang pengembang yang lupa menyertakan ini, disebarkan untuk produksi, dan ditinggal berlibur. Ketika mereka kembali, biaya pengawasan mereka lebih dari liburan.

Terkadang konten pesan antrean menyebabkan kesalahan dalam pemrosesan. Ini disebut pesan racun, dan jika Anda baru saja mencatat kesalahan dan memulai ulang loop, Anda bisa tanpa henti mencoba memproses pesan itu. Oleh karena itu blok tangkapan mencakup pernyataan yang memeriksa untuk melihat berapa kali aplikasi telah mencoba memproses pesan saat ini, dan jika telah lebih dari 5 kali, pesan dihapus dari antrean.

ProcessQueueMessage dipanggil ketika pesan antrean ditemukan.

private void ProcessQueueMessage(CloudQueueMessage msg)
{
    var adId = int.Parse(msg.AsString);
    Ad ad = db.Ads.Find(adId);
    if (ad == null)
    {
        throw new Exception(String.Format("AdId {0} not found, can't create thumbnail", adId.ToString()));
    }

    CloudBlockBlob inputBlob = this.imagesBlobContainer.GetBlockBlobReference(ad.ImageURL);

    string thumbnailName = Path.GetFileNameWithoutExtension(inputBlob.Name) + "thumb.jpg";
    CloudBlockBlob outputBlob = this.imagesBlobContainer.GetBlockBlobReference(thumbnailName);

    using (Stream input = inputBlob.OpenRead())
    using (Stream output = outputBlob.OpenWrite())
    {
        ConvertImageToThumbnailJPG(input, output);
        outputBlob.Properties.ContentType = "image/jpeg";
    }

    ad.ThumbnailURL = outputBlob.Uri.ToString();
    db.SaveChanges();

    this.imagesQueue.DeleteMessage(msg);
}

Kode ini membaca database untuk mendapatkan URL gambar, mengonversi gambar menjadi gambar mini, menyimpan gambar mini dalam blob, memperbarui database dengan URL blob gambar mini, dan menghapus pesan antrean.

Catatan

Kode dalam metode ConvertImageToThumbnailJPG ini menggunakan kelas di system.drawing namespace untuk kesederhanaan. Namun, kelas di ruang nama ini dirancang untuk digunakan dengan Formulir Windows. Mereka tidak didukung untuk digunakan dalam layanan ASP.NET Windows. Untuk informasi selengkapnya tentang opsi pemrosesan gambar, lihat Pembuatan Gambar Dinamis dan Mengubah Ukuran Gambar Dalam.

Pemecahan Masalah

Jika ada sesuatu yang tidak berfungsi saat Anda mengikuti instruksi dalam tutorial ini, berikut adalah beberapa kesalahan umum dan cara mengatasinya.

ServiceRuntime.RoleEnvironmentException

Objek RoleEnvironment disediakan oleh Azure saat Anda menjalankan aplikasi di Azure atau saat Anda berjalan secara lokal menggunakan Azure Compute Emulator. Jika Anda mendapatkan kesalahan ini saat Anda berjalan secara lokal, pastikan Anda telah menetapkan proyek ContosoAdsCloudService sebagai proyek startup. Ini mengatur proyek yang akan dijalankan menggunakan Azure Compute Emulator.

Salah satu hal yang digunakan aplikasi untuk Azure RoleEnvironment adalah untuk mendapatkan nilai string koneksi yang disimpan dalam file .cscfg, jadi penyebab lain dari pengecualian ini adalah string koneksi yang hilang. Pastikan Anda membuat pengaturan StorageConnectionString untuk konfigurasi Awan dan Lokal di proyek ContosoAdsWeb, dan Anda membuat kedua string koneksi untuk kedua konfigurasi dalam proyek ContosoAdsWorker. Jika Anda melakukan pencarian Find All untuk StorageConnectionString di seluruh solusi, Anda akan melihatnya 9 kali dalam 6 file.

Tak bisa mengesampingkan port xxx. Port baru di bawah nilai minimum yang diperbolehkan 8080 untuk protokol http

Coba ubah nomor port yang digunakan oleh proyek web. Klik kanan proyek ContosoAdsWeb, lalu klik Properti. Klik tab Web, lalu ubah nomor port di pengaturan Url Proyek.

Untuk alternatif lain yang mungkin dapat mengatasi masalah, lihat bagian berikut ini.

Kesalahan lain saat berjalan secara lokal

Secara default, project layanan awan baru menggunakan Azure Compute Emulator express untuk mensimulasikan lingkungan Azure. Ini adalah versi ringan dari emulator komputasi lengkap, dan dalam beberapa kondisi emulator lengkap akan berfungsi ketika versi express tidak.

Untuk mengubah proyek agar menggunakan emulator lengkap, klik kanan proyek ContosoAdsCloudService, lalu klik Properti. Di jendela Properti klik tab Web, lalu klik tombol radio Gunakan Full Emulator.

Untuk menjalankan aplikasi dengan emulator lengkap, Anda harus membuka Visual Studio dengan hak istimewa administrator.

Langkah berikutnya

Aplikasi Contoso Ads sengaja disederhkan untuk tutorial memulai. Misalnya, itu tidak menerapkan injeksi dependensi atau repositori dan unit pola kerja, tidak menggunakan antarmuka untuk logging, tidak menggunakan EF Code First Migrations untuk mengelola perubahan model data atau EF Connection Resiliency untuk mengelola kesalahan jaringan sementara, dan sebagainya.

Berikut adalah beberapa aplikasi sampel layanan awan yang menunjukkan praktik pengkodean yang lebih nyata di dunia, yang tercantum dari yang kurang kompleks hingga lebih kompleks:

• PhluffyFotos. Mirip dalam konsep dengan Contoso Ads tetapi mengimplementasikan lebih banyak fitur dan lebih banyak praktik pengkodean dunia nyata.
• Aplikasi Multi-Tier Azure Cloud Service dengan Tabel, Antrean, dan Blob. Memperkenalkan tabel Azure Storage serta blob dan antrean. Berdasarkan versi Azure SDK yang lebih lama untuk .NET, akan memerlukan beberapa modifikasi untuk bekerja dengan versi saat ini.

Untuk informasi umum tentang mengembangkan untuk cloud, lihat Membangun Real-World Cloud Apps dengan Azure.

Untuk pengenalan video tentang praktik dan pola terbaik Azure Storage, lihat Microsoft Azure Storage – Apa itu Praktik dan Pola Baru dan Terbaik.

Untuk informasi selengkapnya, lihat sumber berikut ini:

• Cara Mengelola Layanan Awan
• Azure Storage
• Cara memilih penyedia layanan awan