Vue.js & Flask - 개발환경구축하기

vue-flask-docker

free admin template인 vue-flask-docker이다.

유료로 구매한 템플릿이 있지만 소스코드를 공개 할 수 없을 것 같아 free 라이센스를 가진 템플릿을 사용해서 vue와 관련된 것들을 공유 해 보려고 한다.

개발 환경 구축이기 때문에, front/back 모두 개발환경으로 구축을 시작했고 Docker를 사용해서 작업을 했지만 소스를 수정했을 때 바로 적용 될 수 있도록 volume 옵션을 주었다.

• volume : Docker에 올린 파일과 연동 할 수 있는 위치를 설정 해 주는 옵션

Vue - Flask 구축하기

Download

소스 파일은 아래에 있다. 스스로 구축 해도 된다. -> Github Soruce

$ git clone https://github.com/paullee714/flask-projects.git

Structure

(다운받지 않았을 경우) 아래와 같은 프로젝트 구조를 만들 어 줄 것이다.

flask-vue-argon 폴더 아래에, backend, frontend 폴더를 만들어준다.

flask-vue-argon
├── README.md
├── backend # 파이썬 플라스크 백엔드 폴더
├── docker-compose.yml
├── frontend # vue.js argon admin 템플릿
└── requirements.txt

Frontend - Vue.js (argon template)

Download & build Templates

Vue.js를 사용할 여러 템플릿 중, 무료 템플릿으로 공개 된 argon 템플릿을 다운받으려고 한다.

Vue Argon Dashboard by Creative Tim

여기서 다운 받았다.

github에서 다운 받으려면 아래의 주소로 git clone 해 주면 된다.

$ git clone https://github.com/creativetimofficial/vue-argon-dashboard.git

다운받은 폴더를 flask-vue-argon 밑의 frontend에 복사 해서 아래와 같이 넣어준다.

flask-vue-argon/frontend
├── CHANGELOG.md
├── ISSUES_TEMPLATE.md
├── LICENSE.md
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── public
├── src
└── vue.config.js

Build Templates

package.json이 있는 폴더에서 templates를 build 해 주고 실행 시켜 주겠다.

$ yarn install && yarn run serve

위의 명령어가 잘 실행이 되었다면 종료시켜주고 Docker를 만들 준비를 해 주겠다.

Make Dockerfile

front.dev.Dockerfile 파일을 frontend 폴더에 작성 해 주겠다.

frontend/front.dev.Dockerfile

FROM node
MAINTAINER ba93love@gmail.com
WORKDIR /app
ADD . ./
CMD yarn install && yarn run serve
EXPOSE 8080

Backend - Python (Flask)

다음과 같이 구성 하려고 한다.

.
├── app.py
├── .env
├── back.dev.Dockerfile
└── requirements.txt

Setup Virtualenv

파이썬 개발이기 때문에 편리한 개발을 위해서 virtualenv를 설정 해 줄 것이다.

$ python3 -m pip install virtualenv

$ virtualenv venv && source venv/bin/activate

(venv)$ python3 -m pip install flask flask-cors python-dotenv

.env(dotenv)

FLASK_ENV=development
FLASK_DEBUG=True
FLASK_APP=app.py
FLASK_RUN_PORT=5000

backend/app.py

from flask import Flask, jsonify
from flask_cors import CORS

import os

# instantiate the app
app = Flask(__name__)

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

# sanity check route
@app.route('/', methods=['GET'])
def test_router():

    return jsonify('This is Docker Test developments Server!')

@app.route('/health_check', methods=['GET'])
def health_check():
    return jsonify('good')

if __name__ == '__main__':
    app.run(host='0.0.0.0',port=os.getenv('FLASK_RUN_PORT'),debug=os.getenv('FLASK_DEBUG'))

Make Dockerfile

backend/back.dev.Dockerfile 을 만들어 주겠다

FROM python:3

WORKDIR /www

ADD . .

RUN python3 -m pip install -U pip
RUN pip3 install -r requirements.txt

CMD ["python3",  "app.py"]

Binding Front - Back

Back과 Front를 각각의 Dockerfile로 작성 해 주었으니까, 이제 이 두 개의 도커파일이 실행 될 때 한번에 실행 되고 서로 이어 질 수 있도록 설정을 해 주려고 한다.

지금까지 작성한 프로젝트 전체의 구조는 다음과 같다.

.
├── README.md
├── backend
│   ├── app.py
│   ├── back.dev.Dockerfile
│   └── requirements.txt
├── docker-compose.yml
├── frontend
│   ├── CHANGELOG.md
│   ├── ISSUES_TEMPLATE.md
│   ├── LICENSE.md
│   ├── README.md
│   ├── babel.config.js
│   ├── front.dev.Dockerfile
│   ├── node_modules
│   ├── package.json
│   ├── public
│   ├── src
│   ├── vue.config.js
│   └── yarn.lock
└── requirements.txt

이제 더 필요 한 것은 docker-compose.yml이다.

프로젝트 루트 폴더 ( backend와 frontend 파일이 있는 프로젝트 루트 폴더)에 작성 해 주도록 하겠다.

Make docker-compose.yml

version: '3.7'

services:
  frontend:
    container_name: my-front
    build:
      context: frontend
      dockerfile: front.dev.Dockerfile
    expose:
      - 8080
    ports:
      - 8080:8080
    volumes:
      - ./frontend:/app

  backend:
    container_name: my-back
    build:
      context: backend
      dockerfile: back.dev.Dockerfile
    expose:
      - 5000
    ports:
      - 5000:5000
    volumes:
    - ./backend:/www

프로젝트 루트 폴더에서, docker-compose를 실행 해 주도록 하겠다.

Build & Run

$ docker-compose --build up 

시간이 꽤 걸린다..

연동 했으니까, 이제 vue를 공부하면서 admin Template을 사용해서 개발 해 봐야겠다.