はじめに
Docker ComposeでNext.jsとFlaskの開発環境を構築します。
今回構築するのはNext.jsをフロントエンド、Flaskをバックエンドとしたアプリケーションになります。
Next.jsコンテナ
まずはNext.jsアプリが動作するコンテナの準備をします。
Next.jsアプリのコンテナ単体での構築については下記で解説しています。
アプリ作成
まずはNext.jsのアプリを作成します。
❯ npx create-next-app frontend --use-npmDockerfile
作成した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
└── stylesflaskコンテナ
次にバックエンドとなる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.1Dockerfile
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
└── stylesDocker 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
helloDocker Composeで構築したコンテナは同じネットワークに参加していればサービス名で識別することができます。
Docker Composeでのコンテナ間通信に関しては下記を参照してください。
