Tutorial: Menyebarkan aplikasi ASP.NET ke Azure dengan Azure SQL Database

Azure App Service menyediakan layanan hosting web yang sangat dapat diskalakan dan dapat melakukan patch sendiri. Tutorial ini menunjukkan cara menyebarkan aplikasi ASP.NET berbasis data di App Service dan menyambungkannya ke Azure SQL Database. Setelah selesai, Anda memiliki aplikasi ASP.NET yang berjalan di Azure dan tersambung ke SQL Database.

Dalam tutorial ini, Anda akan mempelajari cara:

• Membuat database di Azure SQL Database
• Menyambungkan aplikasi ASP.NET ke SQL Database
• Menyebarkan aplikasi ke Azure
• Memperbarui model data dan menyebarkan ulang aplikasi
• Mengalirkan log dari Azure ke terminal Anda

Jika Anda tidak memiliki Langganan Azure, buat Akun gratis Azure sebelum memulai.

Prasyarat

Untuk menyelesaikan tutorial ini:

Instal Visual Studio 2022 dengan ASP.NET dan pengembangan web serta beban kerja pengembangan Azure.

Jika Anda sudah menginstal Visual Studio, tambahkan beban kerja di Visual Studio dengan mengklik Alat>Dapatkan Alat dan Fitur.

Unduh sampel

1. Unduh proyek sampel.

2. Ekstrak (unzip) file dotnet-sqldb-tutorial-master.zip.

Sampel proyek berisi aplikasi buat, baca, pembaruan & hapus (CRUD) ASP.NET MVC dasar menggunakan Kode Kerangka Kerja Entitas Pertama.

Menjalankan aplikasi

1. Buka file dotnet-sqldb-tutorial-master/DotNetAppSqlDb.sln di Visual Studio.

2. Ketik F5 untuk menjalankan aplikasi. Aplikasi ini ditampilkan di browser default Anda.

   Catatan

   Jika Anda hanya menginstal Visual Studio dan prasyarat, Anda mungkin harus menginstal paket yang hilang melalui NuGet.

3. Pilih tautan Buat Baru dan buat beberapa item tugas.

   

4. Uji tautan Edit, Detail, dan Hapus.

Aplikasi ini menggunakan konteks database untuk tersambung dengan database. Dalam contoh ini, konteks database menggunakan string koneksi bernama MyDbConnection. String koneksi diatur dalam file Web.config dan direferensikan dalam file Models/MyDatabaseContext.cs. Nama string koneksi digunakan nanti dalam tutorial untuk menyambungkan aplikasi Azure ke Azure SQL Database.

Terbitkan ASP.NET ke Azure

1. Di Penjelajah Solusi, klik kanan proyek DotNetAppSqlDb Anda dan pilih Terbitkan.

   

2. Pilih Azure sebagai target Anda dan klik Berikutnya.

3. Pastikan bahwa Azure App Service (Windows) dipilih dan klik Berikutnya.

Masuk dan tambahkan aplikasi

1. Dalam dialog Terbitkan, klik Masuk.

2. Masuk ke langganan Azure Anda. Jika Anda sudah masuk ke akun Microsoft, pastikan akun tersebut memegang langganan Azure Anda. Jika akun Microsoft yang digunakan untuk masuk tidak memgang langganan Azure Anda, klik akun tersebut untuk menambahkan akun yang benar.

3. Di panel Instans App Service, klik +.

   

Konfigurasikan nama aplikasi web

Anda dapat menyimpan nama aplikasi web yang dihasilkan, atau mengubahnya ke nama unik lain (karakter yang valid adalah a-z, 0-9, dan -). Nama aplikasi web digunakan sebagai bagian dari URL default untuk aplikasi Anda (<app_name>.azurewebsites.net, di mana <app_name> adalah nama aplikasi web Anda). Nama aplikasi web harus unik di semua aplikasi di Azure.

Catatan

Jangan pilih Buat dulu.

Buat grup sumber daya

Grup sumber daya Azure adalah kontainer logis tempat sumber daya Azure seperti aplikasi web, database, dan akun penyimpanan disebarkan dan dikelola. Misalnya, Anda dapat memilih untuk menghapus seluruh grup sumber daya dalam satu langkah sederhana nanti.

