Azure로 간단한 웹앱 만들기

<튜토리얼 링크>

https://docs.microsoft.com/en-us/learn/modules/host-a-web-app-with-azure-app-service/

Host a web application with Azure App Service - Learn

 

0. 시작하기 전에 학생 계정으로 $100 크레딧 받기

Azure로 들어가보니 AWS와 다르게 학생이면 추가적인 혜택이 있는 것 같았다. 나는 애초에 학교 이메일로 가입해 둔 계정도 있었고, (이것 때문인지는 잘 모르겠지만) 학교에서 예전에 Microsoft Learn 연동 혜택? 같은게 있었어서 문자 인증 후, 개인정보를 기입하니 이렇게 크레딧을 확인할 수 있었다. 학생이라면 다들 받고 시작하시는게..

 

 

2번째 다시 보기, 정리하기

 

1. 리소스 메뉴에서 웹앱 만들기

 

여기서 리소스 만들기 클릭

 

 

2. 웹앱 만들기 설정

- What is 리소스 그룹?

Everything you create on Azure is a resource -> Azure에서 만들어지는 모든 것을 '리소스'라고 하고, 리소스를 관리하기 위해 묶는 그룹. AWS로 생각해보면.. 뭐가 있을까?

 

구독은 Azure for Students.

튜토리얼에는 리소스 그룹을 선택하라고 되어 있었는데, 정작 선택지에는 아무것도 없었기 때문에 'CloudClub'이라는 이름으로 그룹을 새로 생성했다.

 

 

그룹 이름만 입력하면 됐고, 따로 설정할 것은 없었다. 

 

 

인스턴스 정보를 입력할때 이름은 Azure내에서 특수해야 한다.

Docker 를 잘 몰라서 코드 배포를 선택했고, 런타임 스택은 당근 Python, 지역은 한국

 

 

App Service 요금제가 방금 입력한 리소스 그룹 이름에 맞춰서 자동으로 생성되었다. 

그리고 Sku 및 크기를 꼭 변경하자. 기본 B1은 첫달만 무료이고, 요금이 청구되는 방식이니 F1으로 변경하면 된다.

 

변경 끝

 

그럼 이제 검토 + 만들기~

최종적으로 '만들기'까지 눌렀을때 생각보다 배포에 시간이 꽤 오래 걸렸다.(1분 정도)

 

<디폴트 웹앱 확인>

 

 

링크를 클릭해보면

이런 화면을 만날 수 있다.

 

3. 웹앱 코드 작성하기

Microsoft Learn에서는 Flask으로 정말 간단한 코드를 작성하고 Github에 새 레포를 만들고 커밋하는 형식으로 진행했지만, 나는 이미 기존에 만들어둔 샘플 웹앱 레포들이 있어서 그걸로 대체하기로 했다.

 

4. CLI 이용해서 코드 작성하기

튜토리얼에서 자동으로 Azure Cloud Shell에 연결을 해줬다. 오옹~

AWS로도 항상 웹으로만 해봤고, CLI는 안 써봐서 이번에는 어떻게 작동하나 튜토리얼을 따라해봤다.

신기방기..

 

5. 코드 배포하는 다양한 방법

1) 자동

• Azure DevOps
• GitHub
• Bitbucket
• OneDrive
• Dropbox 

2) 수동

• Git
• az webapp up

export APPNAME=$(az webapp list --query [0].name --output tsv)
export APPRG=$(az webapp list --query [0].resourceGroup --output tsv)
export APPPLAN=$(az appservice plan list --query [0].name --output tsv)
export APPSKU=$(az appservice plan list --query [0].sku.name --output tsv)
export APPLOCATION=$(az appservice plan list --query [0].location --output tsv)

이 명령어를 통해서 아까 Azure Portal에서 만들어둔 웹 앱의 정보를 찾는다.

그 뒤에 아까 만들어 두었던 디렉토리로 들어가서 az webapp up --name $APPNAME --resource-group $APPRG --plan $APPPLAN --sku $APPSKU --location "$APPLOCATION

을 해줬는데.. 에러가 발생

 

export -p 명령어로 찾아보니까 location, name, plan 등을 모두 가져오지 못했음을 확인할 수 있었다.

 

여러가지를 시도해보고 az webapp 명령어로 체크를 해봤는데도 빈 배열을 리턴 받았다.

 

 

음.. 연결이 안된걸까..? (같이 해결.. 시무룩)

 

• ZIP 파일로 배포: az webapp deployment source config-zip

 

6. VSCode로 배포하기

<참고 링크>

https://docs.microsoft.com/en-us/azure/app-service/quickstart-python?tabs=flask%2Cwindows%2Cvscode-aztools%2Cterminal-bash%2Clocal-git-deploy%2Cdeploy-instructions-azportal%2Cdeploy-instructions-zip-azcli

Quickstart: Deploy a Python (Django or Flask) web app to Azure - Azure App Service

Azure App Service extension을 설치해주면 왼쪽에 Azure 아이콘이 생긴다.

 

 

그럼 이제 여기서 workspace 옆에 있는 업로드 버튼을 누르면

 

 

이렇게 작성한 코드를 바로 deploy할 수 있다.

 

 

아까 만들어둔 cloudclub-webapp이 잘 뜬다.

 

 

이런 화면이 뜨면 잘 된 것.. 

deploy가 다 된 후에는 조금 기다려야 콘텐츠가 로드된다.(이런 부분은 AWS가 훨씬 빠른 것 같음)

 

 

잘 배포되었다.

 

Github으로 연동하는것도 하면 좋을텐데 시간이 없어서 패스.. CLI 문제를 해결하면 좋겠다..는 마음