Baca dalam bahasa Inggris

Bagikan melalui


Mulai Cepat: Membuat aplikasi ASP.NET Core dengan Azure App Configuration

Dalam mulai cepat ini, Anda akan menggunakan Azure App Configuration untuk eksternalisasi penyimpanan dan manajemen pengaturan aplikasi Anda untuk aplikasi ASP.NET Core. ASP.NET Core membangun satu objek konfigurasi berbasis nilai kunci menggunakan pengaturan dari satu atau beberapa penyedia konfigurasi. App Configuration menawarkan pustaka penyedia konfigurasi .NET. Oleh karena itu, Anda dapat menggunakan App Configuration sebagai sumber konfigurasi tambahan untuk aplikasi Anda. Jika Anda memiliki aplikasi yang sudah ada, untuk mulai menggunakan App Configuration, Anda hanya memerlukan beberapa perubahan kecil pada kode startup aplikasi Anda.

Prasyarat

Tip

Azure Cloud Shell adalah shell interaktif gratis yang dapat Anda gunakan untuk menjalankan langkah-langkah dalam artikel ini. Ini memiliki alat Azure umum yang telah diinstal sebelumnya, termasuk .NET SDK. Jika Anda masuk ke langganan Azure, luncurkan Azure Cloud Shell dari shell.azure.com. Anda dapat mempelajari selengkapnya mengenai Azure Cloud Shell dengan membaca dokumentasi kami

Menambahkan nilai kunci

Tambahkan nilai kunci berikut ke penyimpanan App Configuration dan biarkan Label dan Tipe Konten dengan nilai defaultnya. Untuk informasi selengkapnya tentang cara menambahkan nilai kunci ke penyimpanan menggunakan portal Azure atau CLI, buka Membuat nilai kunci.

Tombol Nilai
TestApp:Settings:BackgroundColor putih
TestApp:Settings:FontColor hitam
TestApp:Settings:FontSize 24
TestApp:Settings:Message Data dari Azure App Configuration

Buat aplikasi web ASP.NET Core

Gunakan antarmuka baris perintah (CLI) .NET untuk membuat proyek aplikasi web ASP.NET Core baru. Azure Cloud Shell menyediakan alat tersebut untuk Anda. Alat tersebut juga tersedia di seluruh platform Windows, macOS, dan Linux.

Jalankan perintah berikut untuk membuat aplikasi web ASP.NET Core di folder TestAppConfig baru:

dotnet new webapp --output TestAppConfig

Hubungkan ke penyimpanan Azure App Configuration

Sambungkan ke penyimpanan App Configuration Anda menggunakan ID Microsoft Entra (disarankan), atau string koneksi.

  1. Navigasikan ke direktori proyek TestAppConfig, dan jalankan perintah berikut untuk menambahkan referensi paket NuGet.

    dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
    dotnet add package Azure.Identity
    
  2. Buat rahasia pengguna untuk aplikasi dengan menavigasi ke folder TestAppConfig dan menjalankan perintah berikut.

    Perintah menggunakan Secret Manager untuk menyimpan rahasia bernama Endpoints:AppConfiguration, yang menyimpan titik akhir untuk penyimpanan App Configuration Anda. <your-App-Configuration-endpoint> Ganti tempat penampung dengan titik akhir penyimpanan App Configuration Anda. Anda dapat menemukan titik akhir di bilah Gambaran Umum penyimpanan App Configuration di portal Azure.

    dotnet user-secrets init
    dotnet user-secrets set Endpoints:AppConfiguration "<your-App-Configuration-endpoint>"
    
  3. Buka Program.cs dan tambahkan namespace berikut:

    using Microsoft.Extensions.Configuration;
    using Microsoft.Azure.AppConfiguration.AspNetCore;
    using Azure.Identity;
    
  4. Sambungkan ke penyimpanan App Configuration Anda dengan memanggil AddAzureAppConfiguration metode dalam Program.cs file.

    Anda menggunakan DefaultAzureCredential untuk mengautentikasi ke penyimpanan App Configuration Anda. Ikuti instruksi untuk menetapkan kredensial Anda peran Pembaca Data App Configuration. Pastikan untuk mengizinkan waktu yang memadai agar izin disebarluaskan sebelum menjalankan aplikasi Anda.

    var builder = WebApplication.CreateBuilder(args); 
    
    // Retrieve the endpoint
    string endpoint = builder.Configuration.GetValue<string>("Endpoints:AppConfiguration")
        ?? throw new InvalidOperationException("The setting `Endpoints:AppConfiguration` was not found.");
    
    // Load configuration from Azure App Configuration 
    builder.Configuration.AddAzureAppConfiguration(options =>
    {
        options.Connect(new Uri(endpoint), new DefaultAzureCredential());
    });
    
    // The rest of existing code in program.cs
    // ... ...    
    

    Kode ini memuat semua nilai kunci yang tidak memiliki label dari penyimpanan App Configuration Anda. Untuk informasi selengkapnya tentang memuat data dari App Configuration, lihat referensi API penyedia App Configuration.

Baca dari penyimpanan App Configuration

