Docker学習 – NginxとFlaskでWebアプリ構築

Flask
2024.11.26

この記事は、Docker学習　－　docker-composeでnginx＋Flaskのwebアプリを構築する方法を元にして実際に行った、Docker Composeを使ってNginxとFlaskを組み合わせたWebアプリケーションの構築作業をトラブルシューティングを含めて紹介しています。

この作業では、Nginxはリバースプロキシとして動作し、Flaskアプリケーションをバックエンドとして使用します。
最終的には複数のFlaskアプリを管理する環境を構築します。

環境の準備

まず、以下の環境を前提としています。

  • DockerDesktopがインストールされている。
  • 基本的なFlaskアプリの知識がある。

以下の構成で、Nginxをリバースプロキシ、2つのFlaskアプリをバックエンドとして動作させます。

プロジェクト構造

最終的には、以下のようなディレクトリ構造となります。

.
├── docker-compose.yml
├── nginx
│   └── default.conf
├── web1
│   ├── app.py
│   ├── Dockerfile
│   ├── requirements.txt
│   └── templates
│       ├── hello.html
│       └── index.html
└── web2
    ├── app.py
    ├── Dockerfile
    ├── requirements.txt
    └── templates
        ├── hello.html
        └── index.html

Nginxの設定

Nginxをリバースプロキシとして構成するため、以下の設定を記述します。

nginx/default.conf

server {
    listen       80;
    server_name  localhost;

    location /web1 {
        proxy_pass http://web1:5000/;
    }

    location /web2 {
        proxy_pass http://web2:5000/;
    }
}
  • /web1でweb1サービスのFlaskアプリケーションにリクエストを転送。
  • /web2でweb2サービスのFlaskアプリケーションにリクエストを転送。

Flaskアプリの作成

Flaskアプリケーションを作成します。

web1/app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/<name>')
def hello(name):
    return render_template('hello.html', title='Flask App 1', name=name)

if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0', port=5000)

web2/app.py
web2はweb1をコピーし、タイトルや一部の文字列を変更します。

テンプレートを作成

web1/templates/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Web1 Home</title>
</head>
<body>
    <h1>Welcome to Web1!</h1>
</body>
</html>

web1/templates/hello.html

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    <h1>Hello, {{ name }}!</h1>
</body>
</html>

web2/templatesも同様に作成し、内容を変更します。

Flask用Dockerfile

FlaskアプリをDockerコンテナで動作させるためのDockerfileを作成します。

web1/Dockerfile

FROM python:3.6

WORKDIR /app

COPY . /app

RUN pip install -r requirements.txt

EXPOSE 5000

CMD ["python", "app.py"]

web2/Dockerfileも同様です。

requirements.txtの作成

必要なPythonライブラリを記載します。

web1/requirements.txt

Flask==1.1.2

web2/requirements.txtも同様です。

Docker Composeファイルの作成

docker-compose.ymlを作成して、全体の構成を定義します。

docker-compose.yml

version: "3"
services:
  nginx:
    image: nginx:latest
    container_name: nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - web1
      - web2

  web1:
    build: ./web1
    container_name: web1
    ports:
      - "5001:5000"

  web2:
    build: ./web2
    container_name: web2
    ports:
      - "5002:5000"

構成図

コンテナのビルドと起動

以下のコマンドでコンテナをビルドし、起動します。

docker-compose build
docker-compose up

トラブルシューティング

テンプレートが見つからないエラー

エラー例:

jinja2.exceptions.TemplateNotFound: index.html

解決方法:

  • Flaskアプリのtemplatesディレクトリが正しい場所に配置されているか確認。
  • コンテナ内にテンプレートファイルが存在するか確認。

502 Bad Gateway エラー

原因:
NginxがバックエンドFlaskアプリに接続できていない。

解決方法:

  • Nginx設定のproxy_passでポート番号が正しいか確認。
  • コンテナ内で接続確認
docker exec -it nginx bash
curl http://web1:5000
curl http://web2:5000

コンテナの変更が反映されない

原因:
Dockerのキャッシュが原因で、最新の変更が反映されていない。

解決方法:

  • キャッシュを無効化して再ビルド
docker-compose build --no-cache
docker-compose up

まとめ

この手順で、Docker Composeを利用してNginx＋FlaskのWebアプリケーション環境を構築できました。
Nginxをリバースプロキシとして使用することで、複数のバックエンドアプリケーションを統合的に管理することができました。

学習ポイント:

  • FlaskアプリのDocker化の基本。
  • NginxとFlaskの連携。
  • Docker Composeでの複数コンテナ管理。

出典情報
本記事の内容は以下のページを参考にしています：

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