Gdzie umieścić aplikację Angular w interfejsie API sieci Web ASP.NET?

16

Zaczynam aplikację greenfield i chcę używać ASP.NET (4.6) i Angular 2. Dla backendu stworzyłem projekt w Visual Studio, a teraz zastanawiam się, gdzie umieścić aplikację Angular. Naprawdę chcę używać npm i narzędzi węzła dla interfejsu, ale ostatecznie będzie on hostowany w tej samej instancji usługi Azure App Service z aplikacją Angular pod domain.com/api pod domain.com/api/lub pod takim lub innym .

Jak oddzielić aplikacje w Visual Studio? Czy aplikacja Angular powinna być w swoim własnym projekcie? Czy powinienem mieć aplikację Angular w tym samym projekcie co API? Nawet jeśli nie chcę do tego używać nugetu i innych narzędzi VS? (Dla frontonu VS byłby mniej więcej chwalonym edytorem kodu). Nie znalazłem najlepszych praktyk dla tej kombinacji.

Christian Wattengård
źródło
jakiej wersji VS używasz? VS2015 ma całkiem niezłe narzędzia integracyjne dla kątowych / grunt / node / etc, które okazały się być tak samo użyteczne, jak inne IDE zbudowane z myślą o rozwoju front-endu.
Trotski94 27.04.16
Jestem na VS2015u2, ale nawet z ładnym oprzyrządowaniem i tak dalej, nadal nie jestem pewien, czy umieszczenie SPA i API w tym samym projekcie wystarczająco „rozdziela moje obawy”. Co jeśli, w przyszłości, dostanę kogoś, kto pomoże mi w projekcie, a oni będą musieli pracować tylko z interfejsem użytkownika. Nie powinni być zobowiązani do pobierania całego pliku schmedangle, prawda?
Christian Wattengård

Odpowiedzi:

13

Masz dwie opcje.

Utwórz osobne projekty mywebsite.api i mywebsite.app w swoim rozwiązaniu.

Zalety

  • Właściwe rozdzielenie obaw.
  • Możesz wdrożyć aktualizacje interfejsu API i interfejsu użytkownika niezależnie.
  • Architektura witryn może być zmieniana niezależnie (tzn. Możesz zaktualizować interfejs API, aby działał na asp.net 5 bez wpływu na stronę)
  • Odkurzacz

Utwórz pojedynczy projekt z aplikacją kliencką i interfejsem API w jednym projekcie

Zalety

  • Łatwiejsze wdrażanie aktualizacji
  • Nie trzeba konfigurować do pracy z CORS

Jak hostować i rozwijać aplikację lokalnie.

Skutecznym rozwiązaniem dla programistów jest użycie lite-server do uruchomienia aplikacji klienckiej (Angular 2) i IIS / Casini do hostowania twojego internetowego interfejsu API. Dobry przykład tego, jak go używać, znajduje się w samouczku Szybki start Angulara 2 (link poniżej). Moim procesem programistycznym jest uruchomienie interfejsu API za pomocą programu Visual Studio i praca z kodowaniem witryny klienta za pomocą programu Visual Studio Code i serwera lite (Atom to kolejny dobry wybór).

Z dokumentacji serwera Lite. Lekki serwer tylko dla węzłów programistycznych, który obsługuje aplikację internetową, otwiera ją w przeglądarce, odświeża po zmianie html lub javascript, wstrzykuje zmiany CSS za pomocą gniazd i ma stronę rezerwową, gdy nie znaleziono trasy.

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

Mój widok

Nie ma problemu z użyciem Nuget / NPM zarówno w tym samym rozwiązaniu i nie powinno to wpłynąć na wybór struktury projektu.

Korzystam z podejścia opartego na jednym projekcie tylko w przypadku aplikacji demonstracyjnych / proof of concept. W przypadku wersji produkcyjnych zawsze będę odpowiednio rozdzielać swoje obawy i mieć dedykowany projekt interfejsu API.

