Azure Web Apps에 Azure CLI나 Cloud Shell 없이
정적 HTML 웹 앱을 배포하는 방법을 모르기 때문에 정리했습니다.

환경

주제 전에, 우선 내 환경에서.

OS: Windows 10 Pro

Node: 14.15.3

Angular CLI: 11.0.5

Angular 프로젝트 준비

정적 HTML이 이미 준비되어 있는 경우는 읽어 버려도 상관없습니다.

npm install -g @angular/cli
ng new my-app

Angular CLI를 설치하고 초기 응용 프로그램을 만듭니다.

npm run build

그런 다음 이전 애플리케이션을 빌드합니다.

dist/my-app/web.config

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

빌드시에 작성된 디렉토리 dist/my-app/ 안에,
위 web.config를 새로 만들고 추가합니다.

지금까지 HTML 준비가 완료되었습니다.

Azure 포털에서 웹 앱 만들기

이 때, 런타임 스택의 선택에,
정적 HTML 웹 앱과 같은 항목이 없어서 고민했습니다.

여기에서는 다음과 같이 선택하면 좋은 것 같습니다.
- 공개: コード 선택
- 런타임 스택: ASP.NET V4.8 선택
- 운영 시스템: Windows
※ 그 이외의 항목에 대해서는, 임의입니다.

Visual Studio Code에서 배포

확장 기능 설치

이번에는 Azure App Service라는 확장 기능을 사용하므로,
다음 URL에서 설치하십시오.

확장 프로그램에 Azure 계정으로 로그인

Sign in to Azure...를 클릭하면 다른 화면에서 평소 로그인 화면이 표시되므로,
구독 계약이 유효한 계정으로 로그인합니다.

배포할 소스 선택

배포 아이콘에서 소스 선택



프로젝트를 열고 있다면 아래에 뭔가 표시 될 것이라고 생각하지만,
이 배포는이 디렉토리가 아니므로 Browse...를 클릭하고,dist/my-app/를 선택합니다.

배포할 인스턴스 선택

그런 다음 배포하려는 인스턴스를 듣기 때문에 방금 만든 것을 선택합니다.
→ 이전 배포를 덮어 쓸 수 있습니까? 와 경고가 나오므로 Deploy 를 선택합니다.

배포 완료

배포가 완료되면 오른쪽 하단에 알림과 같은 형태로 표시됩니다.Browse Website 를 클릭하면 바로 웹사이트를 보고 확인할 수 있습니다.