イントロ
今更ながら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 ドキュメント