[Flask tutorial] 01. Flask 시작하기

2019. 12. 20. 14:01Python/Flask

반응형

Flask

flask 는 python으로 작성된 web framework 로 특별한 도구나 라이브러리 없이 필요에 따라 패키지를 추가하는 micro 프레임워크입니다.
Apache Httpd나 Nginx와 같은 웹서버에 올리기 위해서는 WSGI라는 미들웨어를 이용해야 합니다.

  1. Flask 웹 애플리케이션 기본 구조 생성
  2. Flask 웹 애플이케이션 로컬 환경에서 실행
  3. 형상관리 툴에(ex. GitHub) 소스 push
  4. 실서버(CentOS 7)에 소스 다운 후 애플리케이션 실행
  5. WSGI 미들웨어를 이용하여 웹서버와 Flask 웹 애플리케이션 연결(웹서버가 설치되어 있지 않을 경우 웹서버를 먼저 설치)
  6. 웹서버에서 가상 호스팅 설정

실서버(CentOS 7)에서 Flask 웹 애플리케이션을 구동시키기 위해 위의 과정을 거치게 될 텐데,
이 중, 실서버에 애플리케이션을 올리는 부분은 다음에 다루도록 하고, 이번 포스팅에서는 로컬에서 간단히 웹 애플리케이션을 실행해보고 형상관리 툴에 올리는 과정을 다룹니다.(1~3)

  1. Flask 프로젝트 및 가상환경 생성하기
  2. 가상환경에 flask 패키지 설치
    2-1) PyCharm 툴을 이용하여 설치
    2-2) PyCharm terminal을 이용하여 설치
    2-3) terminal을 이용하여 설치
  3. Hello world 띄우기
  4. index 템플릿 페이지 렌더링하기
  5. 형상관리 툴에 소스 올리기
    4-1) git 초기화
    4-2) Ignore resources 설정 및 freeze명령어로 패키지 목록 기록
    4-3) commit, github 원격 저장소와 추가 및 push

1. Flask 프로젝트 및 가상환경 생성하기

01

PyCharm IDE를 이용하여 Flask 프로젝트를 만들어 볼 것입니다.

이때, 가상환경을 새로 생성하거나, 기존에 생성한 가상환경을 이용할 수 있습니다.
Virtualenv나 Conda(아나콘다) 명령어를 이용하여 가상환경을 만들 수 있으며
Base Interpreter에서 가상환경을 생성할 Python 버전도 설정할 수 있습니다.

터미널로 가상환경을 직접 생성하고자 한다면 아래와 같이 설정하면 됩니다.
--python 옵션을 이용하여 파이썬 버전을 설정합니다.

D:\jini_box\python\flask_app\demo_flask>virtualenv venv --python=C:\Users\jini\AppData\Local\Programs\Python\Python36-32\python.exe

02

03

프로젝트 내에 프로젝트 이름과 동일한 이름으로 Python Package를 생성합니다.
(Python 패키지로 디렉토리를 생성할 경우, 자동으로 __init__.py 파일이 생성됩니다.)

생성한 파이썬 패키지 내에 static, templates 디렉토리를 생성합니다.
그리고 프로젝트에 패키지를 실행할 app_start.py 파일을 생성합니다.

04

그러면, 위와같은 가장 기본적인 형태의 Flask 앱 구조가 완성됩니다.


2. 가상환경에 flask 패키지 설치

flask 프레임워크를 사용하기 위해 flask 패키지를 설치합니다.
이때, 패키지 설치는 전역이 아닌, demo-flask 애플리케이션만을 위한 가상 환경에 설치 합니다.
가상환경을 이용하는 이유는, python 버전, 패키지 버전 등을 각 python 애플리케이션 별로 설정하기 위함입니다.
(Spring에서 프로젝트별로 Maven repository를 별도로 뒀던 것과 같은 개념입니다.)

demo_flask 웹 애플리케이션 하위에 생성한 venvflask 패키지를 설치합니다.

flask 프레임워크를 사용하기 위해 Flask 패키지를 가상환경에 설치합니다.


2-1) PyCharm 툴을 이용하여 설치

11

12

PyCharm의 Settings에 들어가서 UI로 패키지를 설치할수도 있습니다.
PyCharm에서 패키지를 설치할 때에는 가상환경이 자동으로 activate되어있는 상태이기 때문에 별도로 가상환경을 설정하지 않아도 되어서 편리합니다.

위에서 + 버튼을 눌러 flask를 검색한 후 설치하면 됩니다.


2-2) PyCharm terminal을 이용하여 설치

13

PyCharm 터미널에서는 우리가 프로젝트를 생성하면서 만들었던 가상환경이 자동으로 activate 되어있는 상태이기 때문에 바로 pip 명령어로 패키지를 설치할 수 있습니다.


2-3) terminal을 이용하여 설치

D:\jini_box\python\flask_app\demo_flask>venv\Scripts\activate
(venv) D:\jini_box\python\flask_app\demo_flask> pip install flask

※ 참고로 Unix 운영체제에서는 activate 하기 위해 위해 source를 사용해야합니다.
source venv/bin/activate


3. Hello world 띄우기

from flask import Flask