1. Di samping Grup Sumber Daya, klik Baru.

   

2. Beri nama grup sumber daya myResourceGroup.

Membuat Paket App Service

Rencana App Service menentukan lokasi, ukuran, dan fitur farm server web yang menghosting aplikasi Anda. Anda dapat menghemat uang saat menghosting beberapa aplikasi dengan mengonfigurasi aplikasi web untuk berbagi satu paket Azure App Service.

Paket Azure App Service:

• Wilayah (misalnya: Eropa Utara, AS Timur, atau Asia Tenggara)
• Ukuran instans (kecil, sedang, atau besar)
• Jumlah skala (1 hingga 20 instans)
• SKU (Gratis, Bersama, Dasar, Standar, atau Premium)

1. Di samping Paket Hosting, klik Baru.

2. Dalam dialog Konfigurasi Paket Layanan Aplikasi, konfigurasikan paket App Service yang baru dengan pengaturan berikut dan klik OK:

   Pengaturan	Nilai yang disarankan	Untuk informasi lebih lanjut
   Paket App Service	myAppServicePlan	Paket App Service
   Location	Eropa Barat	Wilayah Azure
   Ukuran	Gratis	Tingkat harga

   

3. Klik Buat dan tunggu hingga sumber daya Azure dibuat.

4. Dialog Terbitkan menampilkan sumber daya yang telah Anda konfigurasi. Klik Selesai.

   

Buat server dan database

Sebelum membuat database, Anda memerlukan server SQL logis. Server SQL logis adalah konstruksi logis yang berisi sekelompok database yang dikelola sebagai grup.

1. Dalam dialog Terbitkan, gulir ke bawah ke bagian Dependensi Layanan. Di samping Database SQL Server, klik Konfigurasikan.

   Catatan

   Pastikan untuk mengonfigurasi SQL Database dari halaman Terbitkan, bukan halaman Layanan Terhubung.

   

2. Pilih Azure SQL Database dan klik Berikutnya.

3. Dalam dialog Konfigurasikan Azure SQL Database, klik +.

4. Di samping Server database,klik Baru.

   Nama server digunakan sebagai bagian dari URL default untuk server Anda, <server_name>.database.windows.net. Nama ini harus unik di semua server di Azure SQL. Ubah nama server menjadi nilai yang Anda inginkan.

5. Tambahkan nama pengguna dan kata sandi administrator. Untuk persyaratan kompleksitas kata sandi, lihat Kebijakan Kata Sandi.

   Ingat nama pengguna dan kata sandi ini. Nanti Anda membutuhkannya untuk mengelola server.

   

   Penting

   Meskipun kata sandi Anda dalam string koneksi disamarkan (di Visual Studio dan juga di App Service), fakta bahwa kata sandi tersebut disimpan di suatu tempat menambah permukaan serangan aplikasi Anda. App Service dapat menggunakan identitas layanan terkelola untuk menghilangkan risiko ini dengan menghapus kebutuhan untuk menyimpan rahasia dalam kode atau konfigurasi aplikasi Anda. Untuk informasi selengkapnya, lihat Langkah berikutnya.

6. Klik OK.

7. Dalam dialog Azure SQL Database, pertahankan Nama Database default yang dihasilkan. Pilih Buat dan tunggu hingga sumber daya database dibuat.

   

Konfigurasikan koneksi database

1. Ketika wizard selesai membuat sumber daya database, klik Berikutnya.

2. Dalam Nama string koneksi Database, ketik MyDbConnection. Nama ini harus cocok dengan string koneksi yang direferensikan dalam Models/MyDatabaseContext.cs.

3. Dalam Nama pengguna koneksi database dan Kata sandi koneksi database, ketik nama pengguna dan kata sandi administrator yang Anda gunakan di Buat server.

4. Pastikan Pengaturan Aplikasi Azure dipilih dan klik Selesai.

   Catatan

   Sebaliknya, jika Anda melihat File rahasia pengguna lokal, Anda harus mengonfigurasi SQL Database dari halaman Layanan Terhubung, bukan halaman Terbitkan.

   

