はじめに
Docker ComposeでNext.jsとFlaskの開発環境を構築します。
今回構築するのはNext.jsをフロントエンド、Flaskをバックエンドとしたアプリケーションになります。
Next.jsコンテナ
まずはNext.jsアプリが動作するコンテナの準備をします。
Next.jsアプリのコンテナ単体での構築については下記で解説しています。

アプリ作成
まずはNext.jsのアプリを作成します。
❯ npx create-next-app frontend --use-npm
Dockerfile
作成したfrontend
ディレクトリにNext.jsアプリ用のDockerfile
を作成します。
ここでは必要なライブラリのインストールをしています。
FROM node:14.17.4-alpine
WORKDIR /usr/src/app/frontend
COPY ./package*.json ./
RUN npm install
以下のようなディレクトリ構成になります。
.
└── frontend
├── Dockerfile
├── README.md
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── public
└── styles
flaskコンテナ
次にバックエンドとなるflaskアプリ用のコンテナを準備します。
flaskアプリのコンテナ単体での構築については下記で解説しています。

アプリ作成
まずはバックエンド用のディレクトリであるbackend
を作成し、その配下にアプリ部分となるapi.py
を作成します。
from flask import Flask
app = Flask(__name__)
@app.route("/api/hello")
def index():
return "hello"
必要なライブラリをrequirements.txt
に記載します。
flask==2.0.1
Dockerfile
backend
ディレクトリにflaskコンテナ用のDockerfile
を作成します。
FROM python:3.9.7-slim-buster
WORKDIR /usr/src/app/backend
ENV FLASK_APP=api
ENV FLASK_ENV=development
COPY /requirements.txt ./
RUN pip install --upgrade pip
RUN pip install -r requirements.txt
以下のようなディレクトリ構成になります。
.
├── backend
│ ├── Dockerfile
│ ├── app.py
│ └── requirements.txt
└── frontend
├── Dockerfile
├── README.md
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── public
└── styles
Docker Composeで実行
続いて、Next.jsコンテナとflaskコンテナをDocker Composeで実行して、お互いに通信できるようにします。
docker-compose.yml作成
docker-compose.yml
を作成します。
frontend
コンテナとbackend
コンテナそれぞれディレクトリをマウントしてアプリを実行しています。
version: "3"
services:
frontend:
build:
context: ./frontend
dockerfile: Dockerfile
ports:
- "3000:3000"
container_name: frontend-nextjs
volumes:
- ./frontend:/usr/src/app/frontend
command: npm run dev
backend:
build:
context: ./backend
dockerfile: Dockerfile
ports:
- "5000:5000"
container_name: backend-flask
volumes:
- ./backend:/usr/src/app/backend
command: flask run --host=0.0.0.0
最終的なディレクトリ構成は以下の通りです。
.
├── docker-compose.yml
├── backend
│ ├── Dockerfile
│ ├── app.py
│ └── requirements.txt
└── frontend
├── Dockerfile
├── README.md
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── public
└── styles
実行
必要なものが揃ったので実行します。
❯ docker-compose up -d
試しにfrontend
コンテナからbackend
コンテナのAPIを叩いてみます。(curl
がなかったのでwget
で代用しています)
❯ docker-compose exec frontend wget -q -O - http://backend:5000/api/hello
hello
Docker Composeで構築したコンテナは同じネットワークに参加していればサービス名で識別することができます。
Docker Composeでのコンテナ間通信に関しては下記を参照してください。
