Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

イントロ

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
6
Help us understand the problem. What are the problem?