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-npmDockerfile
作成した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 └── stylesflaskコンテナ
次にバックエンドとなる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.1Dockerfile
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 └── stylesDocker 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
2helloDocker Composeで構築したコンテナは同じネットワークに参加していればサービス名で識別することができます。
Docker Composeでのコンテナ間通信に関しては下記を参照してください。
Docker Composeでコンテナ間通信
はじめに Docker Composeで構築したコンテナ間での通信を試してみます。 デフォルト
参考
- Docker ComposeでNext.js開発環境構築 | amateur engineer's blog
- Docker Composeでflask開発環境構築 | amateur engineer's blog
- Dockerfile リファレンス — Docker-docs-ja 20.10 ドキュメント
- Next.js — Local Development With Docker-Compose | by Bhargav Bachina | Bachina Labs | Medium
\ この記事が役に立ったと思ったら、サポートお願いします！ /
関連記事
Docker Composeでfirestoreのローカル環境を構築
【Docker】Nginx+uWSGI+Flaskのコンテナ構築
