빠른 시작: Visual Studio에서 React 단일 페이지 애플리케이션과 함께 Docker 사용

Visual Studio를 사용하여 React.js 단일 페이지 애플리케이션(SPA)과 같은 클라이언트 쪽 JavaScript를 포함한 앱과 더불어 컨테이너화된 ASP.NET Core 앱을 손쉽게 빌드, 디버그, 실행하고 Azure Container Registry(SPA), Docker Hub, Azure App Service 또는 자체 Container Registry에 게시할 수 있습니다. 이 문서에서는 Azure Container Registry에 게시합니다.

필수 조건

• Docker Desktop
• 웹 개발, Azure 도구 워크로드 및/또는 .NET Core 플랫폼 간 개발 워크로드가 설치된 Visual Studio 2022
• Azure Container Registry에 게시하려면 Azure 구독이 있어야 합니다. 평가판에 가입합니다.
• Node.js
• Windows 컨테이너의 경우 이 문서에서 참조된 Docker 이미지를 사용하려면 Windows 10 버전 1809 이상이어야 합니다.

설치 및 설정

Docker 데스크탑을 설치하려면 우선 Windows용 Docker: 설치하기 전에 알아야 할 사항의 정보를 검토하세요. 다음으로 Docker Desktop을 설치합니다.

프로젝트를 만들고 Docker 지원 추가

Visual Studio 2022 버전 17.8 이상을 사용하는 경우 다음 단계를 수행합니다.

1. React와 ASP.NET Core 템플릿을 사용하여 새 프로젝트를 만듭니다.

   

2. 추가 정보 화면에서 컨테이너 지원 사용을 선택합니다. 해당 파일을 수동으로 변경해야 하므로 Dockerfile 옵션을 선택해야 합니다.

   

   참고 항목

   일부 버전의 Visual Studio 2022에서는 이 옵션을 사용할 수 없지만 나중에 해당 지원을 추가할 수 있습니다.

   Visual Studio는 React JavaScript 클라이언트 코드용 프로젝트와 ASP.NET Core C# 서버 코드에 대한 두 개의 프로젝트를 만듭니다.

3. 프로젝트를 만드는 동안 Docker 컨테이너 지원을 추가하지 않은 경우, 서버 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 추가>Docker 지원을 선택한 다음 Dockerfile 옵션을 선택하여 Dockerfile을 만들어야 합니다.

   

4. 컨테이너 형식을 선택합니다.

Visual Studio 2022 버전 17.0~ 17.7에 대해 다음 단계를 사용합니다.

1. ASP.NET Core(React.js 사용) 템플릿을 사용하여 새 프로젝트를 만듭니다.

   

2. 추가 정보 화면에서는 Docker 지원 사용을 선택할 수 없으며 다만 나중에 해당 지원을 추가할 수 있으니 걱정하지 마세요.

   

3. 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 추가>Docker 지원을 선택하여 프로젝트에 Dockerfile을 추가합니다.

   

4. 컨테이너 형식을 선택합니다.

디버그

Visual Studio 2022 버전 17.9 이상과 vite.js을(를) 사용하는 React 및 ASP.NET Core 템플릿을 사용하면 프로젝트가 디버깅을 지원하는 클라이언트 및 서버 프로젝트를 모두 시작하도록 이미 구성되어 있지만 컨테이너에서 실행 중인 ASP.NET Core 서버에 액세스하는 데 사용할 SPA(단일 페이지 애플리케이션) 프록시에 적합한 포트를 설정해야 합니다. Visual Studio의 컨테이너 창에서 호스트 포트를 가져와 React 앱 만들기 - Docker에 설명된 대로 React 프로젝트에서 설정할 수 있습니다.

이 시나리오에서는 필요하지 않은 Swagger를 사용하여 열도록 설정된 서버의 브라우저에서 시작을 사용하지 않도록 설정할 수도 있습니다. 브라우저 시작을 사용하지 않도록 설정하려면 속성(Alt+Enter)을 열고 디버그 탭으로 이동한 다음 디버그 시작 프로필 UI 열기 링크를 클릭하고 브라우저 시작 확인란의 선택을 취소합니다.

이전 버전의 Visual Studio 2022를 사용하는 경우 읽기를 계속하여 SPA(단일 페이지 애플리케이션) 프록시 서버를 통해 디버깅을 설정합니다.

