본문 바로가기

Cloud/AZURE

Azure App Service : Part 1 - VS Code에서 App Service 배포하기

Today Keys :  app service, web app, azure, visual studio, code, vs code, deploy, cloud, 배포, 웹앱, 서비스


 이번 포스팅은 Visual Studio Code에서 App Service를 배포하고, Visual Studio Code로 만든 App으로 코드를 업데이트하는 예제입니다.


 

Azure App Service를 Visual Studio Code(이하 VS Code)를 통해서 만들고, 배포하는 예제 입니다.

VS Code에서 App Service를 사용하기 위해서 'Azure App Service' Extentions을 설치합니다.

설치된 Azure App Service Extensions을 선택하고, Azure 계정에 로그인 합니다. (Sign in to Azure..)

 

'Sign in to Azure'를 선택하면 아래와 같이 로그인을 하기 위한 브라우저가 뜹니다.

 

정상적으로 로그인을 하고 나면, 아래와 같은 메시지가 뜹니다. 

 

브라우저를 닫고, VS Code에서 확인하면, 현재 로그인 한 계정의 'Subscription(구독)'을 확인 할 수 있습니다. 

 

이제 App Service에 올리기 위한 테스트 앱을 먼저 로컬에서 만들어서 테스트 합니다.

 

더보기

다음은 방금 만든 앱을 로컬에서 올리기 위한 절차입니다.

 

Flask 사용을 위해서 VS Code에서 Terminal을 엽니다.

 

 pip으로 Flask를 설치합니다. 

 

flask를 실행하기 위해서 FLASK_APP 환경 변수를 지정하고, 실행합니다.

 

정상적으로 로컬에서 열리는 것을 확인할 수 있습니다.

이제부터는 Azure App Service를 VS Code에서 올리도록 합니다.

 

먼저 Azure Portal에서 현재 App Service가 존재하지 않는 것을 확인합니다.

 

이제 VS Code의 Azure App Service Extention에서 'Create New Web App'을 선택해서 새로운 Web App을 만듭니다.

 

먼저 Web App을 만든 subscription을 선택합니다

 

Web App에서 사용할 이름을 지정합니다.

 

 

다음은 Web App이 사용할 runtime stack을 지정합니다. 

여기에서는 Python 3.8을 사용합니다.

 

정상적으로 Web App이 생성되고 있는 것을 볼 수 있습니다.

 

몇 분이 지나고 나면, 아래와 같이 해당 Subscrpiton에 Web App이 생성된 것을 볼 수 있습니다.

 

 

Azure Portal에서도 정상적으로 App Service가 생성되어서 실행 중인 것을 볼 수 있습니다.

이렇게 만들어진 App Service은 방금 만든 코드로 생성된 App Service는 아니고,

Azure에서 기본으로 제공되는 Web App을 이용한 App Service입니다.

 

실제 브라우저에서 확인해보면, 로컬에서 확인한 페이지가 아니라 Azure 제공하는 Web App 화면이 나옵니다.

 

이제 처음에 VS Code에서 작성한 App을 Web App에 배포하겠습니다.

더보기

다음과 같은 경우 사용자 지정 시작 파일이 필요합니다.

  • 기본값을 초과하는 추가 인수(--bind=0.0.0.0 --timeout 600)로 Gunicorn 웹 서버를 시작하려는 경우.

  • 앱이 Flask 또는 Django 이외의 프레임워크를 사용하여 빌드되었거나 다른 웹 서버를 사용하려는 경우.

  • 주 코드 파일의 이름이 app.py 또는 *application.py**가 아닌 다른 이름이거나 앱 개체 이름이 app이 아닌 다른 이름인 경우.

 

본 포스팅 예시에서는 3번째 경우에 해당하여 다음과 같이 App Service에서 시작 명령을 입력합니다.

gunicorn --bind=0.0.0.0 --timeout 600 zigi:space

 

VS Code에서 생성한 App Service를 선택하고, 'Deploy to Web App..'을 클릭합니다.

 

Deploy할 App의 폴더를 선택합니다.

 

기존에 배포된 App을 overwrite 할 것인지 확인하는 메시지가 뜨는 데, Deploy를 클릭합니다.

 

이제 Web App으로 Deploy가 되는 것을 볼 수 있습니다. 

'output windows'를 클릭하면 배포되는 자세한 내용을 볼 수 있습니다. 

 

배포가 완료되면 다음과 같이 로컬에서 만든 App이 Web App에 배포된 것을 볼 수 있습니다.