Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@MASEE

Docker：Flask + Nginx + MySQL + phpMyAdminで環境構築

Last updated at Posted at 2023-06-11

この記事の目的

　以前、「Docker：Laravel9 + Nginx + MySQL + phpMyAdminで環境構築」というタイトルでLaravelのDocker環境構築を投稿しました。それ以来いろいろな言語でDockerでの環境構築にはまりました。

・以前の記事

　最近PythonのフレームワークであるFlaskの勉強を始めました。仮想環境を立ててFlaskをインストールする方法もあるのですが、せっかくなのでDockerで学習環境を構築してみたいと思い、備忘録として記事に残したいと思います。
（※Flaskは初めて使用するので、構築したFlaskのDocker環境に不備があるかもしれません。勉強し今後もこの記事をアップデートしていく予定です。）

構築するコンテナ

  • Nginx
  • Flask
  • MySQL
  • phpMyAdmin

構成

ディレクト、ファイルの構成は以下の通りです。
dockerディレクトリ直下にnginx、pythonのDockerfileを作成します。
pythonのバージョンは3.10.0を使用します。

MySQLとphpMyAdminのイメージはdocker Hubからプルしてきます。
コンテナ実行の定義は、docker-compose.ymlに記述します。

docker-flask
├── docker
│   ├── nginx
│   │   ├── Dockerfile
│   │   └── nginx.conf
│   └── php
│       ├── Dockerfile
│       └── requirements.txt
├── templates
│   └── index.html
├── static
│   ├── images
│   │   └── book.jpg <=これは好きな画像でOKです
│   └── css
│       └── style.css
├── app.py
└── docker-compose.yml

Nginx関連のファイルを作成

・まずはNginxのDockertfileを作成します。

Dockerfile
# コンテナベースとしてnginxを指定
FROM nginx:latest

# 次で作成するnginx.confファイルをDockerイメージにコピー
COPY nginx.conf /etc/nginx/conf.d/default.conf

# nginxをフォアグラウンドで動かすためデーモンをoff
CMD ["/usr/sbin/nginx", "-g", "daemon off;"]

・nginx.conf作成

nginx.conf
server {
    listen 80;
    server_name localhost;

    location / {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Flask（Python）関連のファイル作成

・Dockertfileを作成します。

Dockerfile
FROM python:3.10.0

# 作業ディレクトリをtestに設定
WORKDIR /test

# 次で作成するrequirements.txtをDockerイメージにコピー
COPY requirements.txt .

# requirements.txt内に記載したライブラリ群をインストール
RUN pip install -r requirements.txt

CMD ["gunicorn", "-b", ":5000", "app:app"]

・requirements.txt作成

requirements.txt
Flask==2.3.2
gunicorn==20.0.4
sqlalchemy==2.0.15

requirements.txtにインストールするライブラリ群を記載しています。普段使っているLaravelでも利用できないか検討してみようと思いました。

いくつかの記事を参考にすると、「gunicorn（ジーユニコーン）」をインストールしていました。何なのか調べてみると、単純に考えるとNginxとFlaskの橋渡し役みたいです。

docker-compose.ymlの作成

docker-compose.yml
version: '3.8'
services:
  nginx:
    build: ./docker/nginx/
    container_name: flask_nginx
    ports:
      - "80:80"
    depends_on:
      - python

  python:
    build: ./docker/python/
    container_name: flask_python
    volumes:
      - .:/code
    ports:
      - "5000:5000"
    depends_on:
      - db
  db:
    image: mysql:8.0
    container_name: flask_db
    hostname: mysql
    expose:
      - 3306
    ports:
      - 3306:3306
    command:
      - --sql-mode=NO_ENGINE_SUBSTITUTION
    environment:
      - MYSQL_ROOT_PASSWORD=flaskpass
      - MYSQL_DATABASE=flasktest
      - MYSQL_USER=flaskuser
      - MYSQL_PASSWORD=flaskpass

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: flask_pma
    hostname: phpmyadmin
    depends_on:
      - db
    ports:
      - "9090:80"

コンテナ立ち上げ

起動用のapp.pyを作成します。

app.py
from flask import Flask, render_template

app = Flask(__name__)

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

if __name__ == "__main__":
    app.run(debug=True)

Webアプリケーションサーバであるgunicornを通してapp.pyを起動しますので、無いとエラーがでます。
templates/index.htmlは適当に用意してください。

docker-compose.ymlが存在するディレクトリに移動し、以下のコマンドを実行してdockerのイメージ作成、コンテナの立ち上げを行います。
一発で上手くいくかどうかの、この瞬間がいつも楽しみです。
（まあ大抵エラーが出ますが・・・）

$ docker-compose up -d

以下のような状態になれば、各コンテナが稼働しています。

Creating flask_db  ... done                               
Creating flask_pma  ... done                                    
Creating flask_python  ... done                                   
Creating flask_nginx  ... done

ページを整える

さてコンテナが立ち上がったのでさっそく画面を見てみましょう...　とその前にせっかくなので画面を少しきれいに整えましょう。

・templates/index.htmlを以下のように書き換えます。

index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/static/css/style.css">
        <title>Flask学習テスト</title>
    </head>
    <body>
        <header>
            <h1>Flask学習テスト</h1>
        </header>
    
        <nav>
            <ul>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">MAIN</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    
        <main>
            <h2>メインコンテンツ</h2>
            <img src="/static/images/book.jpg" alt="">
        </main>
    
        <footer>
            <p>© 2023 Flask TEST</p>
        </footer>
    </body>
</html>

・static/css/style.css

style.css
body {
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

header, nav, main, footer {
    margin: 0;
    padding: 20px;
    color: white;
}

header {
    background-color: #ADD8E6;
}

nav {
    text-align: right;
    background-color: #4169e1;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    background-color: #ADD8E6;
}

img {
    width: 65%;
    height: 65%;
}

footer {
    text-align: center;
    background-color: #4169e1;
}

・static/images/ にはお好きな画像を入れてください。

Flaskの起動

では、http://localhost:5000 に接続してみましょう。
以下のような画面がでればDocker環境構築完了です。

また、http://localhost:9090 にも接続してみましょう。
phpMyAdminの画面が出て、設定したユーザー名とパスワードを入力してログインできたら成功です。

www.jpg

今後について

　今回はFlask学習のため、Dockerでの環境構築の例を紹介しました。画面表示まで確認できたので、今後はMySQLとの連携を試みたいと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?