[Docker 위의 웹서버] 프로젝트 세팅 (5) - vue 도커라이징

GITHUB

paullee714/Flask-Vue-ELK-Mongo-Docker

Structure

아래와 같은 구조로 진행하고 있다. 오늘 작업 할 내용은

docker-compose.yml의 수정과 web/front/front.Dockerfile을 만들어 줄 것이고

동작 확인을 위해 back-front연동을 해 보려고 한다.

├── ELK
│   ├── elasticsearch
│   │   ├── config
│   │   ├── data
│   │   └── elastic.Dockerfile
│   ├── kibana
│   │   ├── config
│   │   └── kibana.Dockerfile
│   └── logstash
│       ├── config
│       ├── logstash.Dockerfile
│       └── pipeline
├── README.md
├── docker-compose.yml
└── web
    ├── back
    │   ├── app.py
    │   ├── back.Dockerfile
    │   ├── back_lib
    │   ├── requirements.txt
    │   ├── route
    │   ├── util
    │   ├── uwsgi.ini
    │   └── venv
    └── front
        ├── README.md
        ├── babel.config.js
        ├── front.Dockerfile
        ├── nginx
        ├── node_modules
        ├── package.json
        ├── public
        ├── src
        └── yarn.lock

Dockerfile

Dockerfile을 만드는 목적은 나중에 배포시에 다른 설정 없이 한번에 배포를 하려고 하기 때문이다.

우리의 front는 vue이기 때문에, vue의 production 빌드버전으로 dockerfile을 만들어 주도록 하겠다.

web/front/nginx/nginx.conf

nginx는 vue 배포시에 사용할 엔진이다.

web/front폴더 아래에 nginx를 만들고, 설정파일을 작성 해 주도록 하겠다.

server {
  listen 8080;
  client_max_body_size 5M;

  location / {
    alias /usr/share/nginx/html/;
    try_files $uri $uri/ /index.html;
  }
}

web/front/front.Dockerfile

FROM node as build-stage
MAINTAINER ba93love@gmail.com
WORKDIR /app
ADD . .
RUN yarn install
RUN yarn run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY  ./nginx/nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

docker-compose setting

front.Dockerfile을 만들었으니, docker-compose파일에 올려서 다른 서비스들과 묶어주도록 하겠다.

docker-compose.yml

version: '3.2'

services:
...(생략)
  web-front:
    build:
      context: web/front/
      dockerfile: front.Dockerfile
    ports:
    - "8080:8080"
    expose:
      - "8080"
    networks:
      - elk

networks:
  elk:
    driver: bridge

• 8080포트를 열어서 외부에서 접속 할 수 있도록 작성 해 주었다.
• dockerfile은 아까 작성 해준 front.Dockerfile을 작성한다.

front-back 연동

flask-cors 설치

플라스크 서버에서 back과 front를 연동하기 위해서는 flask-cors라는 패키지가 필요하다

(venv)$ pip install flask-cors
(venv)$ pip freeze > requirements.txt

web/back/app.py 수정

app.py에 flask-cors를 적용시켜준다

from flask import Flask
from flask_cors import CORS

# route pacakge import
from route.test_route import my_test

app = Flask(__name__)
app.secret_key = 'laksdjfoiawjewfansldkfnzcvjlzskdf'

CORS(app)

# route 등록
app.register_blueprint(my_test)

if __name__ == '__main__':
    app.run('0.0.0.0',port=5000,debug=True)

front의 axios 설치

vue에서 데이터 통신을 위한 axios모듈을 설치 해주도록 하겠다

# web/front/에서 진행
# yarn.lock, package.json이 있는곳에서 진행
$ yarn add axios
$ yarn install

front/src/views/About.vue 페이지수정

<template>
    <div class="about">
        <h1>This is an about page</h1>
        <h3>{{ greet }}</h3>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'say-hi',
    data() {
        return {
            greet: '',
        };
    },
    methods: {
        getGreet() {
            let path = 'http://localhost:5000/';
            axios.get(path).then(res => {
                this.greet = res.data;
            });
        },
    },
    created() {
        this.getGreet();
    },
};
</script>

• 아래의 스크립트 부분을 작성 해 준다
• axios가 localhost:5000에서 받은 데이터를 greet에 저장 해 줌
• created()에서 getGreet함수 실행

docker-compose up!!!!

작성을 완료했으니 실행 해 보자

$ docker-compose up --build -d