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