CountZero
źródło
Jak rozwiązać faktycznie hosting części aplikacji za pomocą tego rozwiązania? Naprawdę chcę, żeby skończyły na tym samym serwerze, tylko na aplikacji internetowej /i na interfejsie /api. W IIS prawdopodobnie mogę to łatwo rozwiązać poprzez „zamontowanie” strony pod /api, ale nie jestem pewien, jak to rozwiązać za pomocą VS / IISExpress.
Christian Wattengård,
Nieco inne pytanie. Zaktualizuję również moją odpowiedź tymi informacjami.
CountZero
Zaktualizowałem mój anwer. Daj mi znać, jeśli coś nie jest jasne.
CountZero
To jest rozwiązanie, po które poszedłem. Jednak Iis Express działa dobrze z jednym projektem w podfolderze, a drugim w katalogu głównym. Poszedłem na to.
Christian Wattengård
Używam również IIS Express. Warto używać serwera Lite do programowania po stronie klienta, ponieważ wszelkie zmiany w kodzie klienta są automatycznie aktualizowane. Może używać IIS w tandemie z tą metodą.
CountZero
2

Znalazłem ten projekt siewnika https://github.com/damienbod/AngularWebpackVisualStudio/, który pozwala rozwijać i hostować klienta i serwer w jednym projekcie Visual Studio (2017).

Zgadzam się z komentarzami @CountZero na temat zalet korzystania z dwóch witryn do hostowania (zwłaszcza oddzielenia problemów), ale wielką wadą jest dla mnie konieczność włączenia obsługi CORS w interfejsie API, gdy w większości przypadków jedynym użytkownikiem interfejsu API jest Twój własny interfejs klienta. Nie jestem ekspertem od CORS, ale wydaje mi się, że to niepotrzebny narzut i wiąże się z dodatkowymi zagrożeniami bezpieczeństwa.

Chet
źródło
Amen. Zawsze dwa projekty to hodowla ładunków
StingyJack
0

Oczywiście możesz je podzielić na dwa rozwiązania, dodać kolejny projekt w rozwiązaniu lub mieć je w tym samym projekcie. Powiem co chciałbym.

IMHO, jeśli chcesz skorzystać z sesji w usługach IIS i / lub ukryć proces uwierzytelniania w interfejsie API, napisz również kąt w Visual Studio. VS2015 ma całkiem dobrą integrację (intellisense) z angular, jeśli instalujesz rozszerzenia programistyczne. Muszę powiedzieć, że ten sposób byłby bardziej kompaktowy i przenośny.

Jeśli zamierzasz dodać strony dokumentacji do projektu zaplecza, rozdziel je na własne projekty (to samo rozwiązanie) i obsługuj API z subdomeny lub podfolderu.

Jeśli nie interesuje Cię żadna z powyższych sytuacji i czujesz się bardziej komfortowo ze swoim przyzwyczajeniem, wybierz to. Jeśli masz uwierzytelnianie oparte na tokenach, możesz bez wątpienia rozdzielać projekty.

św.
źródło
0

W VS 2015 masz możliwość uruchomienia więcej niż jednego projektu w swoim rozwiązaniu podczas debugowania, pod warunkiem, że dla każdego z nich ustawisz różne adresy URL projektu.

Jako przykład możesz ustawić uruchamianie projektu aplikacji Angular, http://localhost:55000/a projekt interfejsu API można uruchomić http://localhost:55000/api. Właściwość URL projektu ustawia się w oknie dialogowym Właściwości projektu na karcie WWW.

Następnie, aby ustawić wiele projektów startowych, w oknie dialogowym Właściwości rozwiązania w obszarze Wspólne właściwości wybierz węzeł Projekt startowy. Po prawej stronie znajdziesz opcje dla Single startup projecti Multiple startup projects. Wybierz przycisk opcji Wiele projektów startowych. Następnie wybierz odpowiednią akcję obok projektu Angular (Rozpocznij bez debugowania, ponieważ jest to Angular i prawdopodobnie będziesz debugował to w przeglądarce), a następnie obok projektu API wybierz Start.

Teraz, gdy klikniesz Uruchom, Twoja aplikacja Angular otworzy się w przeglądarce, a interfejs API sieci Web również zacznie działać. Możesz ustawić punkty przerwania w swoich metodach API sieci Web i uderzyć je w aplikacji Angular.

Mike Devenney
źródło
Próbowałem zrobić to okrągłym (zakładając, że byłby to lepszy kształt niż ściana tekstu), ale po kilku nieudanych próbach poszedłem z akapitami.
Mike Devenney,