app = Flask(__name__)


@app.route("/")
def index():
    return "Hello world"

demo_flask 패키지 내의 __init__.py 파일에 Flask 클래스를 import 하고 app 인스턴스를 생성합니다.

route 데코레이터로 RequestMapping을 설정합니다.
리턴 타입에 따라 템플릿 뷰 페이지를 띄우거나 데이터를 리턴합니다.

이번 예제에서는 간단하게 Hello world메시지를 리턴하는 메서드를 생성합니다.


그리고, 이 demo_flask 패키지를 실행하는 app_start.py 파일을 설정해봅시다.

from demo_flask import app

if __name__ == "__main__":
    app.run(host="0.0.0.0")

demo_flask 패키지로부터 app 인스턴스를 import하고 app 인스턴스를 실행하는 코드를 작성합니다.


이제 hello world를 띄우기 위한 기본 설정이 완료되었습니다.
app_start.py 파일을 실행해봅시다.

(venv) D:\jini_box\python\flask_app\demo_flask>python app_start.py
 * Serving Flask app "demo_flask" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)

※ demo_flask 프로젝트의 가상환경을 activate 시킨 후 실행해야합니다.


url 또는 curl 명령어로 http://localhost:5000 또는 http://localhost:5000/에 접속해봅니다.

05

curl -X GET "http://localhost:5000"
Hello world

3. index 템플릿 페이지 렌더링하기

간단하게 말하자면 index 페이지 띄우기라고 생각하면 됩니다.
flask 프레임워크에서는 Jinja를 이용하여 html을 동적으로 생성해줍니다.
동적생성은, 인자를 넘겨받아 html을 url 응답시 새로 그려내는 것을 의미합니다.

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/")
def index():
    return render_template('index.html')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index Page</title>
</head>
<body>
    <h1>index Page</h1>
    <div>hello world</div>
</body>
</html>

render_template 메서드에 첫번째 인자값으로 템플릿 페이지를, 그리고 그 뒤에는 template context 들을 넣습니다.
이중, 템플릿페이지 명은 필수적으로 입력해야 합니다.
만일, 전달할 template context가 없다면 위와 같이 생략해도 됩니다.

페이지의 title이나 div 내의 내용을 template context로부터 전달받아 동적으로 템플릿을 그리는 것은 매우 간단합니다.

from flask import Flask
from flask import render_template

app = Flask(__name__)


@app.route("/")
def index():
    args = {'title': 'index Page', 'contents': 'hello world'}
    return render_template('index.html', **args)

바로 ln 10과 같이 args를 넘겨주면 됩니다.
위에서는 template context를 변수에 담아서 **를 이용해서 풀어서 보냈지만 아래와 같이 key=value의 나열 형태로 보내도 됩니다.

return render_template('index.html', title='index Page', contents='hello world')

06

※ Jinja2 템플릿을 활용하는 방법은 Jinja2 Tutorial을 참고해주세요.


4. 형상관리 툴에 소스 올리기

먼저 demo_flask 웹 애플리케이션 디렉토리 위치로 이동한 후, 웹 애플리케이션을 형상관리 툴에 올립니다.
형상관리 툴 중, GitHub를 이용하여 올려보도록 하겠습니다.


4-1) git 초기화

git init

먼저, github관련 설정들이 저장될 .git폴더 생성을 위해 git init을 실행합니다.


4-2) Ignore resources 설정 및 freeze명령어로 패키지 목록 기록

git status
...
Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .idea/
        app_start.py
        demo_flask/
        venv/

git status를 이용하면, 프로젝트 내에서 새로 추가된 파일, 변경된 파일, 삭제된 파일 등의 정보를 확인 할 수 있습니다.

09

이중, PyCharm 관련 설정이 저장되는 .idea/ 폴더 하위와, OS 별로 차이가 있을 가상환경은 소스 업로드에서 제외시킵니다.

vim .gitignore

.idea/
venv/

가상환경을 소스 업로드에서 제외시키는 대신, 이 웹 애플리케이션에서 이용하고 있는 패키지 목록을 기록해야할 필요가 있습니다.

pip freeze > requirements.txt

pip freeze 명령으로 requirements.txt 파일에 설치된 패키지 목록을 저장합니다.


Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore
        app_start.py
        demo_flask/
        requirements.txt

그리고 다시 git status를 확인하면 위에서 제외시킨 디렉토리들이 제외처리된 것을 확인할 수 있습니다.

※ 이 외에도 Python 개발 중 생성되는 여러 구성파일 및 임시 파일들이 있습니다.
여기를 참고하여 .gitignore 설정하면 됩니다.


4-3) commit, github 원격 저장소와 추가 및 push

git add .
git commit -m "[Flask tutorial] 01. Flask 시작하기"
git remote add origin git@github.com:jiniya22/demo_flask.git
git push -u origin master

웹 애플리케이션 폴더 내의 모든 파일을 stage 에 올리고, 코멘트와 함께 commit 합니다.
그리고 gitHub 원격 저장소를 추가한 후 커밋 내용을 push 합니다.

10

이제 GitHub에 코드가 올라간 것을 확인해 볼 수 있습니다.

728x90
반응형