vue+flask 시작. python flask와 연동.

http://qkqhxla1.tistory.com/961에서 언급했듯이 목적은 flask를 백앤드로 하고, vue를 프론트로 돌리는거다.

파이썬 2버전이고, flask설치를 하고 app.py를 프로젝트의 가장 위에 만들었다.(사실 어디에만들어야할지 잘몰라서 여기에 만듬.) 

그리고 우리팀의 위키와 여러가지 삽질해서 flask코드를 만들었다.

# -*- coding: utf-8 -*-

from flask import Flask
import os

class MyFlask(Flask):
  jinja_options = Flask.jinja_options.copy()
  jinja_options.update(dict(
    block_start_string='{%',
    block_end_string='%}',
    variable_start_string='((',
    variable_end_string='))',
    comment_start_string='{#',
    comment_end_string='#}',
  ))

ROOT_PATH = os.path.dirname(os.path.abspath(__file__))
STATIC_PATH = os.path.join(ROOT_PATH, 'dist')

app = MyFlask(__name__, static_folder=STATIC_PATH, static_url_path='')


@app.route('/')
def index():
  return app.send_static_file('index.html')

if __name__ == '__main__':
  app.run(host='127.0.0.1', debug=True)

flask 코드는 http://flask.pocoo.org/docs/1.0/quickstart/ 을 보면 알겠지만 매우 간단하다. 왜 위의 코드를 추가했냐면...

1. Flask를 상속받은 MyFlask를 만든 이유는 뷰 튜토리얼 : https://kr.vuejs.org/v2/guide/ 을 보면 알수 있듯이 뷰에서 데이터를 렌더링할때 {{ message }}처럼 렌더링을 하는데, Flask에서 쓰는 jinsa2엔진도 렌더링하는 방법이 vue와 같다. jinsa 튜토리얼 : http://jinja.pocoo.org/docs/2.10/templates/ 그래서 Flask를 상속받아서 렌더링하는 방법을 위처럼 바꿔 줘야 한다.
그리고 Flask인스턴스를 만들때 static_folder와 static_url_path를 전달해줬는데, 이 이유는 앞에서 npm run build로 웹 파일들을 컴파일(?)해줄때 결과물이 dist아래에 생성된다.

하지만 flask에서 static한 파일 리스트를 찾을때 프로젝트의 루트에 있는 static폴더를 자동으로 참조한다.
http://flask.pocoo.org/docs/1.0/quickstart/ (Static Files 부분 참조.) 그런데 우리의 결과물은 dist안에 있다. dist안에 있다는걸 알려주기 위해 static_folder와 static_url_path 를 설정해준다.

이후 send_static_file함수로 index.html을 참조한다 하면 dist안에 있는 index.html을 참조하게 된다.