Flask + Vue 개발환경을 구축해보자. 참고로 기본적인 와꾸는 java에서 parcel+vue+springboot 세팅하는거랑 비슷해서 겹치는 설명은 다 뺐음.
parcel+vue+springboot 환경설정하기

1. flask 환경설정

우선 flask쪽에서 resource 폴더를 물수 있도록 아래와 같은 설정을 해준다.

flask서버를 구동하는 파일을 app.py라고하면 아래와 같은 내용이 app.py에 포함되어야한다.

import os
from flask import Flask
from flask import jsonify
from flask import request
from flask import send_file
from flask import make_response
from flask_cors import CORS

# configuration
DEBUG = True
ROOT_PATH = os.path.dirname(os.path.abspath(__file__))
STATIC_PATH = os.path.join(ROOT_PATH, 'dist')

# instantiate the app
app = Flask(__name__, static_folder=STATIC_PATH, static_url_path='')
app.config.from_object(__name__)

# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}})

폴더가 dist 인 이유는 java에서 static폴더 국룰이 resources/static 이듯 파이선에서는 dist폴더를 주로 사용하는듯? 어쨌든 저렇게 설정하면 루트폴더 아래 dist폴더를 바라보게됨.

2. frontend 폴더설정

프론트엔드 폴더를 따로 만들고 개발하는것은 java설정과 동일하므로 생략한다.

다만 package.json 설정이 아래와 같이 달라짐

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "watch": "parcel watch index.html --no-source-maps --out-dir ../dist --public-url ./ --out-file index.html",
    "deploy": "parcel build index.html --no-source-maps --out-dir ../dist --public-url ./ --out-file index.html"
  },

이렇게 하면 dist폴더에 빌드한 vue파일이 들어간다.

1. flask 환경설정

2. frontend 폴더설정

Share this post