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

어떤환경에서든지 동작하려면, 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