ASP .Net Core 2.0 CLI ve Proxy ile Angular 5 CLI uygulaması geliştirmek.
Windows Ortamında Projenin Çalıştırılması
cd NetCoreAngular.Hosting dizinine gidin ve dotnet run komutunu çalıştırın.
Bu komutu çalıştırdığınızda Startup.cs dosyası içerisindeki
app.UseMultiplateApplication(Configuration);çalışacak ve Proxy, Api ve Angular CLI uygulaması ayrı portlarda ayağa kalkacaktır.
NetCoreAngular.Client - Angular CLI
Angular CLI uygulamasında proxy config dosyası bulunmaktadır.
{
"/api": {
"target": "http://localhost:5000",
"secure": false
}
}Angular CLI uygulaması çalıştığında gelen /api istekleri proxy sunucusuna (NetCoreAngular.Hosting) yönlendirilir.
Hepsi bu kadar değil şimdi package.json dosyasına içerisine gidip aşağıdaki alanı değiştirmemiz gerekiyor.
Bunu yapmamızın sebebi npm start komutu girildiğinde proxy devreye girecek ve Angular uygulamasından gelen api istekleri localhost:5000
portuna gidecek.
"start": "ng serve --proxy-config proxy.conf.json"Peki Neden Proxy Config Dosyasını Yazdık ?
Burdaki seneryo şu şekilde ben Angular CLI uygulamasını derledikten sonra derlenen dosyaları NetCoreAngular.Hosting dizini içerisindeki wwwroot dizini içerisine bırakmam gerekiyor. Böylelikle proxy uygulaması ayağa kalktığında angular uygulamasıda çalışssın ve gelen api istekleri proxy sunucusuna yönlendirilsin.
Şimdi bununla ilgili ayarları yapalım.
angular-cli.json dosyasını açalım ve Angular Prod ortamına çıktığında derlenen dosyaları bir üst klasördeki NetCoreAngular.Hosting içerisindeki wwwroot dizine atmasını sağlayalım.
"root": "src",
"outDir": "../NetCoreAngular.Hosting/wwwroot",
"assets": [
"assets",
"favicon.ico"
], Angular CLI uygulamasının derlenmesi.
ng build --prod komutunu çalıştırın. Angular dosyaları compile edildiğinde NetCoreAngular.Hosting içerisindeki wwwroot dizine dosyaların yazıldığını göreceksiniz.
NetCoreAngular.Hosting
.Net Core projesi çalıştığında /api haricindeki gelen istekleri wwwroot içerisindeki index.html dosyasına yönlendirmemiz gerekiyor. Aşağıdaki kod tam olarak bu işi yapıyor.
app.UseAngular();NetCoreAngular.Hosting dizinine gidin ve dotnet run komutunu çalıştırın.
Sonuç :
1.) Angular CLI ve Api uygulamalarınızı isterseniz farklı sunucularda yayınlayabilirsiniz.
2.) Eğer isterseniz Api uygulamasını yayınladığınız sunucuda aynı anda angular uygulamasını da ayağa kaldırabilirsiniz.
Proxy için NetCoreStack Kütüphanesi kullanılmıştır.
Aşağıdaki Nuget adresinden bu kütüphaneye erişebilirsiniz.
https://www.nuget.org/packages/NetCoreStack.Proxy/