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で構築**していきます。 <b>Docke

アプリ作成

まずはNext.jsのアプリを作成します。

1❯ npx create-next-app frontend --use-npm

Dockerfile

作成したfrontendディレクトリにNext.jsアプリ用のDockerfileを作成します。

ここでは必要なライブラリのインストールをしています。

1FROM node:14.17.4-alpine
2
3WORKDIR /usr/src/app/frontend
4
5COPY ./package*.json ./
6
7RUN npm install

以下のようなディレクトリ構成になります。

1.
2└── frontend
3    ├── Dockerfile
4    ├── README.md
5    ├── next.config.js
6    ├── node_modules
7    ├── package-lock.json
8    ├── package.json
9    ├── pages
10    ├── public
11    └── styles

flaskコンテナ

次にバックエンドとなるflaskアプリ用のコンテナを準備します。

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

Docker Composeでflask開発環境構築

はじめに **flaskの開発環境をDockerで構築**していきます。 **Dockerfi

アプリ作成

まずはバックエンド用のディレクトリであるbackendを作成し、その配下にアプリ部分となるapi.pyを作成します。

1from flask import Flask
2
3app = Flask(__name__)
4
5
6@app.route("/api/hello")
7def index():
8    return "hello"

必要なライブラリをrequirements.txtに記載します。

1flask==2.0.1

Dockerfile

backendディレクトリにflaskコンテナ用のDockerfileを作成します。

1FROM python:3.9.7-slim-buster
2
3WORKDIR /usr/src/app/backend
4ENV FLASK_APP=api
5ENV FLASK_ENV=development
6
7COPY /requirements.txt ./
8
9RUN pip install --upgrade pip
10RUN pip install -r requirements.txt

以下のようなディレクトリ構成になります。

1.
2├── backend
3│   ├── Dockerfile
4│   ├── app.py
5│   └── requirements.txt
6└── frontend
7    ├── Dockerfile
8    ├── README.md
9    ├── next.config.js
10    ├── node_modules
11    ├── package-lock.json
12    ├── package.json
13    ├── pages
14    ├── public
15    └── styles

Docker Composeで実行

続いて、Next.jsコンテナとflaskコンテナをDocker Composeで実行して、お互いに通信できるようにします。

docker-compose.yml作成

docker-compose.ymlを作成します。

frontendコンテナとbackendコンテナそれぞれディレクトリをマウントしてアプリを実行しています。

1version: "3"
2services:
3  frontend:
4    build:
5      context: ./frontend
6      dockerfile: Dockerfile
7    ports:
8      - "3000:3000"
9    container_name: frontend-nextjs
10    volumes:
11      - ./frontend:/usr/src/app/frontend
12    command: npm run dev
13  backend:
14    build:
15      context: ./backend
16      dockerfile: Dockerfile
17    ports:
18      - "5000:5000"
19    container_name: backend-flask
20    volumes:
21      - ./backend:/usr/src/app/backend
22    command: flask run --host=0.0.0.0

最終的なディレクトリ構成は以下の通りです。

1.
2├── docker-compose.yml
3├── backend
4│   ├── Dockerfile
5│   ├── app.py
6│   └── requirements.txt
7└── frontend
8    ├── Dockerfile
9    ├── README.md
10    ├── next.config.js
11    ├── node_modules
12    ├── package-lock.json
13    ├── package.json
14    ├── pages
15    ├── public
16    └── styles

実行

必要なものが揃ったので実行します。

1❯ docker-compose up -d

試しにfrontendコンテナからbackendコンテナのAPIを叩いてみます。（curlがなかったのでwgetで代用しています）

1❯ docker-compose exec frontend wget -q -O - http://backend:5000/api/hello
2hello

Docker Composeで構築したコンテナは同じネットワークに参加していればサービス名で識別することができます。

Docker Composeでのコンテナ間通信に関しては下記を参照してください。

Docker Composeでコンテナ間通信

はじめに Docker Composeで構築したコンテナ間での通信を試してみます。デフォルト

参考

Support

\ この記事が役に立ったと思ったら、サポートお願いします！ /

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

はじめに

Next.jsコンテナ

アプリ作成

Dockerfile

flaskコンテナ

アプリ作成

Dockerfile

Docker Composeで実行

docker-compose.yml作成

実行

参考

関連記事

Docker Composeでfirestoreのローカル環境を構築

Docker Composeでコンテナ間通信

【Docker】Nginx+uWSGI+Flaskのコンテナ構築

【超基礎】Docker Compose

Profile

Masa

目次