[Azure] WebApp 생성 및 Flask 배포하기

애저(Azure)를 이용하여 WebApp 생성 및 Flask 배포하기

들어가며

• 우선 로컬 PC에 Python을 설치한다.
• Azure WebApp을 애저 포털과 VS Code에서 각각 생성한다.
• VS Code와 로컬 Git 2가지 방식으로 배포해본다.

 

플라스크(Flask)

Flask Logo

• 파이썬으로 작성된 마이크로 웹 프레임워크의 하나로, Werkzeug 툴킷과 Jinja2 템플릿 엔진에 기반을 둔다. (BSD 라이선스)
  • 플라스크는 특별한 도구나 라이브러리가 필요 없기 때문에 마이크로 프레임워크라 부른다.
• 다양한 웹 엔진과 붙여서 쓸 수 있고, 가볍기도 해서 Django와 함께 쓰인다.
  • 풀 스택 웹 프레임워크인 Django와 달리 마이크로 프레임워크라고 해서 보다 기능성이 떨어지는건 결코 아니다.
    • Django에서는 단순히 import해서 편리하게 사용할 수 있는 일부 부가적인 기능들을 Flask에서는 직접 손을 써야할 뿐이다.
    • 따라서 Django에 비해서 Flask는 개발자의 능력과 목적에 맞게 커스텀이 가능하다. 
• 코드도 비교적 단순하고, 관련된 확장 기능들이 많기 때문에 API 서버를 만들기에 매우 편리하다.
• 플라스크 프레임워크를 사용하는 애플리케이션으로 핀터레스트(Pinterest), 레딧(Reddit), 링크드인(LinkedIn) 등이 있다.

 

설치 하기

			
			
			
		
> python -m pip install --upgrade flask

 

간단한 실습 코드

• 다음 코드는 Hello World!를 출력하는 단순한 웹 애플리케이션 코드이다.

			
			
			
		
from flask import Flask
app = Flask(__name__)
 
@app.route("/")
def hello():
    return "Hello World!"

 

참고 사이트

플라스크 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전

Flask - 나무위키

GitHub - pallets/flask: The Python micro framework for building web applications.

Welcome to Flask — Flask Documentation (2.3.x)

 

실습하기

샘플 애플리케이션

이번 실습은 Python 3.5 버전 이상부터 가능하다. (가상 환경 모듈 기능)

 

• 파일 관리자에서 원하는 폴더로 이동한 후, 검색창에 cmd를 입력한다.

 

• 그러면 다음과 같이 해당 경로를 기본 위치로하는 명령 프롬프트 창이 나타나게 된다.

 

• 아래 명령을 명령 프롬프트에서 실행한다.

			
			
			
		
> git clone https://github.com/bit1010/FlaskDockerEx

			
			
			
		
> git clone https://github.com/Azure-Samples/msdocs-python-flask-webapp-quickstart

 

• 그리고 생성된 애플리케이션 폴더로 이동한다.

			
			
			
		
> cd msdocs-python-flask-webapp-quickstart

 

(참고) 명령 프롬프트에서 Visual Studio Code 실행하기

• 현재 경로에서 다음의 명령을 실행하면 현재 위치(.)를 기준으로 Visual Studio Code를 실행할 수 있다.

			
			
			
		
> code .

 

• 로컬 PC에서 앱이 실행되는지 확인해보자. 다음 명령을 실행하여 앱에 대한 가상 환경을 만든다.
  • 파이썬의 가상 환경(venv)에 대한 자세한 설명은 이곳을 참고한다.

			
			
			
		
> python -m venv .venv

			
			
			
		
> .venv\scripts\activate

 

• 다음 명령을 실행하여 종속성을 설치한다.

			
			
			
		
> pip install -r requirements.txt

 

TLS/SSL 에러가 발생할 경우

• 윈도우 환경 변수 설정에서 Scripts 폴더도 추가해줘야 pip가 정상적으로 동작한다.

 

• 앱을 실행한다.

			
			
			
		
> flask run

 

• 웹 브라우저에서 http://localhost:5000로 접속한다.

