Zenn
🐸

Docker × Nuxt3 × Flask 開発環境構築手順（WSL2対応）

に公開
Docker
Flask
Python
Vue.js
Nuxt 3
tech

DockerでNuxt3とFlaskの開発環境構築を行い疎通確認まで

環境

  • OS: Windows 11 + WSL2 (Ubuntu 22.04)
  • Docker Desktop for Windows
  • VSCode

導入手順

  1. プロジェクトのルートディレクトリの作成
mkdir nuxt-project
  1. ルートディレクトリに移動してその他の必要なディレクトリを作成
cd nuxt-project
mkdir frontend
mkdir backend
  1. frontendディレクトリに移動してDockerfileを作成します
cd frontend
touch Dockerfile

Dockerfileの中身

# Node.jsのイメージを使用
FROM node:latest

# 作業ディレクトリを設定
WORKDIR /app

# アプリケーションのソースコードをコピー
COPY . /app/

# 依存関係をインストール
RUN npm install

# アプリケーションを実行
CMD ["npm", "run", "dev"]
  1. backendも同様に作成します
cd backend
touch Dockerfile

Dockerfileの中身

# Pythonのイメージを使用
FROM python:3.11-slim

# 作業ディレクトリを設定
WORKDIR /app

# 依存関係をインストール
COPY requirements.txt /app/
RUN pip install -r requirements.txt

# アプリケーションのソースコードをコピー
COPY . /app/

# Flask アプリを実行
ENV FLASK_APP=app.py
CMD ["flask", "run", "--host=0.0.0.0"]
  1. frontendディレクトリに移動してNuxtプロジェクトを作成します
    作成手順は以下を参考にしてください。
    https://zenn.dev/tspk/articles/26e922896fe384

node_modulesはDockerコンテナ内に作成されるため、ローカルには不要です。
.dockerignore や .gitignore に node_modules を含めておくと良い

frontend/app.vueを修正

<template>
  <div>
    <NuxtPage />
  </div>
</template>

frontend/pages/index.vueを作成し、以下を記述

<template>
  <div>
    <h1>Nuxt + Python API</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
const message = ref("");

onMounted(async () => {
  try {
    const res = await fetch("http://localhost:5000/api/message");
    const data = await res.json();
    message.value = data.message;
  } catch (error) {
    console.error("API呼び出しエラー:", error);
    message.value = "API取得に失敗しました";
  }
});
</script>
  1. backendディレクトリに移動してFlaskを使用できるように設定します。
touch app.py
touch requirements.txt

app.py

# NuxtとFlaskを別ドメインとして立てている為、CORSが必要
from flask_cors import CORS
from flask import Flask, jsonify

app = Flask(__name__)
# CORSを有効にする
CORS(app)

@app.route("/api/message")
def get_message():
    return jsonify({"message": "こんにちは！これはPythonからのメッセージです"})

requirements.txt

flask
flask-cors
  1. .dockerignore を作成して不要ファイルを除外する
    .dockerignore を使うことで、不要なファイルが Docker イメージに含まれず、
    ビルドが高速になります。
touch frontend/.dockerignore
touch backend/.dockerignore

.dockerignore(frontend/.dockerignore)

node_modules
.nuxt
dist
.env
*.log

.dockerignore(backend/.dockerignore)

__pycache__/
*.pyc
.env
*.log
  1. .env ファイルを使って環境変数を管理
    .env に環境変数をまとめることで、ポート番号やホスト設定の変更も .env だけで済みます。
    .env ファイルは docker-compose.yml と同じディレクトリ（ルート）に配置してください。
FRONTEND_PORT=3000
BACKEND_PORT=5000
NUXT_HOST=0.0.0.0
  1. ルートディレクトリに移動してdocker-compose.ymlを作成します。
services:
  nuxt-app:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    volumes:
      - ./frontend:/app
      - /app/node_modules
    ports:
      - "${FRONTEND_PORT}:3000"
    environment:
      - HOST=${NUXT_HOST}
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - "${BACKEND_PORT}:5000"
  1. docker-compose.yml をプロジェクトのルートディレクトリに配置したら、
    以下のコマンドで一括でビルドと起動
docker-compose up --build
  1. http://localhost:3000/ にアクセスし以下画面が表示されれば成功です

終わりに

バックエンド側との疎通がとれていることが確認できました。
お恥ずかしながら、backendやdockerの経験が浅い為、
間違えている箇所、改善点などあれば教えていただけると嬉しいです。

参考にさせていただいた記事
https://techchallengediaryth.com/nuxt-setup/

Discussion