자습서: Visual Studio에서 Angular를 사용하여 ASP.NET Core 앱 만들기

아티클
01/09/2025

이 문서에서는 API 백 엔드 역할을 하는 ASP.NET Core 프로젝트와 UI 역할을 하는 Angular 프로젝트를 빌드하는 방법을 알아봅니다.

Visual Studio에는 Angular 및 React를 지원하는 ASP.NET Core SPA(단일 페이지 애플리케이션) 템플릿이 포함되어 있습니다. 템플릿은 각 프레임워크의 기본 파일 및 폴더를 포함하는 ASP.NET Core 프로젝트에 기본 제공 클라이언트 앱 폴더를 제공합니다.

이 문서에 설명된 메서드를 사용하여 다음과 같은 ASP.NET Core 단일 페이지 애플리케이션을 만들 수 있습니다.

클라이언트 앱을 ASP.NET Core 프로젝트 외부의 별도 프로젝트에 배치
컴퓨터에 설치된 프레임워크 CLI를 기반으로 클라이언트 프로젝트 만들기

메모

이 문서에서는 Visual Studio 2022 버전 17.8에서 업데이트된 템플릿을 사용하여 프로젝트 만들기 프로세스를 설명합니다.

필수 구성 요소

다음을 설치해야 합니다.

