6. Flask로 웹 애플리케이션 만들기 (AWS + Flask + 계산기 서버 구축해보기)

1. 웹 애플리케이션 구조

우리는 아래와 같은 구조의 계산기 웹 애플리케이션을 만들 것이다. Apache2(웹 서버) 연결은 이후에 할 것이다. 

웹 애플리케이션 구조

2. 깃허브 설치 및 계산기 코드 가져오기

내가 만들어 놓은 계산기 코드이다.

GitHub - doongu/cal_test: cal_test

 

Ubuntu에서 해당 코드를 가져오기 위해 아래 명령어로 git을 설치 해주자.

이후 위 링크를 들어가 Clone(복제를 위해) 아래 이미지에 체크되어 있는 부분을 복사해준다.

 

이제 ubuntu에 아래 명령어 git clone '복사한 url'을 입력해준다. 확인해보면 github에 있는 cal_test 프로젝트가 내 ubuntu로 옮겨진 것을 확인할 수 있다.

 

이제 python3 app.py로 실행하고 브라우저로 접속해보면 미리 만들어 놓은 HTML이 나오게 된다. 접속 기록을 보게 되면 ' / '이라는 Path에 HTTP/1.1 버전으로 GET 요청이 들어온 것을 확인할 수 있다. 이는 누군가 홈페이지를 '접속' 했을 때 기본적으로 GET 요청이 이루어지기 때문이다. 그에 대한 응답으로 애플리케이션은 HTTP 요청 상태가 잘 되었다는 코드 200을 반환한다.

 

 하지만 바로 밑에 /bourbon이라는 Path에 HTTP/1.1 버전으로 GET 요청이 들어온 것도 확인할 수 있다. 하지만 그에 대한 응답으로 경로를 찾을 수 없는 404 에러 코드를 반환했다. 그 이유는 /bourbon이라는 경로를 코드에서 설정해주지 않았기 때문이다.

input num페이지

그에 대한 접속기록

 

코드에 대해서 알아보기 전에 결과를 제출해보자. input num페이지에 숫자를 입력하고, 결과를 제출해보면 아래와 같이 두 숫자를 더한 결괏값이 나온 것을 알 수 있다. 여기서 봐야 할 점은 버튼을 누름과 동시에 url의 path부분이 /answer로 변경되었다.

result 페이지

결과를 제출함에 따라 요청이 다시 집계 되었다.

 

3. 코드 확인과 이해

동작이 되는 것을 확인했으니, 코드에 대한 설명과 데이터가 어떤 흐름으로 서버로 가서 결과값이 나오게 되었는지 확인해볼 필요가 있다. 우선 git에서 다운로드한 디렉터리 구조를 살펴보자

cal_test/

templates폴더와 app.py로 이루어져 있다. app.py 코드를 살펴보자

 

cal_test/app.py

from flask import Flask , redirect, url_for, request, render_template, jsonify # Flask 모듈을 import 한다.
app = Flask(__name__) # Flask 객체를 생성한다.


@app.route('/') # / 경로로 요청이 들어오게 되면 아래 함수를 실행한다.
def hello_world():
    return render_template("input.html") # 기본경로(templates/)의 input.html을 반환한다.

@app.route('/answer', methods = ["POST"]) # /answer 경로로 POST요청이 들어오게 되면 아래 함수를 실행한다.
def asd():
    num1 = request.form['num1'] # 요청과 함께 보낸 form 데이터의 name이 num1인 변수의 값을 python변수 num1에 저장한다.
    num2 = request.form['num2'] # 요청과 함께 보낸 form 데이터의 name이 num2인 변수의 값을 python변수 num2에 저장한다.
    
    return render_template("answer.html", answer = int(num1) + int(num2)) # 두 값을 더하여 answer.html에 전달하고, 이 answer.html을 클라이언트에게 반환한다.

if __name__ == '__main__': # python3로 이 파일이 직접 실행될 경우에만 아래 구문이 실행된다.

	# Flask 객체를 실행한다. 80포트를 사용하며, 디버그 모드를 지원하고, 모든 외부 IP가 접속할 수 있다.(0.0.0.0)
    app.run( port=80, debug= True, host='0.0.0.0')

 

cal_test/templates/

answer.html과 input.html이 있다. flask는 실행하는 app.py 바로 옆에 있는 templates폴더에 static 한 요소를 찾는다. 이게 기본 값이며 원하는 폴더로 변경할 수 있다.

 

cal_test/templates/input.html

간단하게 form 태그만 확인하면 된다. 이는 /answer 경로에 POST 요청으로 input에 담긴 데이터를 보내는 태그이다.

Flask는 요청이 들어오면 input의 name값으로 변수를 식별한다.

<div class="wrapper">
    
    <form action="/answer", method = "POST">       
      <h2 class="form-signin-heading">Input Num</h2>
      <input type="text" class="form-control" name="num1" placeholder="num1" required="" autofocus="" />
      <input type="text" class="form-control" name="num2" placeholder="num2" required=""/>      

      <button class="btn btn-lg btn-primary btn-block" type="submit">result</button>   
    </form>
</div>

 

cal_test/templates/answer.html

{{ answer }}는 html에 Flask가 직접 변수를 넣을 수 있도록 설정하는 구문이다. 이를 JinJa방식이라고 하는데, 해당 구문을 통해 쉽게 더한 결과 값을 Flask에서 answer에 값을 넣어볼 수 있다.

<canvas id="text" width="700" height="200"></canvas>

<div id="html-text" class="text">
  {{ answer }}
</div>

4. 데이터는 어떻게 흘렀을까?

데이터는 Flask의 로직 구조에 의해 움직인다. Flask에서 / GET 요청에 대한 로직이 있고, input.html을 반환해주면 그 html안에는 /answer POST에 대해 요청하는 로직이 짜여 있으며 Flask에도 /answer POST에 대해 들어오는 요청을 처리하는 코드가 짜여있다.

결론적으로, 아래와 같이 데이터가 움직이고 사용자의 화면에 결괏값이 나타나게 된다.

 

이제 WSGI를 사용해 Apache2와 Flask를 연동해보고, 클라이언트는 Apache2를 통해 들어오도록 하자.