flask run 명령을 실행한 후, 웹 브라우저 주소를 입력하여 접속한 모습

이름(name)을 적고 [Say Hello] 버튼을 누른 모습

 

Azure WebApp 만들기

애저 포털에서 만들기

• 애저 포털에서 다음과 같이 App Service를 검색한 후 [App Services] 페이지로 이동한다.

• [만들기] 버튼을 누른 후, 다음과 같이 작성한 후 배포한다.
  • [기본] 탭 
    • 리소스 그룹 : 선택 or 생성
    • 이름 : msdocs-python-webapp-quickstart-[이름]
    • 런타임 스택 : Python 3.9
    • 지역 : 한국 중부(Korea Central)
    • 가격 책정 플랜 : 기본(Basic) B1

 

VS Code에서 만들기

VS Code에서 Azure 리소스를 만들려면 Azure Tools 확장을 설치하고, VS Code에서 Azure로 로그인해야 한다. (참고 : 클릭)

 

• 다음 명령을 실행하여 명령 프롬프트에서 VS Code를 실행한다.

			
			
			
		
> code .

 

• 왼쪽 도구 모음에서 [Azure] 아이콘을 클릭한 후, Azure Tools for VS Code 확장을 표시한다.
• [RESOURCES] 섹션에 있는 구독(🔑)을 선택한 후 +(Create Resource...)를 선택한다.
  • 기존 리소스 그룹을 선택해서 생성하려면 App Services 항목을 한 번 클릭한 후, [마우스 우클릭] > [Create New Web App...(Advanced)를 선택한다.

- 이 웹 앱의 이름 msdocs-python-webapp-quickstart-XYZ를 입력한다. (XYZ는 본인 이름의 이니셜로 대체한다. 이 이름은 Azure에서 고유해야 한다.) - 배포할 때 이 이름은 https://<app-name>.azurewebsites.net 도메인으로 사용된다.

 

Azure에 애플리케이션 코드 배포하기

• 명령 프롬프트에서 VS Code를 실행한다. 그리고 Azure Tools for VS Code 확장을 표시한다.

			
			
			
		
> code .

 

• 앞에서 생성한 WebApp을 선택하고 오른쪽 마우스 메뉴 중 [Deploy to Web App...]를 선택한다.

 

• 작업 중인 빠른 시작 폴더를 배포할 폴더로 선택한다.

 

• 다음 경고창이 뜨면 [Yes] 버튼을 클릭한다.

 

• 곧 이어 다음 경고창이 나오면 [Deploy] 버튼을 클릭한다.

 

• [Yes] 버튼을 선택하여 빌드 구성을 업데이트하고 배포 성능을 향상시킨다.

 

• 배포가 완료되면 VS Code의 오른쪽 코너 아래에 알림이 나타난다. [Browse Website] 버튼을 클릭하면 배포된 웹 앱으로 이동할 수 있다.

 

로컬 Git을 사용하여 배포하기

• 웹 앱 내부에 있는 Git 원격 저장소를 활성화해서 로컬 PC에서 원격으로 코드를 푸시(Push)해본다.
  • 참고 : https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes
• 애저 포털에서 애플리케이션의 App Service 리소스 페이지로 이동한다.

 

• 화면의 왼쪽 메뉴에서 [배포 센터]를 클릭한다. 그리고 [소스]를 [로컬 Git]으로 선택한 후, [저장] 버튼을 클릭한다.

 

• 저장하면 페이지가 새로 고쳐지고, 원격 Git 레포지토리의 주소가 표시된다.
• 이 값은 이후의 단계에서 Git 원격을 설정하는데 사용된다. Git Clone Uri의 값을 메모장에 복사한다. 

 

• [배포 센터] 페이지에서 [로컬 Git/FTPS 자격 증명] 탭으로 이동한다.
• 그리고 애플리케이션 범위 자격 증명 구간에서 사용자 이름 및 암호를 찾는다.
  • 사용자 이름은 $로 시작한다.
  • 처음으로 원격 Git 레포지토리에 코드를 푸시하는 경우, 원격 레포지토리에 인증하려면 이러한 자격 증명이 필요하다.

 

• 로컬 PC에서 명령 프롬프트 창(혹은 VS Code의 터미널)으로 이동한 후, 이전에 복사한 Git Clone Uri 주소값으로 Git 원격 저장소를 추가한다.

			
			
			
		
> git remote add azure <git-clone-url>

 

• 그리고 다음 명령을 실행하여 확인한다. 추가되었다면 azure와 origin이 출력된다.

			
			
			
		
> git remote

 

• 깃허브(GitHub)의 기본 브랜치는 main이지만, AppService 내부의 Git은 master를 기본 브랜치로 사용하고 있으므로, 브랜치를 선택해서 푸시해야 한다.
  • 처음 푸시를 진행할 때, 자격 증명에서 복사한 username과 password를 통해 로그인을 해야 한다.

			
			
			
		
> git push azure main:master

 

• 위의 명령을 입력하면, 아래 사진과 같이 Git Credential Manager 창이 뜬다. [애플리케이션 범위] 공간의 사용자 이름과 암호를 넣어준 후, [Continue] 버튼을 클릭한다.

 

웹 앱 메뉴에서 [구성]>애플리케이션 설정] 페이지에서 DEPLOYMENT_BRANCH를 추가해서 기본 브랜치를 변경할 수 있다. (참고 : 클릭)

 