ASP.NET 및 웹 개발 워크로드가 설치된 Visual Studio 2022 버전 17.8 이상. Visual Studio 다운로드 페이지로 이동하여 무료로 설치합니다. 워크로드를 설치해야 하고 Visual Studio가 이미 있는 경우 도구>도구 및 기능 가져오기...이동하여 Visual Studio 설치 관리자를 엽니다. ASP.NET 및 웹 개발 워크로드를 선택한 다음 수정을 선택합니다.
npm(https://www.npmjs.com/)는 Node.js에 포함되어 있습니다.
선택한 버전일 수 있는 Angular CLI(https://angular.dev/tools/cli)입니다. 프런트 엔드 프로젝트는 로컬 컴퓨터에 설치한 프레임워크 CLI 도구를 사용하여 만들어지므로 템플릿에 사용되는 Angular 버전이 결정됩니다.

프런트 엔드 앱 만들기

시작 창(파일>시작 창 선택)에서 새 프로젝트만듭니다.

새 프로젝트 만들기스크린샷
위쪽의 검색 창에서 Angular를 검색한 다음 Angular 및 ASP.NET Core 선택합니다.
프로젝트 이름을 AngularWithASP으로 지정한 후 다음을 선택합니다.

추가 정보 대화 상자에서 HTTPS 대한 구성이 사용하도록 설정되어 있는지 확인합니다. 대부분의 시나리오에서는 다른 설정을 기본값으로 둡니다.
만들기선택합니다.

솔루션 탐색기에는 다음이 표시됩니다.

솔루션 탐색기를 보여 주는

독립 실행형 Angular 템플릿비해 ASP.NET Core와 통합하기 위해 몇 가지 새 파일과 수정된 파일이 표시됩니다.
- aspnetcore-https.js
- proxy.conf.js
- package.json(수정됨)
- angular.json(수정됨)
- app.components.ts
- app.module.ts
이러한 프로젝트 파일 중 일부에 대한 자세한 내용은 다음 단계참조하세요.

프로젝트 속성 설정

솔루션 탐색기에서 AngularWithASP.Server 프로젝트를 마우스 오른쪽 단추로 클릭하고 속성 선택합니다.
속성 페이지에서 디버그 탭을 열고 디버그 시작 프로필 열기 UI 옵션을 선택합니다. 브라우저 시작 옵션을 선택 취소하십시오. 이는 https 프로필이나, (있는 경우) ASP.NET Core 프로젝트 이름을 따서 명명된 프로필의 옵션입니다.

디버그 시작 프로필 UI를 보여 주는

이 값은 원본 날씨 데이터로 웹 페이지를 열 수 없습니다.

메모

Visual Studio에서 launch.json 디버그 도구 모음의 시작 단추와 연결된 시작 설정을 저장합니다. launch.json .vscode 폴더 아래에 있어야 합니다.
솔루션 탐색기에서 솔루션을 마우스 오른쪽 단추로 클릭하고 속성선택합니다. 시작 프로젝트 설정이 여러 프로젝트로 설정되었는지 확인하고, 두 프로젝트에 대한 작업 설정이 시작로 되었는지 확인합니다.

프로젝트 시작

F5 누르거나 창 맨 위에 있는 시작 단추를 선택하여 앱을 시작합니다. 두 개의 명령 프롬프트가 나타납니다.

실행 중인 ASP.NET Core API 프로젝트
ng 시작 명령을 실행하는 Angular CLI

메모

콘솔 출력에서 메시지를 확인합니다. 예를 들어 Node.js업데이트하는 메시지가 있을 수 있습니다.

Angular 앱이 나타나고 API를 통해 채워집니다(localhost 포트는 스크린샷과 다를 수 있음).

일기 예보 앱을 보여 주는 스크린샷.

앱이 표시되지 않으면 문제 해결참조하세요.

프로젝트 게시

Visual Studio 2022 버전 17.3부터 Visual Studio 게시 도구를 사용하여 통합 솔루션을 게시할 수 있습니다.

메모

게시를 사용하려면 Visual Studio 2022 버전 17.3 이상을 사용하여 JavaScript 프로젝트를 만듭니다.

솔루션 탐색기에서 AngularWithASP.Server 프로젝트를 마우스 오른쪽 단추로 클릭하고 >프로젝트 참조추가를 선택합니다.

angularwithasp.client 프로젝트가 선택되어 있는지 확인합니다.
확인을 선택합니다.
ASP.NET Core 프로젝트를 다시 마우스 오른쪽 단추로 클릭하고 프로젝트 파일 편집 선택합니다.

그러면 프로젝트의 .csproj 파일이 열립니다.
.csproj 파일에서 프로젝트 참조에 값이 false설정된 <ReferenceOutputAssembly> 요소가 포함되어 있는지 확인합니다.

이 참조는 다음과 같습니다.
```
 <ProjectReference Include="..\angularwithasp.client\angularwithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>
```
ASP.NET Core 프로젝트를 마우스 오른쪽 단추로 클릭하고 옵션을 사용할 수 있는 경우 프로젝트 다시 로드를 선택합니다.

Program.cs다음 코드가 있는지 확인합니다.

app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

게시하려면 ASP.NET Core 프로젝트를 마우스 오른쪽 단추로 클릭하고 게시를 선택하고 Azure, 폴더에 게시 등 원하는 게시 시나리오와 일치하는 옵션을 선택합니다.

게시할 때 npm run build 명령이 호출되므로 게시 프로세스는 ASP.NET Core 프로젝트보다 더 많은 시간이 걸립니다. BuildCommand 기본적으로 npm run build 실행됩니다.

폴더에 게시하는 경우 게시 폴더에 추가된 파일에 대한 자세한 내용은 ASP.NET Core 디렉터리 구조 참조하세요.

문제 해결

프록시 오류

다음 오류가 표시 될 수 있습니다.

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

이 문제가 표시되면 프런트 엔드가 백 엔드 전에 시작되었을 가능성이 큽니다.

백 엔드 명령 프롬프트가 실행 중이면 브라우저에서 Angular 앱을 새로 고치면 됩니다.
또한 백 엔드가 프런트 엔드 전에 시작되도록 구성되어 있는지 확인합니다. 확인하려면 솔루션 탐색기에서 솔루션을 선택하고 프로젝트 메뉴속성 선택합니다. 다음으로 시작 프로젝트 구성을 선택하고 백 엔드 ASP.NET Core 프로젝트가 목록의 첫 번째 프로젝트인지 확인합니다. 첫 번째 프로젝트가 아닌 경우 프로젝트를 선택하고 위쪽 화살표 단추를 사용하여 시작 목록에서 첫 번째 프로젝트로 만듭니다.

포트 확인

날씨 데이터가 올바르게 로드되지 않는 경우 포트가 올바른지 확인해야 할 수도 있습니다.

ASP.NET Core 프로젝트의 launchSettings.json 파일(속성 폴더)로 이동합니다. applicationUrl 속성에서 포트 번호를 가져옵니다.

여러 applicationUrl 속성이 있는 경우 https 엔드포인트를 사용하여 속성을 찾습니다. https://localhost:7049와 유사하게 보여야 합니다.
그런 다음 Angular 프로젝트의 proxy.conf.js 파일로 이동합니다(src 폴더에서 확인). launchSettings.jsonapplicationUrl 속성과 일치하도록 대상 속성을 업데이트합니다. 업데이트할 때 해당 값은 다음과 유사하게 표시됩니다.
```
target: 'https://localhost:7049',
```

Docker

Docker 지원 사용하도록 설정된 프로젝트를 만드는 경우 다음 단계를 수행합니다.

앱이 로드되면 Visual Studio에서 컨테이너 창 사용하여 Docker HTTPS 포트를 가져옵니다. 환경 또는 포트 탭을 확인합니다.

Docker 컨테이너 포트를 보여 주는
Angular 프로젝트의 proxy.conf.js 파일을 엽니다. 컨테이너 창의 HTTPS 포트와 일치하도록 target 변수를 업데이트합니다. 예를 들어 다음 코드에서 다음을 수행합니다.
```
const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
   env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7209';
```
https://localhost:7209 일치하는 HTTPS 포트(이 예제에서는 https://localhost:62958)로 변경합니다.
앱을 다시 시작합니다.

다음 단계

ASP.NET Core의 SPA 애플리케이션에 대한 자세한 내용은 단일 페이지 앱 개발 아래의 Angular 섹션을 참조하세요. 연결된 문서에서는 프로젝트 템플릿 차이로 인해 구현의 세부 정보가 다르지만 aspnetcore-https.js 및 proxy.conf.js같은 프로젝트 파일에 대한 추가 컨텍스트를 제공합니다. 예를 들어 ClientApp 폴더 대신 Angular 파일은 별도의 프로젝트에 포함됩니다.

클라이언트 프로젝트와 관련된 MSBuild 정보는 JSPS 대한MSBuild 속성을 참조하세요.

다음을 통해 공유