CentOS7.2(Vagrant)環境でpython3とFlaskを導入する #Python3

イントロ

今更ながらpython3+Flaskの導入をまとめてみました。
(仮想通貨の取引所の1つであるcoincheckのAPIを使ってFlaskアプリを作ってみたくなった)

ゴール：テンプレートを使ったHelloWorld表示

環境

macOS High Sierra 10.13.2
VirtualBox 5.1.30
Vagrant 2.0.1
CentOS 7.2
anaconda3-5.0.1

vagrantログイン

$ ls ./
Vagrantfile

$ vagrant ssh

以降、作業は全てvagrant上で行います。

python3導入

pyenvインストール

ついでにPATHも通します。

$ git clone https://github.com/yyuu/pyenv.git ~/.pyenv
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(pyenv init -)"' >> ~/.bashrc
$ source ~/.bashrc

anacondaインストール

python3単体をpyenvでインストールしても悪くはないのですが、
便利なのでanacondaを入れます。

$ pyenv install -l | grep anaconda
$ pyenv install anaconda3-5.0.1
$ pyenv rehash
$ pyenv global anaconda3-5.0.1
$ conda --version
conda 4.3.30
$ conda update conda
$ conda --version
conda 4.4.4

Flask導入

Flaskのインストールチェック

anacondaを入れたのでおそらく既に入っていると思いますが、念のためチェックしておきます。

$ conda list | grep flask
flask                     0.12.2
flask-cors                3.0.3

0.12.2で入っていました。

プロジェクトフォルダ作成

Vagrantの共有フォルダにプロジェクトフォルダを作ります。
※自分の場合、共有フォルダ名はprojectsにしています。

$ cd /home/vagrant/projects
$ mkdir -p FlasCoin
$ cd FlasCoin

ディレクトリ構築

少しだけちゃんとしたディレクトリ構造にしてみます。

init.sh

mkdir -p ./flascoin/{static,templates}
touch manage.py
touch flascoin/{__init__,views}.py
touch flascoin/static/style.css
touch flascoin/templates/{layout,index}.html

$ sh init.sh
$ tree .
.
├── flascoin
│   ├── __init__.py
│   ├── static
│   │   └── style.css
│   ├── templates
│   │   ├── index.html
│   │   └── layout.html
│   └── views.py
├── init.sh
└── manage.py

ファイルを弄っていきます。

manage.py

from flascoin import app
app.run(host='0.0.0.0', port=3050, debug=True)

※host：ホストOSからアクセスを受け付けるためにとりあえず0.0.0.0とします。
※port：Vagrantfileのforwarded_portで指定しているものにします。

flascoin/__init__.py

from flask import Flask

app = Flask(__name__)

import flascoin.views

flascoin/views.py

from flask import render_template, url_for
from flascoin import app

@app.route('/')
def greeting():
    return render_template('index.html', message='Hello world!')

flascoin/templates/layout.html

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Flascoin</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    {% block main %}{% endblock %}
</body>
</html>

flascoin/templates/index.html

{% extends "layout.html" %}
{% block main %}
<main>
    <div class="message">{{ message }}</div>
</main>
{% endblock %}

flascoin/static/style.css

body {
    background-color: #d8d8d8;
    margin: 0;
}

.message {
    width: 100%;
    height: 100vh;
    font-size: 5rem;
    text-shadow: 5px 5px 1px #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 以下ベンダープレフィックス */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
}

動作確認

$ python manage.py
 * Running on http://0.0.0.0:3050/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 291-017-610

以上です。

参考

CentOS7にpython環境構築まとめ
 2. Flaskチュートリアル — study flask 1 ドキュメント