다음을 통해 공유


상용구 Azure 웹앱 만들기 및 배포

보일러 플레이트 Azure 웹 앱을 만들고 배포하려면 백 엔드 및 프런트 엔드 웹 앱을 만들고 배포해야 합니다. 이 자습서에서는 보일러 플레이트 백 엔드 및 프런트 엔드 웹 앱을 만들고 배포하기 위한 지침을 제공합니다.

백 엔드 및 프런트 엔드 웹앱을 배포하기 전에 워크로드 클라우드 설정 자습서를 검토해야 합니다.

보일러 플레이트 백 엔드 웹 앱 만들기 및 배포

  1. Azure Portal에서 웹앱 리소스만듭니다.

  2. 관련 정보를 입력하거나 선택합니다.

    • 게시에서 코드를 선택합니다.
    • 런타임 스택의 경우 .NET 7(STS)Windows를 선택합니다.

일반적인 지침은 Azure 앱 서비스 시작을 참조하세요.

백 엔드 웹앱에 도메인 매핑

  1. 설정>사용자 지정 도메인으로 이동합니다.

  2. 사용자 지정 도메인 추가를 선택한 다음 지침을 따릅니다.

    자세한 내용은 Azure의 사용자 지정 도메인 매핑을 참조하세요.

  3. Visual Studio에서 백 엔드 상용구 솔루션을 엽니다.

  4. 보일러 플레이트 프로젝트를 마우스 오른쪽 단추로 클릭하고 게시를 선택합니다.

  5. 대상에 대해 Azure를 선택합니다.

  6. 만든 Azure 웹 앱에 대한 액세스 권한이 있는 사용자로 로그인합니다.

  7. UI를 사용하여 관련 구독 및 리소스 그룹을 찾은 다음 지침에 따라 게시합니다.

CORS 업데이트

  1. Azure Portal의 웹앱 개요 창에서 API>CORS이동합니다.
  2. 허용된 원본에서 프런트 엔드 웹 앱 URL을 추가합니다.

상용구 프런트 엔드 웹앱 만들기 및 배포

  1. Azure Portal에서 웹앱 리소스만듭니다.

  2. 관련 정보를 입력하거나 선택합니다.

    • 게시에서 코드를 선택합니다.
    • 런타임 스택의 경우 Node 18 LTSWindows를 선택합니다.

일반적인 지침은 Azure App Service의 Node.js에 대한 빠른 시작을 참조하세요.

프런트 엔드 웹앱에 도메인 매핑

  1. 설정>사용자 지정 도메인으로 이동합니다.
  2. 사용자 지정 도메인 추가를 선택한 다음 지침을 따릅니다.

자세한 내용은 Azure의 사용자 지정 도메인 매핑을 참조하세요.

프런트 엔드 상용구 웹앱 게시

  1. npm run build:test를 실행하여 프런트 엔드 보일러 플레이트를 빌드합니다.
  2. Microsoft-Fabric-developer-sample\Frontend\tools\dist 폴더로 이동합니다.
  3. 아래 dist의 모든 파일과 자산 폴더를 선택하고 선택한 파일의 .zip 파일을 만듭니다.
  4. PowerShell을 엽니다.
  5. PowerShell에서 만든 Azure 웹앱에 대한 액세스 권한이 있는 사용자로 실행하고 Connect-AzAccount 로그인합니다.
  6. Set-AzContext -Subscription "<subscription_id>"을 실행합니다.
  7. Publish-AzWebApp -ResourceGroupName <resource_group_name> -Name <web_app_name> -ArchivePath <zip_file_path>을 실행합니다.