Angular uygulamasını bir ASP.NET Web API çözümüne nereye koyabilirim?

Bir greenfield uygulaması başlatıyorum ve ASP.NET (4.6) ve Angular 2 kullanmak istiyorum. Arka uç için Visual Studio'da bir proje oluşturdum ve şimdi Angular uygulamasını nereye koyacağımı merak ediyorum. Gerçekten ön uç için npm ve düğüm araçlarını kullanmak istiyorum, ancak sonunda Angular uygulamasında domain.com/ve altında api domain.com/api/veya benzeri ile aynı Azure App Service örneğinde barındırılacak .

Visual Studio'daki uygulamaları nasıl ayırmalıyım? Açısal uygulama kendi projesinde olmalı mı? Açısal uygulamasına API ile aynı projede sahip olmam gerekir mi? Bunun için nuget ve diğer VS araçlarını kullanmak istemesem bile? (Ön uç için, VS az çok yüceltilmiş bir kod editörü olacaktır). Bu kombinasyon için en iyi uygulamaları bulamadım.

İki seçeneğiniz var.

Çözümünüzde ayrı bir mywebsite.api ve bir mywebsite.app projeleri oluşturun.

Avantajları

• Endişelerin uygun şekilde ayrılması.
• Güncellemeleri API'nize ve kullanıcı arabiriminize bağımsız olarak dağıtabilirsiniz.
• Sitelerin mimarisi bağımsız olarak değiştirilebilir (yani web sitenizi etkilemeden api'nizi asp.net 5 üzerinde çalışacak şekilde güncelleyebilirsiniz)
• temizleyici

Tek bir projede hem istemci uygulaması hem de api ile tek bir proje oluşturun

Avantajları

• Güncelleştirmeleri dağıtmak daha kolay
• CORS ile çalışacak şekilde yapılandırmaya gerek yok

Uygulama yerel olarak nasıl barındırılır ve geliştirilir.

Geliştirme için etkili bir çözüm, istemci (Açısal 2) uygulamanızı çalıştırmak için lite-server ve web api kodunuzu barındırmak için IIS / Casini kullanmaktır. Nasıl kullanılacağına dair iyi bir örnek Açısal 2 hızlı başlangıç ​​eğitiminde verilmiştir (aşağıya bağlantılıdır). Geliştirme sürecim API'yi Visual Studio üzerinden çalıştırmak ve Visual Studio Code ve lite-server (Atom başka bir iyi seçimdir) kullanarak istemci site kodlaması ile çalışmaktır.

Lite-server belgelerinden. Bir web uygulamasına hizmet veren, tarayıcıda açan, html veya javascript değiştiğinde yenilenen, soketler kullanarak CSS değişiklikleri enjekte eden ve bir rota bulunmadığında bir yedek sayfaya sahip olan hafif geliştirme yalnızca düğüm sunucusu.

https://code.visualstudio.com/

https://angular.io/docs/js/latest/quickstart.html

https://www.youtube.com/watch?v=e_FVeYWUF3s

https://github.com/johnpapa/lite-server

Benim görüşüm

Nuget / NPM'nin aynı çözümde kullanılmasında herhangi bir sorun yoktur ve bu, proje yapısı seçiminizi bildirmemelidir.

Yalnızca tek bir proje yaklaşımını konsept uygulamalarının tanıtımı / ispatı için kullanıyorum. Üretim sürümleri için endişelerimi her zaman doğru bir şekilde ayıracağım ve özel bir API projem olacak.

İstemci ve sunucuyu tek bir Visual Studio (2017) projesinde geliştirmenize ve barındırmanıza izin veren bu ekici projeyi https://github.com/damienbod/AngularWebpackVisualStudio/ buldum .

@CountZero, barındırmak için iki site kullanmanın avantajlarıyla ilgili endişeleri kabul ediyorum (özellikle endişelerin ayrılması), ancak benim için büyük dezavantaj, çoğu durumda API'nizin tek tüketicisi sizin API'nızda CORS desteğini etkinleştirmek zorunda kalıyor kendi istemci ön uç. CORS konusunda uzman değilim ama bu gereksiz bir ek yük gibi geliyor ve ayrıca ek güvenlik tehditleriyle geliyor.

Açıkçası, onları iki çözüme ayırabilir, çözüme başka bir proje ekleyebilir veya aynı projede kullanabilirsiniz. Ne yapacağımı söyleyeceğim.

IMHO, IIS'deki Oturumlardan yararlanmak ve / veya API içindeki kimlik doğrulama işlemini gizlemek isterseniz , Visual Studio'da da açısal yazın. Web geliştirme uzantıları yüklerseniz VS2015, açısal ile oldukça iyi bir entegrasyona (intellisense) sahiptir. Bu yolun daha kompakt ve taşınabilir olacağını söylemeliyim.

Arka uç projesine dokümantasyon sayfaları ekleyecekseniz, bunları kendi projelerine ayırın (aynı çözüm) ve bir alt alan veya alt klasörden api sunun.

Yukarıdakilerin hiçbiriyle ilgilenmiyorsanız ve alıştığınız yolla daha rahat hissediyorsanız, bunun için gidin. Belirteç tabanlı bir kimlik doğrulamanız olacaksa, projeleri şüphesiz ayırabilirsiniz.

VS 2015'te, her biri için farklı Proje URL'leri ayarladığınız sürece hata ayıklama sırasında çözümünüzde birden fazla proje başlatma seçeneğiniz vardır.

Örnek olarak, Açısal uygulama projenizi çalışacak http://localhost:55000/şekilde ayarlayacaksınız ve API projesi çalışacak şekilde ayarlanabilir http://localhost:55000/api. Project URL özelliğini, Web sekmesindeki proje Özellikleri iletişim kutusunda ayarlarsınız.

Ardından, birden çok başlangıç ​​projesi ayarlamak için Ortak Özellikler altındaki Çözüm özellikleri iletişim kutusunda Başlangıç ​​Projesi düğümünü seçin. Sağda Single startup projectve için seçenekler bulacaksınız Multiple startup projects. Birden çok başlangıç ​​projesi radyo düğmesini seçin. Ardından Açısal projenizin yanındaki uygun İşlemi seçin (Açısal olduğundan hata ayıklamadan başlayın ve muhtemelen tarayıcıda hata ayıklama yapacaksınız), ardından API projenizin yanındaki Başlat'ı seçin.

Şimdi çalıştır'ı tıkladığınızda Açısal uygulamanız tarayıcıda açılacak ve web API'si de çalışmaya başlayacaktır. Web API yöntemlerinizde kırılma noktaları ayarlayabilir ve Angular uygulamasından vurabilirsiniz.