앱으로 이동하기

• 웹 브라우저에서 배포된 애플리케이션 주소(http://<app-name>.azurewebsites.net)로 이동한다.
• 기본 웹 페이지가 보이면, 1분을 기다렸다가 브라우저를 새로 고침한다.
  • 크롬에서 새 시크릿 창으로 띄우면 바로 확인 가능하다.

 

로그 스트리밍

• Azure App Service는 애플리케이션 문제를 진단하는데 도움이 되도록 모든 메시지 출력을 콘솔로 캡처한다.
• 샘플 앱에는 이 기능을 보여주는 print() 문이 포함되어 있다.

 

Flask

			
			
			
		
app = Flask(__name__)
 
@app.route('/')
def index():
   print('Request for index page received')
   return render_template('index.html')
 
@app.route('/favicon.ico')
def favicon():
    return send_from_directory(os.path.join(app.root_path, 'static'),
                               'favicon.ico', mimetype='image/vnd.microsoft.icon')
 
@app.route('/hello', methods=['POST'])
def hello():
   name = request.form.get('name')

 

Django

			
			
			
		
def index(request):
    print('Request for index page received')
    return render(request, 'hello_azure/index.html')
 
@csrf_exempt
def hello(request):
    if request.method == 'POST':
        name = request.POST.get('name')
        
        if name is None or name == '':
            print("Request for hello page received with no name or blank name -- redirecting")
            return redirect('index')
        else:
            print("Request for hello page received with name=%s" % name)
            context = {'name': name }
            return render(request, 'hello_azure/hello.html', context)
    else:

 

• App Service 진단 로그의 기록은 애저 포털, VS Code에서 또는 Azure CLI를 사용하여 검토할 수 있다.
• 먼저, VS Code의 Azure App Service에서 스트리밍 로그를 사용하도록 설정해야 한다.
• 배포한 앱 서비스의 인스턴스를 한 번 클릭한 후, 마우스 오른쪽 버튼을 누르고 [Start Streaming Logs] 항목을 클릭한다.

• 콘솔 로그는 VS Code의 출력 창에 표시된다. 앱에서 홈페이지를 새로 고치거나 다른 요청을 시도하여 로그 메시지를 생성해본다. 앱에서 생성된 로그 메시지와 서비스에서 생성한 다른 메시지가 출력된다.

 

 

 

 

 

 

 

 

 

참고 사이트

빠른 시작: Azure에 Python(Django 또는 Flask) 웹앱 배포 - Azure App Service

GitHub - Azure-Samples/msdocs-python-flask-webapp-quickstart: Contains the sample application for the App Service Quickstart in