[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