Dalam contoh ini, Anda akan memperbarui halaman web untuk menampilkan kontennya menggunakan pengaturan yang Anda konfigurasi di penyimpanan App Configuration Anda.

  1. Tambahkan file Settings.cs di akar direktori proyek Anda. Ini mendefinisikan kelas yang sangat ditik Settings untuk konfigurasi yang akan Anda gunakan. Ganti ruang nama dengan nama proyek Anda.

    namespace TestAppConfig
    {
        public class Settings
        {
            public string BackgroundColor { get; set; }
            public long FontSize { get; set; }
            public string FontColor { get; set; }
            public string Message { get; set; }
        }
    }
    
  2. Ikat bagian TestApp:Settings dalam konfigurasi ke Settings objek.

    Perbarui Program.cs dengan kode berikut dan tambahkan TestAppConfig namespace di awal file.

    using TestAppConfig;
    
    // Existing code in Program.cs
    // ... ...
    
    builder.Services.AddRazorPages();
    
    // Bind configuration "TestApp:Settings" section to the Settings object
    builder.Services.Configure<Settings>(builder.Configuration.GetSection("TestApp:Settings"));
    
    var app = builder.Build();
    
    // The rest of existing code in program.cs
    // ... ...
    
  3. Buka Index.cshtml.cs di direktori Pages , dan perbarui IndexModel kelas dengan kode berikut. using Microsoft.Extensions.Options Tambahkan namespace layanan di awal file, jika belum ada.

    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;
    
        public Settings Settings { get; }
    
        public IndexModel(IOptionsSnapshot<Settings> options, ILogger<IndexModel> logger)
        {
            Settings = options.Value;
            _logger = logger;
        }
    }
    
  4. Buka Index.cshtml di direktori Pages , dan perbarui konten dengan kode berikut.

    @page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }
    
    <style>
        body {
            background-color: @Model.Settings.BackgroundColor;
        }
    
        h1 {
            color: @Model.Settings.FontColor;
            font-size: @(Model.Settings.FontSize)px;
        }
    </style>
    
    <h1>@Model.Settings.Message</h1>
    

Membangun dan menjalankan aplikasi secara lokal

  1. Untuk membuat aplikasi menggunakan .NET CLI, navigasikan ke direktori akar proyek Anda. Jalankan perintah berikut pada shell perintah:

    dotnet build
    
  2. Setelah pembangunan berhasil diselesaikan, jalankan perintah berikut untuk menjalankan aplikasi secara lokal:

    dotnet run
    
  3. Output dotnet run perintah berisi dua URL. Buka browser dan navigasi ke salah satu URL ini untuk mengakses aplikasi Anda. Misalnya: https://localhost:5001.

    Jika Anda bekerja pada Azure Cloud Shell, pilih tombol Pratinjau Web diikuti dengan Konfigurasikan. Ketika diminta untuk mengonfigurasi port untuk pratinjau, masukkan 5000, dan pilih Buka dan telusuri.

    Cuplikan layar Azure Cloud Shell. Temukan Pratinjau Web.

    Halaman web terlihat seperti ini: Cuplikan layar browser. Meluncurkan aplikasi mulai cepat secara lokal.

Membersihkan sumber daya

Jika Anda tidak ingin terus menggunakan sumber daya yang dibuat dalam artikel ini, hapus grup sumber daya yang Anda buat di sini untuk menghindari biaya.

Penting

Penghapusan grup sumber daya tidak bisa dipulihkan. Grup sumber daya dan semua sumber daya yang ada di dalamnya akan dihapus secara permanen. Pastikan Anda tidak menghapus grup atau sumber daya yang salah secara tidak sengaja. Jika Anda membuat sumber daya untuk artikel ini dalam grup sumber daya yang ada yang berisi sumber daya lain yang ingin disimpan, hapus setiap sumber daya satu per satu dari panelnya masing-masing, bukan menghapus grup sumber daya.

  1. Masuk ke portal Azure, lalu pilih Grup sumber daya.
  2. Dalam kotak Filter menurut nama, masukkan nama grup sumber daya Anda.
  3. Dalam daftar hasil, pilih nama grup sumber daya untuk melihat gambaran umum.
  4. Pilih Hapus grup sumber daya.
  5. Anda akan diminta untuk mengonfirmasi penghapusan grup sumber daya. Masukkan nama grup sumber daya Anda untuk mengonfirmasi, dan pilih Hapus.

Setelah beberapa saat, grup sumber daya dan semua sumber dayanya akan dihapus.

Langkah berikutnya

Dalam mulai cepat ini, Anda akan:

  • Menyediakan penyimpanan Azure App Configuration baru.
  • Tersambung ke penyimpanan App Configuration Anda menggunakan pustaka penyedia App Configuration.
  • Baca nilai kunci penyimpanan App Configuration Anda dengan pustaka penyedia konfigurasi.
  • Menampilkan halaman web menggunakan pengaturan yang Anda konfigurasi di penyimpanan App Configuration Anda.

Untuk mempelajari cara mengonfigurasi aplikasi web ASP.NET Core Anda untuk menyegarkan pengaturan konfigurasi secara dinamis, lanjutkan ke tutorial berikutnya.