【手順系】【Python】vagrant+dockerを使ったWebアプリケーション開発②:Flaskによる「Hello World!」

本noteの概要

仮想環境上でFlaskを使用したWebアプリケーションを開発する。

本noteの対象者

VirtualBoxおよびVagrantをインストールしている方
docker hubのアカウントを開設している方
・dockerおよびdocker-composeをインストールしている方

▽ dockerのインストール確認
vagrant@ubuntu-xenial:~$ docker version
Client: Docker Engine - Community
 Version:           19.03.6
 API version:       1.40
 Go version:        go1.12.16
 Git commit:        369ce74a3c
 Built:             Thu Feb 13 01:28:06 2020
 OS/Arch:           linux/amd64
 Experimental:      false
Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.40/version: dial unix /var/run/docker.sock: connect: permission denied
▽ docker-composeのインストール確認
vagrant@ubuntu-xenial:~$ docker-compose version
docker-compose version 1.23.1, build b02f1306
docker-py version: 3.5.0
CPython version: 3.6.7
OpenSSL version: OpenSSL 1.1.0f  25 May 2017

※ 筆者は仮想環境上でdockerを実行しているため、ローカルでの操作と少々異なる部分があるかもしれません。仮想環境上でdockerを動かしたい方は以下を参考にしてみてください。
【手順系】vagrant+dockerを使ったWebアプリケーション開発①:開発環境構築と「Hello World!」 - This is My note

本noteの環境

PC環境(ホスト)

# OSのバージョン
(base) $ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.14.6
BuildVersion:   18G2022

# Virtualboxのバージョン
(base) $ VBoxManage -v
6.1.2r135662

# vagrantのバージョン
(base) $ vagrant -v
Vagrant 2.2.7

仮想環境(ゲスト)

# Linuxのバージョンが記載されているファイルを検索
vagrant@:~$ ls /etc/*-release
/etc/lsb-release  /etc/os-release

# ゲストOSのバージョンを出力
vagrant@:~$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=16.04
DISTRIB_CODENAME=xenial
DISTRIB_DESCRIPTION="Ubuntu 16.04.6 LTS"

Today's Thema:Flaskを使ったブラウザでの「Hello World!」

完成図

<最終的なディレクトリ構成>
▼ ホスト(ローカル)

- ops
 - testapp   
  - src   
   - app.py   
- Vagrantfile   

※ ローカルのopsディレクトリ下を仮想環境と同期させているため、ローカル上もしくは仮想環境上でディレクトリやファイルを作成した場合には、仮想環境上もしくはローカル上にも同じものが表示されます。
▼ ゲスト(仮想環境)

- srv   
 - ops   
  - testapp   
   - src   
    - app.py   

Today's Thema:Flaskアプリの作成

1.Dockerイメージの作成〜コンテナの起動

⑴ Dockerfileの作成

testapp$ touch Dockerfile

⑵ Dockerfileの編集

FROM ubuntu:latest

RUN apt-get update
RUN apt-get install python3 python3-pip -y

RUN pip3 install flask

⑶ Dockerイメージのビルド

testapp$ sudo docker build . -t flask/app:1.0

Sending build context to Docker daemon  3.584kB
Step 1/4 : FROM ubuntu:latest
latest: Pulling from library/ubuntu
Digest: sha256:8d31dad0c58f552e890d68bbfb735588b6b820a46e459672d96e585871acc110
Status: Downloaded newer image for ubuntu:latest
 ---> ccc6e87d482b

〜中略〜

Installing collected packages: itsdangerous, MarkupSafe, Jinja2, click, Werkzeug, flask
Successfully installed Jinja2-2.11.1 MarkupSafe-1.1.1 Werkzeug-1.0.0 click-7.0 flask-1.1.1 itsdangerous-1.1.0
Removing intermediate container e0bcc95b9688
 ---> 9d8501c135c1
Successfully built 9d8501c135c1
Successfully tagged flask/app:1.0

⑷ 作成されたイメージの確認

testapp$ sudo docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
flask/app           1.0                 9d8501c135c1        29 seconds ago      474MB
ubuntu              latest              ccc6e87d482b        5 weeks ago         64.2MB

⑸ Dockerコンテナの起動

testapp$ sudo docker run -it flask/app:1.0 /bin/bash
root@726c66c1dc24:/# 

【補足】コンテナ内の環境確認
Dockerコンテナが起動したら、以下のように「python3」と入力し、pythonの対話モードが表示されたらOK。
なお、対話モードを終了するにはexit()と入力するか、control+dを押す。

root@726c66c1dc24:/# python3
Python 3.6.9 (default, Nov  7 2019, 10:44:02) 
[GCC 8.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> 

2.Flaskの作成・起動

pythonファイルの作成

testapp$ mkdir src && cd src

※ 上記のディレクトリ名は何でもOK

testapp/src$ touch app.py

<app.py>

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "Hello World!"

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)
. # 現在のディレクトリの意味
├── Dockerfile
└── src
    └── app.py

⑵ コンテナの起動

cd ..で一階層上に上がって、testappディレクトリに戻った上で、以下を実行。

testapp$ sudo docker run -it -p 80:5000 -v $(pwd)/src:/home flask/app:1.0 /bin/bash

root@67b6da95b1df:/#

※ 仮想環境を使用していない場合は、sudo docker run -it -p 5000:5000 -v $(pwd)/src:/home flask/app:1.0 /bin/bashでOK。
仮想環境上でコンテナを起動する場合は、仮想環境のポート番号に合わせて80の箇所を変更。今回は、Vagrantfileでconfig.vm.network "forwarded_port", guest: 80, host: 8080と設定しているため、仮想環境のポートは80に設定し、ブラウザにアクセスする際は8080を使用する。

pythonファイルのマウント確認

上記コンテナ起動時に、srcディレクトリにあるファイルをコンテナ内のhomeディレクトリにマウントしたため、コンテナのhomeディレクトリにapp.pyがあるかどうかを確認。

root@67b6da95b1df:/# ls
bin  boot  dev  etc  home  lib  lib64  media  mnt  opt  proc  root  run  sbin  srv  sys  tmp  usr  var
root@67b6da95b1df:/# cd home/
root@67b6da95b1df:/home# ls
app.py

⑷ Flaskの起動

root@67b6da95b1df:/home# python3 app.py
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
10.0.2.2 - - [21/Feb/2020 07:53:00] "GET / HTTP/1.1" 200 -
10.0.2.2 - - [21/Feb/2020 07:55:01] "GET / HTTP/1.1" 200 -
10.0.2.2 - - [21/Feb/2020 07:55:02] "GET / HTTP/1.1" 200 -

⑸ ブラウザ上での表示確認

http://localhost:8080/にアクセスし、「Hello World!」と表示されるかどうか確認。
なお、仮想環境を使用していない場合は、http://localhost:5000/にアクセス。
※ 仮想環境を使っている方で、8080番以外のポートを指定した方はそれに合わせてアクセス。
f:id:otsuba1:20200221183041p:plain 【補足】
app.pyの内容を変更した場合には、control+cで一度Flaskを停止し、再度python3 app.pyでFlaskを起動すると内容が更新される。

【参考】
Docker+Flaskによるお手軽Webアプリ開発 - Qiita