5. Tunggu hingga wizard konfigurasi selesai dan klik Tutup.

Sebarkan aplikasi ASP.NET Anda

1. Pada tab Terbitkan, gulir kembali ke bagian paling atas dan klik Terbitkan. Setelah aplikasi ASP.NET Anda disebarkan ke Azure. Browser default Anda diluncurkan dengan URL ke aplikasi yang disebarkan.

2. Tambahkan beberapa item tugas.

   

   Selamat! Aplikasi berbasis data ASP.NET Anda dijalankan langsung di Azure App Service.

Akses database secara lokal

Visual Studio memungkinkan Anda menjelajahi dan mengelola database baru di Azure dengan mudah di SQL Server Object Explorer. Database baru sudah membuka firewall-nya ke aplikasi App Service yang Anda buat. Tetapi untuk mengaksesnya dari komputer lokal Anda (seperti dari Visual Studio), Anda harus membuka firewall untuk alamat IP publik mesin lokal Anda. Jika penyedia layanan internet Anda mengubah alamat IP publik, Anda perlu mengonfigurasi ulang firewall untuk mengakses database Azure lagi.

Buat koneksi database

1. Dari menu Tampilan, pilih SQL Server Object Explorer.

2. Di bagian atas SQL Server Object Explorer, klik tombol Tambahkan SQL Server.

Konfigurasikan koneksi database

1. Dalam dialog Sambungkan, perluas node Azure. Semua instans SQL Database Anda di Azure tercantum di sini.

2. Pilih database yang Anda buat sebelumnya. Sambungan yang Anda buat sebelumnya secara otomatis terisi di bagian bawah.

3. Ketik kata sandi administrator database yang Anda buat sebelumnya dan klik Sambungkan.

   

Izinkan sambungan klien dari komputer Anda

Dialog Buat aturan firewall baru dibuka. Secara default, server hanya mengizinkan koneksi ke databasenya dari layanan Azure, seperti aplikasi Azure Anda. Untuk menyambungkan ke database Anda dari luar Azure, buat aturan firewall di tingkat server. Aturan firewall mengizinkan alamat IP publik komputer lokal Anda.

Dialog sudah diisi dengan alamat IP publik komputer Anda.

1. Pastikan bahwa Tambahkan IP klien saya dipilih dan klik OK.

   

   Setelah Visual Studio selesai membuat pengaturan firewall untuk instans SQL Database Anda, koneksi Anda muncul di SQL Server Object Explorer.

   Di sini, Anda bisa melakukan operasi database yang paling umum, seperti menjalankan kueri, membuat tampilan dan prosedur tersimpan, dan lainnya.

2. Perluas koneksi Anda >Database><database Anda>>Tabel. Klik kanan pada tabel Todoes dan pilih Tampilkan Data.

   

Perbarui aplikasi dengan Migrasi Pertama Kode

Anda dapat menggunakan alat yang sudah tak asing lagi di Visual Studio untuk memperbarui database dan aplikasi Anda di Azure. Dalam langkah ini, Anda menggunakan Migrasi Pertama Kode in Kerangka Kerja Entitas untuk membuat perubahan pada skema database Anda dan menerbitkannya ke Azure.

Untuk informasi selengkapnya tentang menggunakan Migrasi Pertama Kode Kerangka Kerja Entitas, lihat Memulai Dengan Kode Pertama Kerangka Kerja Entitas 6 menggunakan MVC 5.

Memperbarui model data Anda

Buka Model\Todo.cs di editor kode. Tambahkan properti berikut ke kelas ToDo:

public bool Done { get; set; }

Jalankan Migrasi Pertama Kode secara lokal

Jalankan beberapa perintah untuk membuat pembaruan pada database lokal Anda.

1. Dari menu Alat, klik Manajer Paket NuGet >Konsol Manajer Paket.

2. Di jendela Konsol Manajer Paket, aktifkan Migrasi Pertama Kode:

   Enable-Migrations
   

3. Tambahkan migrasi:

   Add-Migration AddProperty
   

4. Perbarui database lokal:

   Update-Database
   

5. Ketik Ctrl+F5 untuk menjalankan aplikasi. Uji pengeditan, detail, dan buat tautan.

