こんにちは！今回は、Vue.js と Flask の環境を Docker を使って構築する方法について紹介します。Vue.jsはフロントエンド、Flaskはバックエンドのフレームワークとして使い、両者をDockerで一緒に動かすことで、効率的に開発を進めることができます。
この手順を通じて、Dockerを使ったコンテナの立ち上げから、実際にVueとFlaskの連携までを解説しますので、ぜひ参考にしてください！
1. Docker環境の準備
まず、プロジェクトのルートディレクトリに docker-compose.yml を作成します。このファイルで、FlaskとVueのコンテナを管理します。
docker-compose.yml
version: "3"
services:
flask:
build:
context: .
dockerfile: dockerfile_python
container_name: flask_container
working_dir: /usr/src/app/backend
tty: true
volumes:
- ./:/usr/src/app
ports:
- "5000:5000"
command: python app.py
vue:
build:
context: .
dockerfile: dockerfile_node
container_name: vue_container
tty: true
volumes:
- ./:/usr/src/app
working_dir: /usr/src/app/frontend
ports:
- "8083:8083"
depends_on:
- flask
command: yarn run serve
この構成では、FlaskとVueそれぞれにDockerfile を指定しています。最初にコンテナを立ち上げる際には、FlaskとVueのcommand部分はコメントアウトしておくと良いです。
Dockerfileの作成
次に、Flask用とVue用にそれぞれ Dockerfile を作成します。
dockerfile_python（Flask用）
FROM python:3.9
WORKDIR /usr/src/app
COPY ./ /usr/src/app
RUN pip install --upgrade pip && \
pip install flask && \
pip install flask-cors
dockerfile_node（Vue用）
FROM node:16.13.0
WORKDIR /usr/src/app
COPY ./ /usr/src/app
RUN npm init -y&& \
npm install && \
npm install -g @vue/cli && \
npm install axios
注意点：最初に npm init を実行しないと、package.json が作成されないのでエラーになります。
コンテナの立ち上げ
次に、ターミナルで以下のコマンドを実行してコンテナを立ち上げます。
docker-compose upもしエラーがなければ、コンテナが正しく立ち上がったことになります。ここまでが準備段階です。
2. Vueのセットアップ
次に、Vue.jsのプロジェクトをセットアップします。コンテナ内で作業を進めるために、まずコンテナのシェルに入ります。
シェルに入ったら、以下のコマンドでVueプロジェクトを作成します。
vue create frontendプロジェクトが作成されたら、vue.config.js でポートを変更します。
const { defineConfig } = require("@vue/cli-service")
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 8083, // 任意のポート番号
},
})これで、Vueの開発サーバーを立ち上げる準備が整いました。次にビルドしてサーバーを立ち上げます。
npm run build
npm run serveローカルの http://localhost:8083 にアクセスすると、Vueのプロジェクトが表示されるはずです。
3. Flaskのセットアップ
次はバックエンドのFlaskをセットアップします。Vueのセットアップが終わったら、Flask用のコンテナに入って作業を行います。
docker exec -it flask_container /bin/bashコンテナ内で、以下のコマンドで backend フォルダを作成し、app.py を作成します。
mkdir backend
cd backend
touch app.pyapp.py に以下のコードを追加します。ここでは、Vueでビルドした静的ファイルをFlaskで提供する設定を行っています。
from flask import Flask, render_template, jsonify
from flask_cors import CORS
from random import *
app = Flask(__name__, static_folder="../frontend/dist/static", template_folder="../frontend/dist")
app.config.from_object(__name__)
CORS(app)
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
return render_template("index.html")
if __name__ == '__main__':
app.run(host='0.0.0.0', debug=True)これでFlaskのバックエンドがセットアップできました。python app.py を実行して、サーバーを立ち上げます。
vue側も起動した状態で、127.0.0.1:5000にアクセスすると
この画面が表示されればOKです。
４. Docker Composeの設定
最後に、docker-compose.yml でFlaskとVueのcommand部分を追加して、自動ビルドができるように設定します。
flask:
command: python app.py
vue:
command: yarn run serve再度コンテナを立ち上げ直すと、VueとFlaskが連携して動作するようになります。
まとめ
これで、Docker環境を使ってVue.js（フロントエンド）とFlask（バックエンド）を一緒に立ち上げることができました。コンテナを使うことで、開発環境を統一でき、効率よく作業を進めることができます。
これからこの環境を使って、LIFFアプリの制作をやってみたいと思っています！
コメント