연습: Azure Cloud Shell을 사용하여 정적 HTML 웹앱 만들기

15분

무료 샌드박스를 사용하면 Azure 글로벌 지역의 일부 하위 지역에 리소스를 만들 수 있습니다. 리소스를 만들 때 다음 목록에서 지역을 선택합니다.

미국 서부 2
미국 중남부
미국 중부
미국 동부
서유럽

동남 아시아
일본 동부
브라질 남부
오스트레일리아 남동부
인도 중부

이 연습에서는 Azure CLI az webapp up 명령을 사용하여 Azure App Service 기본 HTML+CSS 사이트를 배포합니다. 다음으로, 동일한 명령을 사용하여 코드를 업데이트하고 다시 배포합니다.

az webapp up 명령을 사용하면 웹앱을 쉽게 만들고 업데이트할 수 있습니다. 명령은 실행될 때 다음 작업을 수행합니다.

기본 리소스 그룹이 지정되지 않은 경우 만듭니다.
기본 앱 서비스 계획 만들기
지정된 이름의 앱 만들기
현재 작업 디렉터리에서 웹앱으로 배포 파일 압축하기.

Important

이 연습을 완료하려면 Cloud Shell을 클래식 버전으로 전환해야 합니다. Cloud Shell 로딩이 완료되면 Cloud Shell 상단의 메뉴에서 설정을 선택한 다음 클래식 버전으로 이동을 선택합니다.

샘플 앱 다운로드

이 섹션에서는 샌드박스를 사용하여 샘플 앱을 다운로드하고 변수를 설정하여 일부 명령을 더 쉽게 입력할 수 있도록 합니다.

샌드박스에서 디렉터리를 만들고 해당 디렉터리로 이동합니다.
```
mkdir htmlapp

cd htmlapp
```
다음 git 명령을 실행하여 샘플 앱 리포지토리를 htmlapp 디렉터리에 복제합니다.
```
git clone https://github.com/Azure-Samples/html-docs-hello-world.git
```
다음 명령을 실행하여 리소스 그룹 및 앱 이름을 포함하도록 변수를 설정합니다.
```
resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
appName=az204app$RANDOM
```

웹앱 만들기

샘플 코드가 들어있는 디렉토리로 이동한 후 az webapp up 명령을 실행합니다.

cd html-docs-hello-world

az webapp up -g $resourceGroup -n $appName --html

이 명령을 실행하는 데 몇 분 정도 걸릴 수 있습니다. 명령이 실행되는 동안 다음 예와 비슷한 정보가 표시됩니다.

{
"app_url": "https://<myAppName>.azurewebsites.net",
"location": "westeurope",
"name": "<app_name>",
"os": "Windows",
"resourcegroup": "<resource_group_name>",
"serverfarm": "appsvc_asp_Windows_westeurope",
"sku": "FREE",
"src_path": "/home/<username>/demoHTML/html-docs-hello-world ",
< JSON data removed for brevity. >
}

브라우저에서 새 탭을 열고 앱 URL(https://<myAppName>.azurewebsites.net)로 이동하고, 앱이 실행 중인지 확인합니다. 페이지 맨 위에 있는 제목을 적어 둡니다. 다음 섹션을 위해 앱에서 브라우저를 열어 둡니다.

참고

이전 명령의 출력에서 <myAppName>.azurewebsites.net을 복사하거나 출력에서 URL을 선택하여 새 탭에서 사이트를 열 수 있습니다.

앱 업데이트 및 다시 배포

Cloud Shell에서 code index.html을 입력하여 편집기를 엽니다. <h1> 제목 태그에서 Azure App Service - Sample Static HTML Site를 Azure App Service Updated 또는 원하는 다른 이름으로 바꿉니다.
ctrl-s 명령을 사용하여 저장하고, ctrl-q 명령을 사용하여 종료합니다.
이전에 사용한 동일한 az webapp up 명령으로 앱을 다시 배포합니다.
```
az webapp up -g $resourceGroup -n $appName --html 
```
팁

키보드의 위쪽 화살표를 사용하면 이전 명령을 스크롤할 수 있습니다.
배포가 완료된 후 "웹앱 만들기" 섹션의 2단계부터 브라우저로 돌아가서 페이지를 새로 고칩니다.