Menggunakan Dev Proxy dengan aplikasi Aspire

Sekilas
Tujuan: Menggunakan Dev Proxy dengan Aspire
Waktu: 15 menit
Plugin: Berbagai
Prasyarat:Menyiapkan Proksi Dev, Aspire

Aspire adalah tumpukan teknologi siap cloud dengan pilihan bawaan untuk membangun aplikasi terdistribusi yang dapat diamati dan siap produksi. Ini dibangun di atas .NET dan menyediakan platform modern, cepat, dan dapat diskalakan untuk membangun aplikasi web.

Untuk menggunakan Dev Proxy dengan aplikasi Aspire Anda, gunakan paket NuGet DevProxy.Hosting. Paket ini menyediakan ekstensi Dev Proxy Aspire untuk mengintegrasikan Dev Proxy dengan mudah ke dalam aplikasi Aspire Anda.

Instal paket NuGet untuk ekstensi Dev Proxy Aspire

Untuk menginstal paket NuGet ekstensi Dev Proxy Aspire, jalankan perintah berikut di folder akar aplikasi Aspire Anda:

dotnet add package DevProxy.Hosting

Dengan menggunakan paket ekstensi Dev Proxy Aspire, Anda dapat mengintegrasikan Dev Proxy baik dari executable yang diinstal secara lokal atau dari kontainer Docker.

Mengintegrasikan Dev Proxy dari executable yang diinstal secara lokal

Jika Anda memiliki Dev Proxy yang diinstal secara lokal, cara paling mudah untuk mengintegrasikannya ke dalam aplikasi Aspire Anda adalah dengan mereferensikan executable lokal. Cuplikan kode berikut menunjukkan cara mengintegrasikan Dev Proxy dari executable yang diinstal secara lokal dengan aplikasi aspire starter.

Penting

Saat Anda mengonfigurasi Dev Proxy untuk menggunakan executable lokal, pastikan bahwa executable tersedia di semua komputer tempat Anda menjalankan aplikasi Anda. Jika Anda ingin menggunakan Dev Proxy di lingkungan kontainer, pertimbangkan untuk menggunakan kontainer Docker sebagai gantinya.

using DevProxy.Hosting;

var builder = DistributedApplication
    .CreateBuilder(args);

// Add an API service to the application
var apiService = builder.AddProject<Projects.AspireStarterApp_ApiService>("apiservice")
    .WithHttpHealthCheck("/health")
    .WithHttpsEndpoint();

var devProxy = builder.AddDevProxyExecutable("devproxy")
    .WithConfigFile(".devproxy/config/devproxy.json")
    .WithUrlsToWatch(() => [$"{apiService.GetEndpoint("https").Url}/*"]);

// Add a web frontend project and configure it to use Dev Proxy
builder.AddProject<Projects.AspireStarterApp_Web>("webfrontend")
    .WithExternalHttpEndpoints()
    .WithHttpHealthCheck("/health")
    .WithEnvironment("HTTPS_PROXY", devProxy.GetEndpoint(DevProxyResource.ProxyEndpointName))
    .WithReference(apiService)
    .WaitFor(apiService)
    .WaitFor(devProxy);

// Build and run the application
builder.Build().Run();

Pertama, menggunakan ekstensi Dev Proxy Aspire, Anda menambahkan layanan Dev Proxy ke aplikasi Anda. Metode AddDevProxyExecutable menentukan nama Dev Proxy yang dapat dieksekusi. Dengan menggunakan metode WithConfigFile, Anda menentukan jalur ke file konfigurasi Proksi Dev. Dengan menggunakan metode ini WithUrlsToWatch , Anda menentukan daftar URL yang akan ditonton. Dalam contoh ini, Anda ingin Dev Proxy mencegat permintaan yang dilakukan aplikasi web ke layanan API.

Penting

Perhatikan, bahwa WithUrlsToWatch metode menerima fungsi yang mengembalikan daftar URL untuk ditonton. Ini karena titik akhir layanan API tidak tersedia saat Anda mengonfigurasi Dev Proxy, sehingga Anda tidak dapat meneruskan URL secara langsung. Sebagai gantinya, Anda menggunakan ekspresi lambda yang mengembalikan URL layanan API saat tersedia.

Selanjutnya, di aplikasi web, Anda menggunakan HTTPS_PROXY variabel lingkungan untuk mengonfigurasi aplikasi web untuk menggunakan Dev Proxy. Dengan menggunakan metode ini WaitFor , Anda menginstruksikan aplikasi web untuk menunggu Proksi Dev tersedia sebelum memulai.