이 프로젝트는 디버깅 중에 SPA 프록시를 사용합니다. 향상된 SPA(단일 페이지 앱) 템플릿을 참조하세요. 디버깅할 때 JavaScript 클라이언트는 호스트 컴퓨터에서 실행되지만 ASP.NET Core 서버 코드는 컨테이너에서 실행됩니다. 게시되면 프록시가 실행되지 않고 클라이언트 코드가 ASP.NET Core 코드와 동일한 서버에서 실행됩니다. 서버 코드를 디버그하는 데 사용할 수 있는 디버그 프로필 *Docker가 이미 있습니다. JavaScript 클라이언트 코드를 디버그하려면 추가 디버그 프로필을 만들 수 있습니다. 또한 JavaScript를 디버깅할 때 명령 프롬프트에서 프록시를 수동으로 시작해야 합니다. 여러 디버그 세션을 통해 실행 중인 상태로 둘 수 있습니다.

1. 아직 빌드되지 않은 경우 프로젝트를 빌드합니다.

2. Visual Studio Dev 명령 프롬프트를 열고 프로젝트의 ClientApp 폴더로 이동한 다음 npm run start 명령을 입력합니다. 다음과 비슷한 결과가 표시됩니다.

   Compiled successfully!
   
   You can now view project3_spa in the browser.
   
     Local:            https://localhost:44407
     On Your Network:  https://192.168.1.5:44407
   
   Note that the development build isn't optimized.
   To create a production build, use npm run build.
   
   webpack compiled successfully
   

   참고 항목

   로컬 URL을 확인합니다. 이를 디버그 시작 프로필에서 제공해야 하며, 이 프로필은 launchSettings.json 파일에 저장됩니다.

3. 디버그 프로필이 포함된 드롭다운 목록을 열고(녹색 삼각형 아이콘 또는 시작 버튼 옆) {ProjectName} 디버그 속성을 선택한 후 Docker 프로필을 선택합니다.

4. 환경 변수 섹션을 확인하고 아직 없는 경우 다음 환경 변수를 추가합니다.

   ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy

5. URL을 https://localhost:{proxy-port}로 설정하며, 여기서 {proxy-port}는 프록시 서버의 포트입니다(1단계부터).

   

   이 작업은 launchSettings.json 파일의 Docker 항목을 변경하고 호스트에서 실행되는 로컬 프록시에 대한 올바른 URL을 시작합니다. 솔루션 탐색기의 속성에서 launchSettings.json 파일을 찾습니다.

6. 다음과 같은 코드가 표시됩니다.

   "profiles": {
      "Docker": {
         "commandName": "Docker",
         "launchBrowser": true,
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development",
           "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
         },
         "launchUrl": "https://localhost:44407",
         "useSSL": true
      }
   }
   

   Important

   프록시를 사용하는 경우 시작 설정 옵션 publishAllPorts 를 true 로 설정하지 마세요. 해당 옵션은 임의의 포트에 노출된 모든 포트를 게시하며, 이는 SPA 프록시에서 특정 포트를 설정한 경우 작동하지 않습니다.

7. ClientApp/src/setupProxy.js 파일을 열고 대상에서 컨테이너의 localhost 주소 및 포트를 사용하도록 설정하는 줄을 변경합니다. 포트 탭의 컨테이너 창에서 포트를 찾을 수 있습니다.

   const target =  'https://localhost:{container-port}';
   

   HTTPS를 사용하는 경우 HTTPS에 적합한 포트(이 자습서에서는 443)를 선택해야 합니다.

8. 디버깅을 사용하여 앱을 시작합니다(F5).

   

   출력 어셈블리를 작성하려고 시도할 때 빌드 오류가 발생하는 경우 파일의 잠금을 해제하기 위해 이전에 실행 중인 컨테이너를 중지해야 할 수 있습니다.

9. incrementCounter 함수의 ClientApp/src/components/Counter.js에서 중단점을 설정하여 클라이언트 쪽 JavaScript 코드에서 중단점을 적중할 수 있는지 확인합니다. 그런 다음 카운터 페이지에서 증가 단추를 클릭하여 중단점을 적중해 봅니다.

   

10. 다음으로 서버 쪽 ASP.NET Core 코드에서 중단점을 적중해 봅니다. Get 메서드의 WeatherController.cs에서 중단점을 설정하고 기본 localhost 및 포트 URL에 /weatherforecast를 추가하여 해당 코드를 활성화해 봅니다.

    

