Old Branch

Docker를 사용한 Vue - Flask 개발서버 작성 (front-back 연동)

woolbro 2020. 7. 23. 10:52
반응형

어떤환경에서든지 동작하려면, Docker가 편하다. Front-Back 엔드단을 구축하면서 도커로 삽질을 많이했는데, 정리해봐야겠다.

  • 적었듯이 개발 환경 구축이다. 프로덕션이 아니기 때문에 이대로 만들어서 배포하면 안된다.
  • 나처럼 개발환경 배포만을 위해서 도커를 작성하는 사람들이 있지 않을까 하여 슈퍼 구글링으로 여러가지 방법을 모아보았다.
  • 프로덕션 배포는, 개발단이 완료 된 후에 한번 더 작업을 하려고 한다.
  • 되지 않는 것이 있거나 궁금한 점은 댓글이나 메일(ba93love@gmail.com)을 주면 너무 감사할 것 같다.

Vue Docker 만들기와 Backend 연동

Project init

  • backend 폴더에 api 서버를 위치 시키려고 한다. 사용한 서버는 Flask 서버이다.
  • backend와 frontend에 각각 dockerfile을 위치 시켰다.
  • frontend는 vue framework를 구매하고, 로컬에서 빌드 및 실행 확인을 했다. 나는 Vuexy를 사용했다.
├── README.md
├── backend
│   ├── app.py
│   ├── back.dev.Dockerfile
│   ├── requirements.txt
│   └── venv
├── docker-compose.yml
└── frontend
    ├── auth_config.json
    ├── babel.config.js
    ├── front.dev.Dockerfile
    ├── node_modules
    ├── package.json
    ├── postcss.config.js
    ├── .eslintrc.json
    ├── public
    ├── src
    ├── tailwind.config.js
    ├── themeConfig.js
    └── vue.config.js
  • 여기서 중요한? 파일은 .eslintrc.json인데, 경고를 무시하고 vue를 실행시켜 준다. 여러 경고가 뜨지만, 어떻게 해결하는지 잘 모르겠다ㅜㅜ .... 물어봤을때 화내지않고 알려주실분 구합니다...
//   이파일은, frontend/.eslintrc.json 파일이다.
{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

Vue Docker 만들기

frontend/front.dev.Dockerfile

FROM node:lts-alpine
MAINTAINER ba93love@gmail.com
WORKDIR /app
ADD package.json ./
ADD . ./
CMD yarn install && yarn run serve
EXPOSE 8080

  • WORKDIR을 app으로 잡고 app 밑에서 작업을 했다

  • package.json 과 yarn.lock파일을 app으로 넣어주는 ADD 작업을 했다

  • 솔직하게 yarn.lock이 필요한지 확실하지 않다.

  • 지금 가지고 있는 파일경로(frontend)의 모든 파일을 app디렉토리에 ADD 해준다

  • yarn install && yarn run serve로 설치와 개발환경 서버 동작을 진행 해 준다.

  • yarn run serve는, 복사 해 준 package.json에 있는 scripts 덕분에 실행이 가능하다.

      ...
  "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    },
  ...

Docker build && Docker Run!!!!

  • 개발 환경이기 때문에, Docker Run에 좀 더 신경을 썼다.
  • 나의 디렉토리에서 수정 할 때, Docker에서도 수정이 될 수 있도록 —volume 옵션을 넣어서 작업했다.

🛠️Docker build

$ docker build -f front.dev.Dockerfile -t docker-vue-test .

🏃 Docker run

$ docker run -p 8080:8080 -i --rm --volume $(pwd):/app docker-vue-test

성공적으로 build와 실행 확인이 된다면 아래와 같은 화면이 나오면서, 접속이 가능해진다다닷

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
<s> [webpack.Progress] 100% 

  App running at:
  - Local:   http://localhost:8080/ 

  It seems you are running Vue CLI inside a container.
  Access the dev server via http://localhost:<your container's external mapped port>/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

Backend단 Docker 만들기

  • 우선 위에서 보았던 backend 구조이다.
├── backend
│   ├── .env
│   ├── app.py
│   ├── back.dev.Dockerfile
│   ├── requirements.txt
│   └── venv

  • 개발 연동을 위해서 로컬 venv를 적용했다. 실제로 Docker에서는 venv가 아닌 pure python 환경 일 것이다

  •  .env

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

  • requirements.txt

      click==7.1.2
  Flask==1.1.2
  Flask-Cors==3.0.8
  itsdangerous==1.1.0
  Jinja2==2.11.2
  MarkupSafe==1.1.1
  python-dotenv==0.14.0
  six==1.15.0
  Werkzeug==1.0.1

  • 로컬 개발 환경 세팅 및 flask 작성

      # 로컬개발환경 구축
  $ python3 -m pip install virtualenv
  $ virtualenv venv && source venv/bin/activate
  (venv)$ pip3 install -r requirements.txt

  • flask 서버 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'))

  • Backend단 Dockerfile은 마찬가지로, backend폴더에 넣을것이고, python flask 서버를 실행 시켜 주도록 할 것이다.

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"]

Dockerfile build && run

마찬가지로, build 보다 run 세팅을 더 신경 써 줄 것이다. 로컬 환경과 연동을 위해 —volume 옵션을 넣었다.

$ docker build -t flask-dev -f back.dev.Dockerfile .
$ docker run -p 5000:5000 --volume=$(pwd):/www flask-dev

Vue Docker ←→ Backend 연동

Dockerfile로 각각 컨테이너를 생성해서 올려 줄 수 있지만, 이 때에 주의 할 점은 같은 네트워크 상에 위치 할 수 있도록 설정을 해 주어야 한다는 것이다.

여러 설정을 따로 하지 않을 수 있도록 docker-compose로 한번에 두 개의 Dockerfile을 만들어 주려고 한다.

docker-compose.yml

  • docker-compose는 backend, frontend의 Dockerfile과 다르게 각 폴더의 상위 폴더에 존재한다.

      ├── backend
  │   ├── back.dev.Dockerfile
  ├── docker-compose.yml
  └── frontend
      ├── front.dev.Dockerfile

위치를 고려하여, context와 Dockerfile 루트를 설정 해 준다

  • 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 up!

  • 말 그대로 docker-compose up을 해 줄 것이다.
  • 이미 컨테이너 내부에서는 하나의 네트워크로 frontend와 backend 서비스가 묶여 있을 것이기 때문에 설정 해 줄 것이 별로 없다.
$ docker-compose up --build

빌드 과정과 이후 실행 과정에서 생기는 모든 로그를 보고 싶다면 위처럼 실행 해도 된다.

하지만 백그라운드에서 돌아가는 것을 원한다면 -d 옵션을 넣어주면 된다.

$ docker-compose up --build -d

실행 종료는 compose 파일 위치에서 down 을 해 주면 된다.

$ docker-compose down
저작자표시 비영리 변경금지