Mulai cepat: Menerapkan aplikasi web ASP.NET
Dalam mulai cepat ini, Anda akan mempelajari cara membuat dan menggunakan aplikasi web ASP.NET pertama Anda untuk Azure App Service. App Service mendukung berbagai versi aplikasi .NET, dan menyediakan layanan hosting web yang sangat dapat diskalakan dan melakukan patch sendiri. Aplikasi web ASP.NET bersifat lintas platform dan dapat dihosting di Linux atau Windows. Setelah selesai, Anda akan memiliki grup sumber daya Azure yang terdiri dari paket hosting Layanan Aplikasi dan Layanan Aplikasi dengan aplikasi web yang diterapkan.
Prasyarat
- Akun Azure dengan langganan aktif. Buat akun gratis.
- Visual Studio 2022 dengan beban kerja ASP.NET serta pengembangan web.
Jika Anda telah memasang Visual Studio 2022:
- Pasang pembaruan terbaru di Visual Studio dengan memilih Bantuan>Periksa Pembaruan.
- Tambahkan beban kerja dengan memilih Alat>Dapatkan Alat dan Fitur.
- Akun Azure dengan langganan aktif. Membuat akun secara gratis.
- Visual Studio Code.
- Ekstensi Azure Tools.
- Akun Azure dengan langganan aktif. Membuat akun secara gratis.
- Azure CLI.
- SDK .NET (termasuk runtime dan CLI).
- Akun Azure dengan langganan aktif. Buat akun gratis.
- Azure PowerShell
- SDK .NET (termasuk runtime dan CLI).
- Akun Azure dengan langganan aktif. Buat akun gratis.
- Akun GitHub Membuat akun secara gratis.
Membuat aplikasi web ASP.NET
Buka Visual Studio, lalu pilih Buat proyek baru.
Di Buat proyek baru, cari, dan pilih ASP.NET Core Web App, lalu pilih Berikutnya.
Di Konfigurasikan proyek baru Anda, beri nama aplikasi MyFirstAzureWebApp, lalu pilih Berikutnya.
Pilih .NET Core 6.0 (Dukungan jangka panjang).
Pastikan Jenis Autentikasi diatur ke Tidak Ada. Pilih Buat.
Di menu Visual Studio, pilih Debug>Mulai Tanpa Menelusuri Kesalahan untuk menjalankan aplikasi web secara lokal.
Buat folder baru dengan nama MyFirstAzureWebApp, dan buka di Visual Studio Code.
mkdir MyFirstAzureWebApp code MyFirstAzureWebAppDi Visual Studio Code, buka jendela Terminal dengan mengetik
Ctrl+`.Di terminal Visual Studio Code, buat aplikasi web .NET baru menggunakan perintah
dotnet new webapp.dotnet new webapp -f net6.0Dari Terminal di Visual Studio Code, jalankan aplikasi secara lokal menggunakan perintah
dotnet run.dotnet run --urls=https://localhost:5001/Buka browser web, dan navigasi ke aplikasi di
https://localhost:5001.Anda akan melihat template aplikasi web ASP.NET Core 6.0 tampil di halaman tersebut.
Buka jendela terminal pada komputer Anda ke direktori kerja. Buat aplikasi web .NET baru menggunakan perintah
dotnet new webapp, lalu ubah direktori ke aplikasi yang baru dibuat.dotnet new webapp -n MyFirstAzureWebApp --framework net6.0 cd MyFirstAzureWebAppDari sesi terminal yang sama, jalankan aplikasi secara lokal menggunakan perintah
dotnet run.dotnet run --urls=https://localhost:5001/Buka browser web, dan navigasi ke aplikasi di
https://localhost:5001.Anda akan melihat template aplikasi web ASP.NET Core 6.0 tampil di halaman tersebut.
Dalam langkah ini kita akan membuat fork proyek demo yang akan disebarkan.
- Buka aplikasi sampel .NET 6.0.
- Pilih tombol Fork di sisi kanan atas di halaman GitHub.
- Pilih Pemilik dan biarkan Nama repositori default.
- Pilih Buat fork.
Publikasikan aplikasi web Anda
Untuk memublikasikan aplikasi web, Anda harus terlebih dahulu membuat dan mengonfigurasi App Service baru tempat Anda dapat mempublikasikan aplikasi Anda.
Sebagai bagian dari menyiapkan App Service, Anda akan membuat:
- Grup sumber daya baru untuk memuat semua sumber daya Azure untuk layanan ini.
- Paket Hosting baru yang menentukan lokasi, ukuran, dan fitur farm server web yang menghosting aplikasi Anda.
Ikuti langkah-langkah berikut untuk membuat App Service dan menerbitkan aplikasi web Anda:
Di Penjelajah Solusi, klik kanan proyek MyFirstAzureWebApp dan pilih Terbitkan.
Di Terbitkan, pilih Azure, lalu klik Berikutnya.
Pilih Target tertentu, baik Azure App Service (Linux) atau Azure App Service (Windows) . Kemudian, pilih Berikutnya.
Penting
Saat menargetkan ASP.NET Framework 4.8, gunakan Azure App Service (Windows) .
Opsi Anda bergantung pada apakah Anda sudah masuk ke Azure dan apakah Anda memiliki akun Visual Studio yang ditautkan ke akun Azure. Pilih Tambahkan akun atau Masuk untuk masuk ke langganan Azure Anda. Jika Anda sudah masuk, pilih akun yang Anda inginkan.
Di sebelah kanan instans App Service, pilih + .
Untuk Langganan, terima langganan yang tercantum atau pilih langganan baru dari daftar gulir.
Untuk Grup sumber daya, pilih Baru. Di Nama grup sumber daya baru, masukkan myResourceGroup dan pilih Oke.
Untuk Paket Hosting, pilih Baru.
Di dialog Paket Hosting: Buat baru, masukkan nilai yang ditentukan dalam tabel berikut ini:
Pengaturan Nilai yang disarankan Deskripsi Paket Hosting MyFirstAzureWebAppPlan Nama paket App Service. Lokasi Eropa Barat Pusat data tempat aplikasi web dihosting. Ukuran Gratis Tingkat harga yang menentukan fitur hosting. Di Nama, masukkan nama aplikasi unik yang hanya menyertakan karakter yang valid yaitu
a-z,A-Z,0-9, dan-. Anda dapat menerima nama unik yang dihasilkan secara otomatis. URL aplikasi web adalahhttp://<app-name>.azurewebsites.net, dengan<app-name>merupakan nama aplikasi Anda.Pilih Buat untuk membuat sumber daya Azure.
Setelah wizard selesai, sumber daya Azure dibuat untuk Anda dan Anda siap untuk menerbitkan proyek ASP.NET Core Anda.
Dalam dialog Terbitkan, pastikan aplikasi App Service baru Anda dipilih di instans App Service, lalu pilih Selesai. Visual Studio membuat profil publikasi untuk Anda untuk Azure App Service Aplikasi yang dipilih.
Di halaman Terbitkan, pilih Terbitkan. Jika Anda melihat pesan peringatan, pilih Lanjutkan.
Visual Studio membangun, mengemas, dan menerbitkan aplikasi ke Azure, lalu meluncurkan aplikasi di browser default.
Anda akan melihat aplikasi web ASP.NET Core 6.0 di halaman tersebut.
Di Visual Studio Code, buka Palet Perintah, Ctrl+Shift+P.
Cari dan pilih "Azure App Service: Terapkan ke Aplikasi Web".
Tanggapi perintah sebagai berikut:
- Pilih MyFirstAzureWebApp sebagai folder yang akan digunakan.
- Pilih Tambahkan Konfigurasi saat diminta.
- Jika diminta, masuk ke akun Azure Anda.
- Pilih Langganan Anda.
- Pilih Buat Aplikasi Web baru... Tingkat lanjut.
- Untuk Masukkan nama unik global, gunakan nama yang unik di seluruh Azure (karakter yang valid adalah
a-z,0-9, dan-). Pola yang baik adalah menggunakan kombinasi nama perusahaan dan pengidentifikasi aplikasi Anda. - Pilih Buat grup sumber daya baru dan berikan nama seperti
myResourceGroup. - Ketika diminta untuk Memilih tumpukan runtime:
- Untuk .NET 6.0, pilih .NET 6
- Untuk .NET Framework 4.8, pilih ASP.NET V4.8
- Pilih sistem operasi (Windows atau Linux).
- Untuk .NET Framework 4.8, Windows akan dipilih secara implisit.
- Pilih lokasi di dekat Anda.
- Pilih Buat paket App Service baru, beri nama, dan pilih tingkat hargaF1 Gratis.
- Pilih Lewati untuk saat ini untuk sumber daya Application Insights.
Di popup Selalu sebarkan ruang kerja "MyFirstAzureWebApp" ke <app-name>", pilih Ya agar Visual Studio Code disebarkan ke aplikasi App Service yang sama setiap kali Anda berada di ruang kerja itu.
Saat penerbitan selesai, pilih Telusuri Situs Web pada pemberitahuan dan pilih Buka saat diminta.
Anda akan melihat aplikasi web ASP.NET Core 6.0 di halaman tersebut.
Masuk ke akun Azure Anda dengan menggunakan
az loginperintah dan mengikuti prompt:az loginTerapkan kode di direktori MyFirstAzureWebApp lokal Anda menggunakan perintah
az webapp up:az webapp up --sku F1 --name <app-name> --os-type <os>- Jika perintah
aztidak dikenali, pastikan Anda telah menginstal Azure CLI seperti yang dijelaskan di Prasyarat. - Ganti
<app-name>dengan nama yang unik di seluruh Azure (<app-name>). Pola yang baik adalah menggunakan kombinasi nama perusahaan Anda dan pengidentifikasi aplikasi. - Argumen
--sku F1membuat aplikasi web pada tingkat hargaGratis. Hapus argumen ini untuk menggunakan tingkat premium yang lebih cepat, yang akan dikenakan biaya per jam. - Ganti
<os>denganlinuxatauwindows. Anda harus menggunakanwindowssaat menargetkan ASP.NET Framework 4.8. - Anda dapat secara opsional menyertakan argumen
--location <location-name>dengan<location-name>sebagai wilayah Azure yang tersedia. Anda dapat mengambil daftar wilayah yang diizinkan untuk akun Azure Anda dengan menjalankan perintahaz account list-locations.
Perintah mungkin memerlukan waktu beberapa menit untuk diselesaikan. Saat berjalan, muncul pesan tentang membuat grup sumber daya, paket App Service, dan aplikasi hosting, mengonfigurasi pembuatan log, lalu melakukan penyebaran ZIP. Kemudian akan menampilkan pesan dengan URL aplikasi:
You can launch the app at http://<app-name>.azurewebsites.net- Jika perintah
Buka browser web dan navigasi ke URL:
Anda akan melihat aplikasi web ASP.NET Core 6.0 di halaman tersebut.
Catatan
Azure PowerShell direkomendasikan untuk membuat aplikasi di platform hosting Windows. Untuk membuat aplikasi di Linux, gunakan alat yang berbeda, seperti Azure CLI.
Masuk ke akun Azure Anda dengan menggunakan
Connect-AzAccountperintah dan mengikuti prompt:Connect-AzAccount
Buat aplikasi fungsi dengan menggunakan perintah New-AzFunctionApp.
New-AzWebApp -Name <app-name> -Location westeurope- Ganti
<app-name>dengan nama yang unik di seluruh Azure (karakter yang valid adalaha-z,0-9, dan-). Kombinasi nama perusahaan Anda dan pengidentifikasi aplikasi adalah pola yang baik. - Anda dapat secara opsional menyertakan argumen
-Location <location-name>dengan<location-name>sebagai wilayah Azure yang tersedia. Anda dapat mengambil daftar wilayah yang diizinkan untuk akun Azure Anda dengan menjalankan perintahGet-AzLocation.
Perintah mungkin memerlukan waktu beberapa menit untuk diselesaikan. Saat berjalan, ia membuat grup sumber daya, paket Layanan Aplikasi, dan sumber daya Layanan Aplikasi.
- Ganti
Dari folder root aplikasi, siapkan aplikasi MyFirstAzureWebApp lokal Anda untuk penyebaran menggunakan
dotnet publishperintah:dotnet publish --configuration ReleaseUbah ke direktori rilis dan buat file zip dari konten:
cd bin\Release\net6.0\publish Compress-Archive -Path * -DestinationPath deploy.zipPublikasikan file zip ke aplikasi Azure menggunakan perintah Publish-AzWebApp:
Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -ForceCatatan
-ArchivePathmembutuhkan jalur penuh dari file zip.Buka browser web dan navigasi ke URL:
Anda akan melihat aplikasi web ASP.NET Core 6.0 di halaman tersebut.
Ketik layanan aplikasi dalam pencarian. Di bagian Layanan, pilih App Services.
Di halaman App Services, pilih + Buat.
Di tab Dasar-dasar, di bawah Detail proyek, pastikan langganan yang benar dipilih, lalu pilih grup sumber daya Buat baru. Ketik myResourceGroup untuk namanya.
Di bawah Detail instans:
- Di bagian Nama, ketik nama yang unik secara global untuk aplikasi web Anda.
- Di bagian Terbitkan, pilih Kode.
- Di bagian Tumpukan runtime pilih .NET 6 (LTS).
- Pilih Sistem Operasi dan Wilayah tempat aplikasi Anda ingin ditayangkan.
Di bawah Paket Azure App Service, pilih Buat baru Paket Azure App Service. Ketik myAppServicePlan untuk nama. Untuk mengubah ke tingkat Gratis, pilih Ubah ukuran, pilih tab Pengembangan/Pengujian, pilih F1, dan pilih tombol Terapkan di bagian bawah halaman.
Pilih tombol Berikutnya: Penyebaran > di bagian bawah halaman.
Di tab Penyebaran, di bagian Pengaturan GitHub Actions pastikan Penyebaran berkelanjutanAktif.
Di bawah Detail GitHub Actions, autentikasi dengan akun GitHub Anda dan pilih opsi berikut:
- Untuk Organisasi pilih organisasi tempat Anda telah membuat proyek demo.
- Untuk Repositori pilih proyek dotnetcore-docs-hello-world.
- Untuk Cabang pilih master.
Pilih tombol Tinjau + buat di bagian bawah halaman.
Setelah validasi berjalan, pilih tombol Create di bagian bawah halaman.
Setelah penyebaran selesai, pilih Buka sumber daya.
Lakukan penelusuran ke aplikasi yang disebarkan menggunakan browser web Anda di URL
http://<app-name>.azurewebsites.net.
Memperbarui aplikasi dan terapkan ulang
Ikuti langkah-langkah berikut untuk memperbarui dan menerapkan ulang aplikasi web Anda:
Di Penjelajah Solusi, di bawah proyek Anda, buka Index.cshtml.
Ganti elemen pertama
<div>dengan kode berikut:<div class="jumbotron"> <h1>.NET 💜 Azure</h1> <p class="lead">Example .NET app to Azure App Service.</p> </div>Simpan perubahan Anda.
Untuk menerapkan ulang ke Azure, klik kanan proyek MyFirstAzureWebApp di Penjelajah Solusi dan pilih Terbitkan.
Di halaman ringkasan Terbitkan, pilih Terbitkan.
Saat penerbitan selesai, Visual Studio akan meluncurkan browser ke URL aplikasi web.
Anda akan melihat aplikasi web ASP.NET Core 6.0 yang telah diperbarui di halaman tersebut.
Buka Index.cshtml.
Ganti elemen pertama
<div>dengan kode berikut:<div class="jumbotron"> <h1>.NET 💜 Azure</h1> <p class="lead">Example .NET app to Azure App Service.</p> </div>Simpan perubahan Anda.
Di Visual Studio Code, buka Palet Perintah, Ctrl+Shift+P.
Cari dan pilih "Azure App Service: Terapkan ke Aplikasi Web".
Pilih Terapkan saat diminta.
Saat penerbitan selesai, pilih Telusuri Situs Web pada pemberitahuan dan pilih Buka saat diminta.
Anda akan melihat aplikasi web ASP.NET Core 6.0 yang telah diperbarui di halaman tersebut.
Di direktori lokal, buka file Index.cshtml. Ganti elemen pertama <div>:
<div class="jumbotron">
<h1>.NET 💜 Azure</h1>
<p class="lead">Example .NET app to Azure App Service.</p>
</div>
Simpan perubahan Anda, lalu terapkan ulang aplikasi menggunakan perintah az webapp up lagi:
ASP.NET Core 6.0 bersifat lintas platform, berdasarkan penyebaran Anda sebelumnya gantilah <os> baik dengan linux atau windows.
az webapp up --os-type <os>
Perintah ini menggunakan nilai yang disimpan cache secara lokal dalam file .azure/config, termasuk nama aplikasi, grup sumber daya, dan paket App Service.
Setelah penyebaran selesai, beralih kembali ke jendela browser yang dibuka di langkah Telusuri aplikasi, dan tekan refresh.
Anda akan melihat aplikasi web ASP.NET Core 6.0 yang telah diperbarui di halaman tersebut.
Di direktori lokal, buka file Index.cshtml. Ganti elemen pertama
<div>:<div class="jumbotron"> <h1>.NET 💜 Azure</h1> <p class="lead">Example .NET app to Azure App Service.</p> </div>Dari folder root aplikasi, siapkan aplikasi MyFirstAzureWebApp lokal Anda untuk penyebaran menggunakan
dotnet publishperintah:dotnet publish --configuration ReleaseUbah ke direktori rilis dan buat file zip dari konten:
cd bin\Release\net6.0\publish Compress-Archive -Path * -DestinationPath deploy.zipPublikasikan file zip ke aplikasi Azure menggunakan perintah Publish-AzWebApp:
Publish-AzWebApp -ResourceGroupName myResourceGroup -Name <app-name> -ArchivePath (Get-Item .\deploy.zip).FullName -ForceCatatan
-ArchivePathmembutuhkan jalur penuh dari file zip.Setelah penyebaran selesai, beralih kembali ke jendela browser yang dibuka di langkah Telusuri aplikasi, dan tekan refresh.
Anda akan melihat aplikasi web ASP.NET Core 6.0 yang telah diperbarui di halaman tersebut.
Telusuri ke fork GitHub Anda dari kode sampel.
Pada halaman repositori Anda, tekan
.untuk memulai kode Visual Studio di dalam browser Anda.Catatan
URL tersebut akan berubah dari GitHub.com menjadi GitHub.dev. Fitur ini hanya berfungsi dengan repositori yang memiliki file. Ini tidak berfungsi pada repositori yang kosong.
Buka Index.cshtml.
Index.cshtml terletak di folder
Pages.
Ganti elemen pertama
<div>dengan kode berikut:<div class="jumbotron"> <h1>.NET 💜 Azure</h1> <p class="lead">Example .NET app to Azure App Service.</p> </div>Simpan perubahan Anda.
Dari menu Kontrol Sumber, pilih tombol Perubahan Tahapan untuk melakukan perubahan tersebut.
Masukkan pesan penerapan seperti
We love Azure. Lalu, pilih Terapkan dan Dorong.Setelah penyebaran diselesaikan, beralih kembali ke jendela browser yang dibuka di langkah Telusuri aplikasi, dan refresh halaman.
Anda akan melihat aplikasi web ASP.NET Core 6.0 yang telah diperbarui di halaman tersebut.
Mengelola aplikasi Azure
Untuk mengelola aplikasi web Anda, buka portal Microsoft Azure, dan cari dan pilih App Services.
Pada halaman App Services, pilih nama aplikasi web Anda.
Halaman Gambaran Umum untuk aplikasi web Anda, berisi opsi untuk manajemen dasar seperti menelusuri, menghentikan, memulai, memulai ulang, dan menghapus. Menu sebelah kiri menyediakan halaman lebi lanjut untuk mengonfigurasikan aplikasi Anda.
Membersihkan sumber daya
Dalam 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.
- Dari halaman Gambaran umum aplikasi web di portal Microsoft Azure, pilih tautan myResourceGroup di bawah Grup sumber daya.
- Di halaman grup sumber daya, pastikan sumber daya yang tercantum adalah sumber daya yang ingin Anda hapus.
- Pilih Hapus, ketik myResourceGroup di kotak teks, lalu pilih Hapus.
Membersihkan sumber daya
Dalam 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.
- Dari halaman Gambaran umum aplikasi web di portal Microsoft Azure, pilih tautan myResourceGroup di bawah Grup sumber daya.
- Di halaman grup sumber daya, pastikan sumber daya yang tercantum adalah sumber daya yang ingin Anda hapus.
- Pilih Hapus, ketik myResourceGroup di kotak teks, lalu pilih Hapus.
Membersihkan sumber daya
Dalam langkah-langkah sebelumnya, Anda membuat sumber daya Azure dalam grup sumber daya. Jika Anda tidak ingin membutuhkan sumber daya ini di masa mendatang, hapus grup sumber daya dengan menjalankan perintah berikut ini di Cloud Shell:
az group delete --name myResourceGroup
Perintah ini mungkin perlu waktu satu menit untuk dijalankan.
Membersihkan sumber daya
Dalam langkah-langkah sebelumnya, Anda membuat sumber daya Azure dalam grup sumber daya. Jika Anda tidak membutuhkan sumber daya ini di masa mendatang, hapus grup sumber daya dengan menjalankan perintah PowerShell berikut:
Remove-AzResourceGroup -Name myResourceGroup
Perintah ini mungkin perlu waktu satu menit untuk dijalankan.
Membersihkan sumber daya
Dalam 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.
- Dari halaman Gambaran umum aplikasi web di portal Microsoft Azure, pilih tautan myResourceGroup di bawah Grup sumber daya.
- Di halaman grup sumber daya, pastikan sumber daya yang tercantum adalah sumber daya yang ingin Anda hapus.
- Pilih Hapus, ketik myResourceGroup di kotak teks, lalu pilih Hapus.
Langkah berikutnya
Dalam mulai cepat ini, Anda membuat dan menerapkan aplikasi web ASP.NET ke Azure App Service.
Lanjutkan ke artikel berikutnya untuk mempelajari cara membuat aplikasi .NET Core dan menghubungkannya ke Microsoft Azure SQL Database:






























