Vue.js & Flask 로그인/로그아웃 (1) - Docker DB 세팅하기

이전 글 첨부

[Master_branch/develop_branch] - Vue.js & Flask - 개발환경구축하기

[Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(1) - backend

[Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(2) - frontend

[Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 (axios)

[Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 axios(2) button binding

 

Vue.js & Flask를 docker-compose로 올렸기 때문에 DB도 마찬가지로 같이 docker로 올려주려고 한다.

사용하려고 하는 db는 mysql이다

docker-compose 세팅까지의 코드는 깃허브에 있다 (링크)

Docker-compose로 front,back, db연동하기

docker-compose.yml 수정하기

처음 프로젝트를 세팅 했을 때, docker-compose로 모든 것을 하나의 네트워크에 올렸다.

docker-compose.yml을 확인 해 보자

version: '3.2'

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
    depends_on:
      - frontend

• services 밑에 frontend와 backend로 서버가 올라가있다.
• frontend는 front.dev.Dockerfile을 가지고 vue.js 프론트엔드 서버를 구축한다
• backend는 back.dev.Dockerfile을 가지고 flask서버를 백단에 구축한다.

DB를 사용하지 않는다면 위의 docker-compose파일로 충분하지만 로그인/로그아웃을 사용 하기 위해서 사용자를 저장 해 놓아야 하기 때문에 DB 를 올려 줄 것이다.

→ 물론 DB를 사용하지 않고도 사용자를 저장 할 수 있는 방법이 있다. 나중에 다루는 것으로.

docker-compose.yml에 Mysql 추가하기

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
    restart: always
    build:
      context: backend
      dockerfile: back.dev.Dockerfile
    expose:
      - 5000
    ports:
      - 5000:5000
    volumes:
      - ./backend:/www
    links:
      - db
    depends_on:
      - frontend

  db:
    image: mysql:5.7
    container_name: my-back-mysql
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: "qwerqwer123"
      MYSQL_DATABASE: "fullstack_test"
      MYSQL_USER: "wool"
      MYSQL_PASSWORD: "qwerqwer123"
    volumes:
      - /here/is/my/local/path:/var/lib/mysql

• command의 mysqld —default-authentication-plugin=mysql_native_password 는 mysql8 버전의 패스워드를 기존의 방법대로 설정 하게 도와준다
• environment에 환경변수로 DB접속과 관련된 정보를 저장했다.

Flask에서 사용할 .env파일

.env파일을 추가 해 주어야 Flask에서 제대로 작동한다.

app.py에 여러가지 변수들을 빼서 관리 했기 때문이다.

flask의 app.py와 같은 위치의 .env파일이다.

FLASK_ENV=development
FLASK_DEBUG=True
FLASK_APP=app.py
FLASK_RUN_PORT=5000
#SQLALCHEMY_DATABASE_URI=mysql+pymysql://wool:qwerqwer123@localhost:3306/fullstack_test
SQLALCHEMY_DATABASE_URI=mysql+pymysql://wool:qwerqwer123@db/fullstack_test
SQLALCHEMY_TRACK_MODIFICATIONS=False

docker-compose up —build!

모두 작성이 되었다면, 명령어로 실행 시켜보자

$ docker-compose up --build

• frontend와 backend 그리고 backend_db 가 모두 떠 있다면 잘 쓴 것!

CONTAINER ID        IMAGE                      COMMAND                  CREATED             STATUS              PORTS                    NAMES
d9d22cf11f42        mysql                      "docker-entrypoint.s…"   5 minutes ago       Up 5 minutes        3306/tcp, 33060/tcp      my-back-mysql
e0a5827d7bfd        flask-vue-argon_backend    "python3 app.py"         10 minutes ago      Up 5 minutes        0.0.0.0:5000->5000/tcp   my-back
17caf634c731        flask-vue-argon_frontend   "docker-entrypoint.s…"   10 minutes ago      Up 5 minutes        0.0.0.0:8080->8080/tcp   my-front