11. launchSettings.json을 업데이트하거나 IDE에서 디버그 시작 프로필을 업데이트하는 등 중요한 변경을 수행할 경우 발생할 수 있는 컨테이너 포트 변경이 있으면 setupProxy.js의 포트를 업데이트하고 프록시도 다시 시작해야 합니다. 현재 프록시를 종료한 다음(실행 중인 명령 창에서 Ctrl+C) 동일한 명령 npm run start를 사용하여 다시 시작합니다.

컨테이너 창

컨테이너 도구 창을 엽니다. 이 창은 보기>다른 창>컨테이너 아래의 메뉴에서 찾을 수 있습니다. 또는 Ctrl+Q를 누르고 검색 상자에 containers를 입력하여 결과에서 컨테이너 창을 선택합니다. 창이 나타나면 편집기 창의 아래쪽에 도킹합니다.

컨테이너 창에서는 실행 중인 컨테이너가 표시되며 해당 컨테이너에 대한 정보를 볼 수 있습니다. 환경 변수, 레이블, 포트, 볼륨, 파일 시스템 및 로그를 볼 수 있습니다. 도구 모음 단추를 사용하여 컨테이너 내에서 터미널(셸 프롬프트)을 만들거나, 디버거를 연결하거나, 사용하지 않는 컨테이너를 정리할 수 있습니다. 컨테이너 창 사용을 참조하세요.

파일 탭을 클릭하고 app 폴더를 확장하여 게시된 애플리케이션 파일을 확인합니다.

이미지를 보고 이에 대한 정보를 검사할 수도 있습니다. 이미지 탭을 선택하고 프로젝트에 대한 탭을 찾은 다음 세부 정보 탭을 선택하여 이미지에 대한 정보가 포함된 json 파일을 봅니다.

참고 항목

디버그 구성은 볼륨 마운트를 사용하여 반복 편집 및 디버그 환경을 제공하므로 dev 이미지에는 앱 바이너리 및 다른 콘텐츠가 포함되지 않습니다. 모든 콘텐츠를 포함하는 프로덕션 이미지를 만들려면 릴리스 구성을 사용하세요.

Docker 이미지 게시

앱의 개발 및 디버그 주기가 완료되면 앱의 프로덕션 이미지를 만들 수 있습니다.

1. 구성 드롭다운 목록을 릴리스로 변경하고 앱을 빌드합니다.

2. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 게시를 선택합니다.

3. Publish target(게시 대상) 대화 상자에서 Docker 컨테이너 레지스트리를 선택합니다.

   

4. 다음으로, Azure Container Registry를 선택합니다.

   

5. 새 Azure Container Registry 만들기를 선택합니다.

6. 새 Azure Container Registry 만들기 화면에 원하는 값을 채웁니다.

   설정	제안 값	설명
   DNS 접두사	전역적으로 고유한 이름	컨테이너 레지스트리를 고유하게 식별하는 이름입니다.
   구독	구독 선택	사용할 Azure 구독입니다.
   리소스 그룹	myResourceGroup	컨테이너 레지스트리를 만들 리소스 그룹의 이름입니다. 새로 만들기를 선택하여 새 리소스 그룹을 만듭니다.
   SKU	표준	컨테이너 레지스트리의 서비스 계층
   레지스트리 위치	가까운 위치	사용자 또는 컨테이너 레지스트리를 사용할 기타 서비스에 가까운 지역의 위치를 선택합니다.

   

7. 만들기를 선택한 다음 마침을 선택합니다.

   

   게시 프로세스가 종료되면 게시 설정을 검토하고 필요한 경우 편집하거나 게시 단추를 사용하여 이미지를 다시 게시할 수 있습니다.

   

   게시 대화 상자를 사용하여 다시 시작하려면 이 페이지에서 삭제 링크를 사용하여 게시 프로필을 삭제한 다음 게시를 다시 선택합니다.

다음 단계

이제 레지스트리에서 Docker 이미지를 실행할 수 있는 모든 호스트로 컨테이너를 끌어올 수 있습니다(예: Azure Container Instances).

추가 리소스

• Visual Studio를 사용한 컨테이너 개발
• Docker 관련 Visual Studio 개발 문제 해결
• Visual Studio 컨테이너 도구 GitHub 리포지토리