이전

다음

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

완료됨

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

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

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

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

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

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

샘플 앱 다운로드

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

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

   mkdir htmlapp
   
   cd htmlapp
   

2. 다음 git 명령을 실행하여 샘플 앱 리포지토리를 htmlapp 디렉터리에 복제합니다.

   git clone https://github.com/Azure-Samples/html-docs-hello-world.git
   

3. 다음 명령을 실행하여 리소스 그룹 및 앱 이름을 포함하도록 변수를 설정합니다.

   resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
   appName=az204app$RANDOM
   

웹앱 만들기

1. 샘플 코드가 들어있는 디렉토리로 이동한 후 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. >
   }
   

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

   참고

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

앱 업데이트 및 다시 배포

1. Cloud Shell에서 code index.html을 입력하여 편집기를 엽니다. <h1> 제목 태그에서 Azure App Service - Sample Static HTML Site를 Azure App Service Updated 또는 원하는 다른 이름으로 바꿉니다.

2. ctrl-s 명령을 사용하여 저장하고, ctrl-q 명령을 사용하여 종료합니다.

3. 이전에 사용한 동일한 az webapp up 명령으로 앱을 다시 배포합니다.

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

   팁

   키보드의 위쪽 화살표를 사용하면 이전 명령을 스크롤할 수 있습니다.

4. 배포가 완료되면 위의 '웹앱 만들기' 섹션 2단계의 브라우저로 다시 전환하고 페이지를 새로 고칩니다.

계속