Jika aplikasi dimuat tanpa kesalahan, maka Migrasi Pertama Kode telah berhasil. Namun, halaman Anda masih terlihat sama karena logika aplikasi Anda belum menggunakan properti baru ini.

Menggunakan properti baru

Buat beberapa perubahan pada kode Anda untuk menggunakan properti Done. Untuk mempermudah tutorial ini, Anda hanya akan mengubah tampilan Index dan Create untuk melihat performa properti.

1. Buka Controllers\TodosController.cs.

2. Temukan metode Create() pada baris 52 dan tambahkan Done ke daftar properti di atribut Bind. Setelah selesai, tanda tangan metode Create() Anda terlihat seperti kode berikut:

   public ActionResult Create([Bind(Include = "Description,CreatedDate,Done")] Todo todo)
   

3. Buka Views\Todos\Create.cshtml.

4. Dalam kode Razor, Anda akan melihat elemen <div class="form-group"> yang menggunakan model.Description, dan kemudian elemen <div class="form-group"> lain yang menggunakan model.CreatedDate. Langsung setelah kedua elemen ini, tambahkan elemen <div class="form-group"> lain yang menggunakan model.Done:

   <div class="form-group">
       @Html.LabelFor(model => model.Done, htmlAttributes: new { @class = "control-label col-md-2" })
       <div class="col-md-10">
           <div class="checkbox">
               @Html.EditorFor(model => model.Done)
               @Html.ValidationMessageFor(model => model.Done, "", new { @class = "text-danger" })
           </div>
       </div>
   </div>
   

5. Buka Views\Todos\Index.cshtml.

6. Cari elemen <th></th> yang kosong. Tepat di atas elemen ini, tambahkan kode Razor berikut:

   <th>
       @Html.DisplayNameFor(model => model.Done)
   </th>
   

7. Temukan elemen <td> yang berisi metode pembantu Html.ActionLink(). Di atas <td> ini, tambahkan elemen <td> lain dengan kode Razor berikut:

   <td>
       @Html.DisplayFor(modelItem => item.Done)
   </td>
   

   Hanya itu yang Anda butuhkan untuk melihat perubahan dalam tampilan Index dan Create.

8. Ketik Ctrl+F5 untuk menjalankan aplikasi.

Sekarang Anda dapat menambahkan item yang harus dilakukan dan mencentang Selesai. Maka dari itu, item tugas akan muncul di beranda Anda sebagai item yang sudah selesai. Ingat bahwa tampilan Edit tidak menampilkan bidang Done, karena Anda tidak mengubah tampilan Edit.

Aktifkan Migrasi Pertama Kode di Azure

Sekarang setelah perubahan kode Anda berfungsi, termasuk migrasi database, Anda menerbitkannya ke aplikasi Azure dan juga memperbarui SQL Database Anda dengan Migrasi Pertama Kode.

1. Sama seperti sebelumnya, klik kanan proyek Anda dan pilih Terbitkan.

2. Klik Tindakan lainnya>Edit untuk membuka pengaturan terbitkan.

   

3. Di menu drop-down MyDatabaseContext, pilih koneksi database untuk Azure SQL Database Anda.

4. Pilih Jalankan Migrasi Pertama Kode (berjalan saat aplikasi dimulai), lalu klik Simpan.

   

Publikasikan perubahan Anda

Sekarang setelah Anda mengaktifkan Migrasi Pertama Kode di aplikasi Azure Anda, publikasikan perubahan kode Anda.

1. Di halaman terbitkan, klik Terbitkan.

2. Coba tambahkan kembali item yang harus dilakukan dan pilih Selesai, dan item tersebut akan muncul di beranda Anda sebagai item yang selesai.

   

Semua item yang harus dilakukan yang ada masih ditampilkan. Saat Anda menerbitkan ulang aplikasi ASP.NET, data yang ada di SQL Database Anda tidak hilang. Selain itu, Migrasi Pertama Kode hanya mengubah skema data dan membiarkan data Anda yang ada tetap utuh.

Streaming log aplikasi

Anda dapat melakukan streaming pesan pelacakan langsung dari aplikasi Azure ke Visual Studio.

