Dockerでflask

flaskの基礎をdockerでやってみる

flaskとは

Flaskは、pythonを使ってWebサイトを作る仕組みで、Djangoのような自動作成の部分はありませんが、軽量で使いやすいフレームワークです

くわしくはFlaskの基礎を読んでください

今回は、flaskの基礎でやったことをDockerでもやってみようというものです

Flaskの基礎をDockerで

Flaskで文字列出力
app.pyで文字列を出力する
FlaskでHTMLを呼び出す
app.pyから指定フォルダーのindex.htmlを出力する
Flaskからデータをindex.htmlに送る
Jinja2を使ってpythonからindex.htmlにデータを送る

Flaskで文字列出力

Helloというフォルダーに環境を作ります

Helloのファイル構成
Hello
  compose.yaml
  Dockerfile
  app.py

作るのはいつものcompose.yamlとDockerfileとapp.pyです

compose.yaml
services:
  web:
    build: .
    environment:
      FLASK_ENV: development
    ports:
      - "5000:5000"
    volumes:
      - ./:/usr/src/app

webというサービス名でport5000を使います。カレントフォルダーにapp.pyを作ります

Dockerfile
FROM python:3.10
WORKDIR /usr/src/app
RUN pip install flask==2.3.3
CMD ["flask", "run", "--host=0.0.0.0"]

1回目のupの時にimageを落としますので、少し時間がかかりますが、imageができてしまえば後は早いです

app.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_flask():
    return 'Hello Flask!'

@app.routeでlocalhost:5000/ のトップがリクエストされたらhello_flask()関数が動き、returnで文字を返します。それをHTMLとして出力します

実行するときは Helloフォルダーにコマンドプロンプトで移動して

実行コマンド
docker compose up -d

これで動きましたので「localhost:5000」をブラウザで開けばよいです

flask kiso

FlaskでHTMLを呼び出す

次にpythonからindex.htmlを呼び出して出力するサンプルです

HelloHTMLのファイル構成
HelloHTML
  compose.yaml
  Dockerfile
  app.py
  +--templates
     index.html

compose.yamlやDockerfileは同じです。違うのはtemplatesというフォルダーを作成して配下にindex.htmlを入れるところとapp.pyでのreturnの仕方です

app.py
from flask import Flask, render_template

app = Flask(__name__)

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

returnのところで render_template関数を使ってindex.htmlの中身を読み込んでいます

templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hello HTML flask</p>
</body>
</html>

単純にindex.htmlファイルを読み込んで出すだけです

起動は同じupコマンドですが、先のコンテナが稼働中だとportがぶつかるのでdownしてから実行してください

flask html

FlaskからデータをHTMLに送る

次にpythonからindex.htmlを呼び出してデータを渡すサンプルです

HelloJinjaのファイル構成
HelloJinja
  compose.yaml
  Dockerfile
  app.py
  +--templates
     index.html

compose.yamlやDockerfileは同じです。index.htmlの中のjinjaという記法とapp.pyでのreturnの仕方です

app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html',
        title="jinja HTML",
        h1text="Hello jinja HTML")

returnのところで render_template関数を使ってindex.htmlの中身を読み込んで、名前付きのデータを送り込んでいます

templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
</head>
<body>
    <p>{{h1text}}</p>
</body>
</html>

htmlファイル中の{{}}の中に変数名が入ります。そこにわたったデータが出力されます

いままでと同様に前のものをdownしてupすれば動きます

flask jinja