手頃にwebサイトを作りたい時、flaskをサクっと立ち上げたい事が多々ある。そんな時の為にテンプレートを残しておく。

ディレクトリ構造

ファイル作成

Dockerfile

FROM shomaigu/ubuntu-base:latest

RUN apt -y install python3 python3-pip curl wget && apt autoremove && pip3 install --upgrade pip setuptools && mkdir -p /usr/src/app/templates

ADD ./requirements.txt /usr/src/app/
ADD ./app.py /usr/src/app/
ADD ./templates /usr/src/app/templates
#ADD ./static /usr/src/app/static

RUN pip3 install --no-cache-dir -r /usr/src/app/requirements.txt


WORKDIR /usr/src/app/
CMD ["python3", "/usr/src/app/app.py"]

docker-compose.yml

version: '3'
services:
  mysql:
#    image: shomaigu/mysql-database-class
    build:
      context: .
      dockerfile: ./Dockerfile
    volumes:
    - ./mysql:/var/lib/mysql

    environment:
    - MYSQL_ROOT_PASSWORD=root
    - TZ=Asia/Tokyo
    ports:
    - "3306:3306"
    restart: always


  flask:
    container_name: flask
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 80:80
    restart: always
    tty: true
    volumes:
    - ./flask/requirements.txt /usr/src/app/
    - ./flask/app.py /usr/src/app/
    - ./flask/templates /usr/src/app/templates
#    - ./flask/static /usr/src/app/static

requirements.txt

flask
mysql-connector-python

app.py

from flask import Flask, flash, render_template, request, session
import mysql.connector, re
from datetime import timedelta


app = Flask(__name__)

app.secret_key = 'tmcit'
app.permanent_session_lifetime = timedelta(days=10)

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


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=80)

templates/head.html

<!Doctype html>
<html lang='ja'>
<head>

<title>{{ title }}</title>
  <link rel="stylesheet" href="static/css/bootstrap.css">
  <script type="text/javascript" src="static/js/bootstrap.bundle.min.js"></script>
  <meta charset="UTF-8">

</head>

<body>

      {% block content %}
      <!-- ここにメインコンテンツを書く -->
      {% endblock %}
    </div>
  </div>
</body>
</html>

templates/index.html

{% extends "head.html" %}

{% block content %}

<title>TM health</title>


<h1>TM health</h1>
<p>TM healthへのログイン</p>


<form action="/result" method="post">

  {% with messages = get_flashed_messages() %}
    {% if messages %}
      <ul>
        {% for message in messages %}
          <li>{{ message }}</li>
        {% endfor %}
      </ul>
    {% endif %}
  {% endwith %}

  <div>
    <label for="user">user</label>
    <input type="text" id="user" name="user" min="0" max="100" required>
  </div>
  <div>
    <label for="password">password</label>
    <input type="password" id="password" name="password" min="0" max="100" required>
  </div>

　<button type="submit" class="btn btn-primary"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">送信</font></font></button>
</form>

<a href="/touroku">アカウントを作成する場合</a>

{% endblock %}

起動

docker-compose build && docker-compose up

docker-compose ps
    Name                  Command             State                    Ports
----------------------------------------------------------------------------------------------
flask           python3 /usr/src/app/app.py   Up      0.0.0.0:80->80/tcp,:::80->80/tcp
tmcit_mysql_1   python3 /usr/src/app/app.py   Up      0.0.0.0:3306->3306/tcp,:::3306->3306/tcp