- Vue.js(フロントエンド)、Flask(バックエンド)、MySQL(DB)構成のアプリをDockerで環境構築したので、構築方法を備忘録としてメモしておく。
全体フォルダ構成
your_app --- fe --- app # プロジェクトフォルダ
| L_ Dockerfile
|
L_ be --- app # プロジェクトフォルダ
| L_ Dockerfile
| L_ requirements.txt # 依存パッケージリスト
L_ db --- data # DBデータマウント用フォルダ
| L_ my.cnf # 設定ファイル
L_ docker-compose.yml
docker-compose.yml
- フロントエンド
- 8080ポートを使用する。
- プロジェクトフォルダ
appをバインドマウントする。 -
node_modulesをボリュームマウントすることで、ビルド速度低下を防ぐ。
- バックエンド
- 5000ポートを使用する。
- プロジェクトフォルダ
appをバインドマウントする。
- データベース
- MySQL 5.7イメージを使用する。
- 3307ポートを使用する。
-
commandでポートを明示的に指定する必要あり。 -
dataフォルダをバインドマウントする。
version: "3"
services:
# フロントエンド
fe:
container_name: fe
build: ./fe
volumes:
- ./fe/app:/app
- node_modules_volume:/app/node_modules
ports:
- "8080:8080"
links:
- be
# バックエンド
be:
container_name: be
build: ./be
volumes:
- ./be/app:/app
ports:
- "5000:5000"
command: flask run --host 0.0.0.0 --port 5000
links:
- db
# データベース
db:
image: mysql:5.7
container_name: db
environment:
MYSQL_ROOT_PASSWORD: rootpass
MYSQL_DATABASE: sample_db
MYSQL_USER: mysqluser
MYSQL_PASSWORD: mysqlpass
volumes:
- ./db/data:/var/lib/mysql
- ./db/my.cnf:/etc/mysql/conf.d/my.cnf
ports:
- 3307:3307
command: --port 3307
volumes:
node_modules_volume:
フロントエンド
node.jsのベースイメージからフロントエンドアプリ(Vue.js)用コンテナを作成する。
Dockerfile
# ベースイメージ
FROM node:13.10.1-alpine3.11
WORKDIR /app
# 依存関係のインストール
COPY ./app/package*.json ./
RUN npm install
# プロジェクトフォルダをカレントディレクトリ(appフォルダ)にコピー
COPY ./app .
EXPOSE 8080
CMD ["npm", "run", "serve"]
-
appフォルダ-
vue create appコマンドで作成したプロジェクト一式を配置する。
-
バックエンド
- python 3.7ベースイメージからバックエンドアプリ(Flask)用コンテナを作成する。
Dockerfile
FROM python:3.7
RUN mkdir /app
ADD requirements.txt /app
ENV PYTHONUNBUFFERED 1
EXPOSE 5000
WORKDIR /app
RUN pip3 install -r requirements.txt
-
requirements.txt- Flask/MySQL用パッケージを記述する。
SQLAlchemy
Flask-SQLAlchemy
Flask-Cors
marshmallow
marshmallow-sqlalchemy
flask-marshmallow
pymysql
-
appフォルダ- Flaskプロジェクトフォルダ一式を配置する。
データベース
コンテナ設定は、
docker-composeのみに記述する。-
dataフォルダ- ホスト側マウント用フォルダ。
-
my.cnf- 設定ファイル。
- 文字コードのみ指定する。
[mysqld] character-set-server=utf8mb4 collation-server=utf8mb4_unicode_ci [client] default-character-set=utf8mb4