ASP.NET 웹 API 솔루션에서 Angular 앱을 어디에 둘 수 있습니까?

그린 필드 응용 프로그램을 시작하고 ASP.NET (4.6) 및 Angular 2를 사용하고 싶습니다. 백엔드의 경우 Visual Studio에서 프로젝트를 만들었으며 이제 Angular 응용 프로그램을 어디에 둘 것인지 궁금합니다. 프런트 엔드에 npm 및 node-tools를 사용하고 싶지만 결국에는 Angular 앱 domain.com/과 같은 api 와 같은 Azure App Service 인스턴스에서 호스팅됩니다 domain.com/api/.

Visual Studio에서 앱을 어떻게 분리해야합니까? Angular 앱이 자체 프로젝트에 있어야합니까? API와 동일한 프로젝트에 Angular 앱이 있어야합니까? 너겟과 다른 VS 도구를 사용하고 싶지 않더라도? 프론트 엔드의 경우 VS는 다소 영광스러운 코드 편집기입니다. 이 조합에 대한 모범 사례를 찾지 못했습니다.

두 가지 옵션이 있습니다.

솔루션에서 별도의 mywebsite.api 및 mywebsite.app 프로젝트를 작성하십시오.

장점

• 우려의 적절한 분리.
• API 및 프런트 엔드에 독립적으로 업데이트를 배포 할 수 있습니다.
• 사이트의 아키텍처는 독립적으로 변경 될 수 있습니다 (예 : 웹 사이트에 영향을주지 않고 ap.net 5에서 실행되도록 API를 업데이트 할 수 있음)
• 청소기

하나의 프로젝트에서 클라이언트 앱과 API를 모두 사용하여 단일 프로젝트를 만듭니다.

장점

• 손쉬운 업데이트 배포
• CORS와 작동하도록 구성 할 필요가 없습니다.

응용 프로그램을 로컬로 호스팅하고 개발하는 방법

효과적인 개발 솔루션은 lite-server를 사용하여 클라이언트 (Angular 2) 응용 프로그램과 IIS / Casini를 실행하여 웹 API 코드를 호스팅하는 것입니다. 사용 방법에 대한 좋은 예는 Angular 2 빠른 시작 자습서 (아래 링크)에 나와 있습니다. 내 개발 프로세스는 Visual Studio를 통해 API를 실행하고 Visual Studio Code 및 lite-server를 사용하여 클라이언트 사이트 코딩 작업을하는 것입니다 (Atom은 또 다른 좋은 선택입니다).

라이트 서버 문서에서. 웹 응용 프로그램을 제공하고 브라우저에서 웹 응용 프로그램을 열고 HTML 또는 자바 스크립트가 변경 될 때 새로 고치고 소켓을 사용하여 CSS 변경 사항을 주입하며 경로를 찾을 수없는 경우 대체 페이지가있는 경량 개발 전용 노드 서버입니다.

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

내 견해

동일한 솔루션에서 Nuget / NPM을 사용하는 데는 문제가 없으므로 프로젝트 구조를 선택하지 않아도됩니다.

데모 / 개념 증명 응용 프로그램에는 단일 프로젝트 접근 방식 만 사용합니다. 프로덕션 릴리스의 경우 항상 내 관심사를 올바르게 분리하고 전용 API 프로젝트가 있습니다.

이 시더 프로젝트 https://github.com/damienbod/AngularWebpackVisualStudio/ 를 발견 하여 단일 Visual Studio (2017) 프로젝트에서 클라이언트와 서버를 개발하고 호스팅 할 수 있습니다.

@CountZero는 두 사이트를 사용하여 호스팅 할 때의 이점 (특히 우려 분리)에 대한 @CountZero 의견에 동의하지만 대부분의 경우 API의 유일한 소비자가 자신의 클라이언트 프론트 엔드. CORS 전문가는 아니지만 불필요한 오버 헤드처럼 느껴지고 추가 보안 위협이 따릅니다.

음, 분명히 두 솔루션으로 분리하거나 솔루션에 다른 프로젝트를 추가하거나 동일한 프로젝트에 배치 할 수 있습니다. 나는 내가 무엇을 할 것인지 말할 것이다.

IMHO, IIS에서 세션 을 활용 하거나 API 내에서 인증 프로세스를 숨기려면 Visual Studio에서도 각도를 작성하십시오. VS2015는 웹 개발 확장을 설치하면 각도와 꽤 잘 통합됩니다 (지능형). 나는이 방법이 더 작고 휴대 가능하다고 말해야합니다.

백엔드 프로젝트에 문서 페이지를 추가하려는 경우 해당 페이지를 자체 프로젝트 (동일한 솔루션)로 분리하고 하위 도메인 또는 하위 폴더에서 api를 제공하십시오.

위의 어느 것에도 관심이없고 익숙한 방법에 대해 더 편안하다고 느끼면 가십시오. 토큰 기반 인증을 받으려면 의심없이 프로젝트를 분리 할 수 ​​있습니다.

VS 2015에서는 각 프로젝트마다 다른 프로젝트 URL을 설정하기 만하면 디버깅 할 때 솔루션에서 둘 이상의 프로젝트를 시작할 수 있습니다.

예를 들어 Angular 앱 프로젝트를 실행 http://localhost:55000/하도록 설정하고 API 프로젝트를에서 실행하도록 설정할 수 있습니다 http://localhost:55000/api. 웹 탭의 프로젝트 속성 대화 상자에서 프로젝트 URL 속성을 설정합니다.

그런 다음 여러 시작 프로젝트를 설정하려면 공통 특성 아래의 솔루션 특성 대화 상자에서 시작 프로젝트 노드를 선택하십시오. 오른쪽에 Single startup project와에 대한 옵션이 있습니다 Multiple startup projects. 다중 시작 프로젝트 단일 선택 단추를 선택하십시오. 그런 다음 Angular 프로젝트 옆의 적절한 동작을 선택하십시오 (Angular이므로 디버깅하지 않고 시작하고 브라우저에서 디버깅 할 것입니다) .API 프로젝트 옆에서 시작을 선택하십시오.

이제 실행하면 Angular 앱이 브라우저에서 열리고 웹 API도 실행되기 시작합니다. 웹 API 메소드에서 중단 점을 설정하고 Angular 앱에서 중단 점을 지정할 수 있습니다.