Mengintegrasikan Dev Proxy dari kontainer Docker

Atau, Anda dapat mengintegrasikan Dev Proxy ke dalam aplikasi Aspire Anda dari kontainer Docker. Menggunakan gambar Docker Proxy Dev cukup nyaman, karena Aspire secara otomatis mengunduh gambar jika tidak tersedia secara lokal. Kelemahannya adalah, ada beberapa langkah lagi untuk mengonfigurasi Dev Proxy di aplikasi Anda.

Cuplikan kode berikut menunjukkan cara mengintegrasikan Dev Proxy dari kontainer Docker dengan aplikasi pemula Aspire.

using DevProxy.Hosting;

var builder = DistributedApplication
    .CreateBuilder(args);

// Add an API service to the application
var apiService = builder.AddProject<Projects.AspireStarterApp_ApiService>("apiservice")
    .WithHttpHealthCheck("/health")
    .WithHttpsEndpoint();

// Add Dev Proxy as a container resource
var devProxy = builder.AddDevProxyContainer("devproxy")
    // specify the Dev Proxy configuration file; relative to the config folder
    .WithConfigFile("./devproxy.json")
    // mount the local folder with PFX certificate for intercepting HTTPS traffic
    .WithCertFolder(".devproxy/cert")
    // mount the local folder with Dev Proxy configuration
    .WithConfigFolder(".devproxy/config")
    // let Dev Proxy intercept requests to the API service
    .WithUrlsToWatch(() => [$"{apiService.GetEndpoint("https").Url}/*"]);

// Add a web frontend project and configure it to use Dev Proxy
builder.AddProject<Projects.AspireStarterApp_Web>("webfrontend")
    .WithExternalHttpEndpoints()
    .WithHttpHealthCheck("/health")
    // set the HTTPS_PROXY environment variable to the Dev Proxy endpoint
    .WithEnvironment("HTTPS_PROXY", devProxy.GetEndpoint(DevProxyResource.ProxyEndpointName))
    .WithReference(apiService)
    .WaitFor(apiService)
    .WaitFor(devProxy);

// Build and run the application
builder.Build().Run();

Langkah-langkah dasarnya sama seperti saat menggunakan executable yang diinstal secara lokal. Perbedaan utamanya adalah bagaimana Anda menentukan file konfigurasi dan sertifikat untuk mencegat lalu lintas HTTPS.

Saat mengintegrasikan Dev Proxy dari kontainer Docker, Anda perlu memasang folder lokal dengan file konfigurasi dan sertifikat ke dalam kontainer. Dalam contoh ini, dalam solusi Aspire Anda, Anda memiliki struktur folder berikut:

AspireStarterApp
├── .devproxy
│   ├── cert
│   │   └── rootCert.pfx
│   └── config
│       └── devproxy.json
├── Projects
│   ├── AspireStarterApp_ApiService
│   └── AspireStarterApp_Web
└── AspireStarterApp.sln

Folder cert berisi sertifikat Pertukaran Informasi Pribadi (PFX) yang digunakan Dev Proxy untuk mencegat lalu lintas HTTPS.

Penting

Anda harus mempercayai sertifikat di cert folder pada komputer Anda, atau permintaan ke layanan API akan gagal. Selain itu, agar Proksi Dev memuat sertifikat, sertifikat harus dalam format PFX, harus diberi nama rootCert.pfx, dan tidak boleh dilindungi dengan kata sandi.

Folder config berisi file konfigurasi Proksi Dev dan file Proksi Dev lainnya seperti tiruan atau kesalahan.

Karena Anda memasang sertifikat dan file konfigurasi untuk memisahkan volume dalam kontainer, file tersebut harus disimpan dalam folder terpisah.

Menggunakan Dev Proxy dengan aplikasi aspire starter

Setelah Anda memulai aplikasi, Dev Proxy ditampilkan sebagai sumber daya dalam aplikasi.

Cuplikan layar dasbor Aspire memperlihatkan sumber daya aplikasi termasuk Dev Proxy.

Saat Anda menggunakan aplikasi web sehingga membuat permintaan ke layanan API, Dev Proxy mencegat permintaan dan menangani sesuai dengan konfigurasi Anda. Anda dapat melihat output Proksi Dev di bagian Konsol di dasbor Aspire.

Cuplikan layar dasbor Aspire memperlihatkan output konsol Dev Proxy.

Lihat juga