【flask】Dockerでflaskの環境を簡単に構築する
はじめに
こんにちは、がんがんです。
先日、インフラおじさんに就任(？)しまして日々Dockerの勉強を行っています。
先日のDockerに関する記事はこちらです。
gangannikki.hatenadiary.jp
普段はPythonをメインで扱っています。せっかくなのでPythonの環境をDockerで作成して簡単にWebアプリの制作を行えるように頑張ってみます。
今回はflaskの環境をDockerで構築した際の備忘録です。
目的
- flaskの環境をDockerにて構築
- Webアプリ環境は簡単に作れることを体感する
必要ファイルの準備
まずはDockerfileおよびdocker-compose.ymlを準備します。
Dockerfile
FROM python:3.7.5 ARG project_dir WORKDIR $project_dir RUN pip install flask
docker-compose.yml
version: "3.7"
services:
web:
build:
context: .
args:
project_dir: "/myapp/"
ports:
- "5000:5000"
volumes:
- "./myapp:/myapp"
environment:
TZ: "Asia/Tokyo"
FLASK_ENV: "development"
command:
"flask run --host 0.0.0.0 --port 5000"
docker buildを行っていく
ファイルを準備したらdocker-compose buildを行っていきます。
$ docker-compose build
特に問題がなければimageが作成できていると思います。
簡単なWebアプリを構築
Docker環境が完成したらapp.pyとindex.htmlを用意して簡単なWebアプリを作成します。
フォルダ構成
フォルダの環境構成はそれぞれ以下の通りです。
. -- Dockerfile
-- docker-compose.yml
-- myapp
-- app.py
-- templates
-- index.html
app.py
from flask import Flask, render_template server = Flask(__name__) @server.route("/hello") def hello_world(): return "Hello World" @server.route("/") def index(): return render_template("index.html") if __name__ == "__main__": server.debug = True server.run(host="0.0.0.0", post=5000)
index.html
<!-- index.html --> <!DOCTYPE html> <html lang="ja"> <head> <title>Test Page</title> </head> <body> <h1>デザインとかのテスト用のページ</h1> </body> </html>
環境の実行を行う
pythonファイル、htmlファイルを用意したら環境の実行を行います。
# -d : バックグラウンド実行 $ docker-compose up -d
指定のアドレスにアクセスしてページが表示されたら完了です。
bootstrap4を追加してみる
flaskを用いたWebアプリおよびflaskのDocker環境を簡単に構築することが出来ました。
次はDockerfileを一部修正して、flask-bootstrap4の環境をつくります。
ファイルの差分を下記にまとめます。フォルダの構成は以下のように変更しておきます。
. -- Dockerfile
-- docker-compose.yml
-- myapp
-- app.py
-- templates
-- index.html
-- bootstrap.html
-- static
-- css
-- bootstrap.css
Dockerfile
先ほど作成したDockerfileに以下の文を追加します。
RUN pip install flask-bootstrap4
app.py
from flask_bootstrap import Bootstrap server = Flask(__name__) bootstrap = Bootstrap(server) (中略) @server.route("/bs") def degign_bs(): return render_template("bootstrap.html")
bootstrap.html
置き場所はindex.htmlと同じ場所で大丈夫です。コードは下記の通りです。
<!-- bootstrap.html --> {% extends "bootstrap/base.html" %} {% block title %}Hello{% endblock %} {% block content %} <div> <div class="page-header"> <h1> Hello World! </h1> </div> </div> {% endblock %}
bootstrap.css
cssファイルはstaticフォルダを作成してそれの直下に置きます。
.btn-success { color: #fff; background-color: #28a745; border-color: #28a745; } .btn-success:hover { color: #fff; background-color: #218838; border-color: #1e7e34; } .btn-success:focus, .btn-success:focus { box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); } .btn-success:disabled, .btn-success:disabled { color: #fff; background-color: #28a745; border-color: #28a745; } .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { color: #fff; }
flask + bootstrap4の環境を実行
環境の再buildを行いその後実行させてやれば大丈夫です。
$ docker-compose build $ docker-compose up -d