Buka Controllers\TodosController.cs.

Setiap tindakan dimulai dengan metode Trace.WriteLine(). Kode ini ditambahkan untuk menunjukkan kepada Anda cara menambahkan pesan pelacakan ke aplikasi Azure Anda.

Aktifkan streaming log

1. Pada halaman penerbitan, gulir ke bawah ke bagian Hosting.

2. Di sudut kanan, klik ...>Lihat Log Streaming.

   

   Log sekarang di-streaming ke jendela Output.

   

   Namun, Anda belum melihat pesan pelacakan apa pun. Itu karena ketika Anda pertama kali memilih Tampilkan Log Streaming, aplikasi Azure Anda mengatur tingkat pelacakan menjadi Error, yang hanya mencatat peristiwa kesalahan (dengan metode Trace.TraceError()).

Ubah tingkat pelacakan

1. Untuk mengubah tingkat pelacakan guna menghasilkan pesan pelacakan lainnya, kembali ke halaman penerbitan.

2. Pada bagian Hosting, klik ...>Buka di portal Microsoft Azure.

3. Di halaman manajemen portal untuk aplikasi Anda, dari menu kiri, pilih Log App Service.

4. Di bawah Pembuatan Log Aplikasi (Sistem File), pilih Verbose di Tingkat. Klik Simpan.

   Tip

   Anda dapat bereksperimen dengan tingkat pelacakan yang berbeda untuk melihat jenis pesan apa yang ditampilkan untuk setiap tingkat. Misalnya, tingkat Informasi mencakup semua log yang dibuat oleh Trace.TraceInformation(), Trace.TraceWarning(), dan Trace.TraceError(), tetapi tidak mencakup log yang dibuat oleh Trace.WriteLine().

5. Di browser Anda, navigasikan ke aplikasi Anda lagi di http:// nama> aplikasi Anda.azurewebsites.net, lalu coba klik di sekitar aplikasi daftar< tugas di Azure. Pesan pelacakan sekarang di-streaming ke jendela Output di Visual Studio.

   Application: 2017-04-06T23:30:41  PID[8132] Verbose     GET /Todos/Index
   Application: 2017-04-06T23:30:43  PID[8132] Verbose     GET /Todos/Create
   Application: 2017-04-06T23:30:53  PID[8132] Verbose     POST /Todos/Create
   Application: 2017-04-06T23:30:54  PID[8132] Verbose     GET /Todos/Index
   

Hentikan streaming log

Untuk menghentikan layanan streaming log, klik tombol Hentikan pemantauan di jendela Output.

Membersihkan sumber daya

Di langkah-langkah sebelumnya, Anda membuat sumber daya Azure dalam grup sumber daya. Jika Anda tidak berharap membutuhkan sumber daya ini di masa mendatang, Anda dapat menghapusnya dengan menghapus grup sumber daya.

1. Dari halaman Gambaran umum aplikasi web di portal Microsoft Azure, pilih tautan myResourceGroup di bawah Grup sumber daya.
2. Di halaman grup sumber daya, pastikan sumber daya yang tercantum adalah sumber daya yang ingin Anda hapus.
3. Pilih Hapus grup sumber daya, ketik myResourceGroup di kotak teks, lalu pilih Hapus.
4. Konfirmasi lagi dengan memilih Hapus.

Langkah berikutnya

Dalam tutorial ini, Anda mempelajari cara:

• Membuat database di Azure SQL Database
• Menyambungkan aplikasi ASP.NET ke SQL Database
• Menyebarkan aplikasi ke Azure
• Memperbarui model data dan menyebarkan ulang aplikasi
• Mengalirkan log dari Azure ke terminal Anda

Lanjutkan ke tutorial berikutnya untuk mempelajari cara meningkatkan keamanan Azure SQL Database koneksi Anda dengan mudah.

Tutorial: Menghubungkan ke SQL Database dari App Service tanpa rahasia menggunakan identitas terkelola

Sumber daya lainnya:

Mengonfigurasi ASP.NET anda

Ingin mengoptimalkan dan menghemat pengeluaran cloud Anda?

Mulai menganalisis biaya dengan Cost Management