Docker ComposeでNext.jsとflask開発環境を構築する

はじめに

Docker ComposeでNext.jsとFlaskの開発環境を構築します。

今回構築するのはNext.jsをフロントエンド、Flaskをバックエンドとしたアプリケーションになります。

Next.jsコンテナ

まずはNext.jsアプリが動作するコンテナの準備をします。

Next.jsアプリのコンテナ単体での構築については下記で解説しています。

Docker ComposeでNext.js開発環境構築
はじめにNext.jsの開発環境をDockerで構築していきます。DockerfileでNext.jsのアプリが実行されるコンテナのイメージを用意し、Docker Composeで実行する方法をとります。そうすることでバックエンドとして...

アプリ作成

まずは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アプリのコンテナ単体での構築については下記で解説しています。

Docker Composeでflask開発環境構築
はじめにflaskの開発環境をDockerで構築していきます。Dockerfileでflaskアプリが実行されるコンテナイメージを用意し、Docker Composeで実行します。Dockerについては下記を参考してください。Do...

アプリ作成

まずはバックエンド用のディレクトリである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でのコンテナ間通信に関しては下記を参照してください。

Docker Composeでコンテナ間通信
はじめにDocker Composeで構築したコンテナ間での通信を試してみます。デフォルトのネットワークでの通信Docker Composeではデフォルトで1つのネットワークを作成してくれます。全てのコンテナはこのデフォルトのネットワ...

参考

タイトルとURLをコピーしました