/ Arch Linux

Flask触ってみた - 導入

Pythonの軽量Web Application FrameworkであるFlaskを触る機会があったので,ここに残しておく.

Flaskの環境構築

まずはFlaskの環境を構築する.OSはArchLinuxを想定し,Python 3系をベースとする.

Python環境の構築

まず,Pythonをインストールしていない場合は以下のコマンドを実行してインストールする.

$ yaourt -S python

次に,Pythonのパッケージ管理を手軽に行えるpipを以下のコマンドでインストールする.

$ curl -O https://bootstrap.pypa.io/get-pip.py
# python get-pip.py

Flaskをインストール

以下のコマンドで,pipを用いてFlaskをインストールする.

# pip install Flask

Flaskを触ってみる

まず,適当なディレクトリ(ここではHelloFlaskとする)の下に以下のような階層構造を作成する.

- HelloFlask/
  - FlaskApp/
    - app.py
    - static/
      - css/
        - sample.css
      - js/
        - sample.js
    - templates/
      - index.html

次に,index.htmlsample.jssample.cssを以下のように作成する.

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <meta content="width=device-width, initial-scale=1" name="viewport"></meta>
    <title>HelloFlask</title>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="../static/css/sample.css">
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
          <h1 class="text-center" id="hello">Hello Flask</h1>
          <button class="btn btn-default" id="button">Change text</button>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="../static/js/sample.js"></script>
  </body>
</html>

sample.js

$(window).load(init());

function init() {
  $("#button").click(function() {
    $("#hello").text("Yeah!");
  });
}

sample.css

div.container-fluid {
  text-align: center;
}

#hello {
  background-color: #F8F4E6;
}

また,app.pyを次のように編集する.

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask, render_template

app = Flask(__name__)


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


if __name__ == '__main__':
    app.run(host="127.0.0.1", port=8080)

編集できたら,app.pyのあるディレクトリでpython app.pyを実行する.
Running on http://127.0.0.1:8080/ (Press CTRL+C to quit)といったような出力があれば,Flaskの起動に成功している.

あとは,Webブラウザから表示されているアドレスに接続すれば,Flaskがリクエストを受け取って先ほど作成したWebページを表示してくれる.

また,このシステムを外部に公開する場合は,app.pyapp.runで指定しているIPアドレスをサーバの外向けIPアドレスや0.0.0.0に変えて,ファイアウォールがある場合は設定を変更して外部ネットワークからアクセスできるようにすればいい.

なお,作成したサンプルアプリはGitHubに公開している.