###### tags: `勉強会`
# Webアプリを構築してみる(with Docker)

## 目的
**高性能なWebアプリ(サイト)を素早く制作するために、PythonのWebフレームワーク「Flask」とアプリの環境構築ソフトウェア「Docker」を使い、大量のアクセスを捌けるWebアプリの仕組みを理解し、自身で構築出来るようになる。**

### 第１章：PythonのWebフレームワーク「Flask」を使ってみます
**「Webフレームワーク」** とは
Webアプリ(サイト)開発を効率化してくれる機能を集めたもの。
開発者はフレームワークの書き方に準じていれば、Webアプリをつくれます。


### Flaskでルーティングを書きます
**「ルーティング」** とは
一言で言うと、URLと処理内容を紐付けることです。

例えば、大阪電気通信大学のURLに何も指定しない場合、トップページが表示されます。

次に「大学紹介」のボタンを押すとURLに`/about/`と追加され大学紹介のページに飛ばされます。

URLのルート(道)を作ってあげる。
これが「**ルーティング**」です。

### ルーティングを実際に作ってみる
今回は、準備なしで開発を行うため、
[Play with Docker](https://labs.play-with-docker.com/)上で開発していきます。

vi app.py 

#coding: utf-8
from flask import Flask, render_template

app = Flask(__name__)

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

# URLに/aboutと加えると「About Me!」と表示されます
@app.route('/about')
def about():
    return "About Me!"

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

テキストエディタ「vi」を使えていますか？
`cat`コマンドでファイルの内容を確認してみます。

cat app.py

### HTMLファイルを書いてみます
`Flask`では、HTMLファイルを`templates`フォルダに書きます。
このフォルダの名前(`templates`)は`Flask`の決まりなので絶対です。

mkdir templates

vi home.html

<h1>Webページ</h1>
<li>名前</li>

<div onclick="location.href='/about/'">私について</div>

## 「Docker(ドッカー)」で環境構築します
### なぜやるのか？
「Docker(ドッカー)」とはアプリを開発・実行するための環境を作るソフトウェアの１つで、
- 軽量なため、動作が快適
- コードで環境を記述するため、他の人のPCでも動く
- デプロイが簡単になる

上記のメリットがあります。

「Docker」(ソフトウェア)の世界では、**コンテナ**という概念があります。

英語で「Container」は箱、容器という意味を持ちます。
Dockerでは、箱は **「Dockerfile(ドッカーファイル)」** というファイルにあたります。
`Dockerfile`というファイルにインストールしたいソフトウェアを記述することでアプリを開発・実行できる環境を用意します。


**実際にやってみましょう！！！**

### Dockerfileで必要な環境を記述

vi Dockerfile

#ベースイメージは、Ubuntu(Linux OS)をインストール
FROM ubuntu:latest

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

RUN pip3 install flask

# Docker内で
WORKDIR /home

### docker buildで箱詰めします
`docker` `build`(組み立てる)`.`(今いる場所) `-t`(タグ：名前をつける) `web-app`(好きな名前)

docker build . -t web-app

### 結果、「docker image」という物ができます
イメージを作るメリット：

確認してみましょう

docker image ls

### イメージを動かします
`docker` `run`(動かす) `-it`(イメージのタグ=名前) `-p`(ポートを指定)

docker run -it -p 5000:5000 -v $(pwd)/:/home web-app

### PythonでWebアプリを起動します

python3 app.py

---
## 第２章：大量のアクセスを捌ける仕組み
### Webサーバがサーバを負荷分散する
先程、`python3 app.py`で`Flask`を起動すると下記の文字が出てきました。

 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.

> 危険：これは開発用サーバーなので、実際のデプロイ(運用)では使用しないでください。
代わりに`WSGI(ウイスキー)`サーバーを使ってください。

と書かれています。

Webフレームワーク`Flask`では、開発を効率よく進めるため、内部で開発用サーバーが動き、Webアプリが実行できます。

しかし、実際の運用では大量のアクセスが来る場合があると、サーバーがパンクするため、

**Webサーバ(プロキシサーバ)**

という**ソフトウェア**でサーバの負荷を分散します。

Webサーバーが高負荷なHTML、CSS、JavaScript、画像などをサーバの代わりに送信

サーバに直接、大量のアクセスが来るとパンクしやすくなる

### APサーバがWebサーバとWebフレームワークを繋げる

先程出てきた`WSGI:ウイスキー(Web Server Gateway Interface)`とは、この`Webサーバ`と`Webアプリケーション(Flask)`を接続するための規格です。

また、この機能を持つ**ソフトウェア**のことを
**APサーバ(アプリケーションサーバ)**
と言います。

`Flask`では、`gunicorn`があります。


今回は、`Python`だけでなく、`PHP`、`Ruby`、`Perl`、`Lua`これらの言語のフレームワークにも使える`uWSGI`という`APサーバ`を使っていきます。

### Webサーバの二大巨頭

| Webサーバ比較 | Apache(アパッチ) | Nginx(エンジンエックス) |
| -------- | -------- | -------- |
| 歴史 | 古い(信頼と実績) | 新しい |
| 設定 | シンプル | 設定項目多め |
| 処理性能(アクセス数) | 遅くなりやすい | 高速 |
| 再起動 | あり | なし |

## 実際にWebサーバ(Nginx)付きのWebアプリ環境を構築する

git clone

### Dockerfileで環境導入

FROM tiangolo/uwsgi-nginx-flask:python3.6-alpine3.8

ENV STATIC_PATH /static

RUN apk --update add tzdata && \
    cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \
    apk del tzdata && \
    rm -rf /var/cache/apk/*
COPY ./requirements.txt /app
RUN pip install -r requirements.txt

### インストールしたい外部ライブラリを指定

vi requirements.txt

#開発する際は、ここに必要なお好きなライブラリを書き込んでください
#例：numpy==1.16.4

### docker-compose.ymlで複数の環境を記述

vi docker-compose.yml

version: "2"

services:
  web:
    build: ./
    ports:
      - "80:80"
    volumes:
      - .:/app
    environment:
      - FLASK_APP=app.py
      - 'RUN=flask run --host=0.0.0.0 --port=80'

### docker-composeを実行

docker-compose up