入社3年目 インフラ女子の備忘録

入社3年目のインフラ女子があれこれ悩みながら&つまずきながら、サーバ構築やプログラミングの手順を備忘録的に残していくブログ

pythonでflaskを使ってwebサーバを建てたい

こんにちは、ぴよまるです。いよいよwebサーバを建てる時が来ました。
しかし、pythonは勉強をはじめたばかりで右も左もわかりません。そんな中での試行錯誤した点をまとめてみました。全くの初心者が知識豊富な人の記事を見てもついていけない時があります。そんな時にこういう初心者まるだしの記事がほしいなぁ、と自分では思っていたのでこういう初心者丸出し記事も作っていくことにしました。解答一直線の記事も別で作成します。

今回のサーバ構築は以下のような環境で行います。

環境説明

OS:mac OS Cataline 10.15.4
初期ディレクトリ構成:

/Users
  `--piyomaru
     `--piyomaru
        `--python
           `--index.html

そもそもFlaskって何?

全く知識のなかった私は、webサーバを構築する時にはFlaskというフレームワークを使うと良いのだということだけしか知らず、どのようにディレクトリ構成を組んでいったら良いのかすら検討がつきませんでした。
調べた所、前身にpythonファイル1個だけから成る「bottole」というwebのフレームワークがあり、それの機能拡張版のようです。ふむ。
とりあえず何事もインストールからだ!ということでインストールをしてみます。

flaskをインストール

$ pip install flask


無事にインストール完了です。
/Users/piyomaru/.pyenv/versions/3.8.0/bin//Users/piyomaru/.pyenv/versions/3.8.0/lib/にflaskが入っていることを確認できました。

どんなファイルを作ればいいの?

Flaskを動作させるためには、ルーティングをしてくれるpythonのファイルと、テンプレートとなるhtmlファイルがあればひとまず動くようです。
しかし、ベストプラクティスの構成で最初から作りたい!ということで以下を参考にしました。
qiita.com
めちゃめちゃ作るディレクトリ多い...。
ということで一旦ベストプラクティスの構成は諦めて、必要最低限の以下のディレクトリ構成にしてみます。

/Users
  `--piyomaru
 `--piyomaru
      `--python
          |--routing.py --- ルーティング用
          |--static
          |    `--index.html --- 一番最初に出力されるHTML
          `--templates
              `--echo.html --- ルーティングされた先の出力用

作成するファイルは3つ!

そんなわけで、作成するのはこの3つです。

  • routing.py
  • index.html
  • echo.html

routing.py

ルーティング用のpythonファイルはこんな感じ。Flaskの静的ファイルのホームディレクトリはstaticになります。

from flask import Flask, render_template
app = Flask(__name__)
 
@app.route("/")
def home():
    return app.send_static_file('index.html')
 
@app.route('/echo/<name>/<place>')
def echo(name, place):
    return render_template('echo.html', name=name, place=place)

app.run(port=5000, debug=True)

/static/index.html

次はstaticディレクトリに置く、index.htmlは以下のような感じで特に何も書いてません。文字が表示されるだけ。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Index</title>
    </head>
    <body>
        Welcome to my home page!!!
    </body>
</html>

/template/echo.html

最後にTemplateディレクトリのecho.htmlです。こっちはちょっとギミック入り。echo.htmlに引数nameplaceを渡すと、その引数を使った文字が表示されます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Flask test</title>
    </head>
    <body>
        Hello  {{ name }}!
        Welcome to {{ place }}!
    </body>
</html>

いざwebサーバを立ち上げ!ようとするも...

さぁ、routing.pyを実行してwebサーバを立ち上げよう!とするものの...

$ python routing.py
Unable to import 'flask' pylint(import-error) [3,1]

なんでなんで!確かにインストールしたのに!flaskのimportができません...。

flaskへのPathが通っていない?

この辺りまで来ると、~/.bash_profile をいじるのに抵抗がなくなってきました。
さくっとflaskが入っていた、/Users/piyomaru/.pyenv/versions/3.8.0/bin//Users/piyomaru/.pyenv/versions/3.8.0/lib/をパスに追加します。

リトライ!→失敗 もう一度flaskについて学び直す

$ python routing.py
Unable to import 'flask' pylint(import-error) [3,1]

ちーん。うんともすんともです。何か間違っている気がするので、もう一度ここでflaskについての情報を探します。
すると、こんな記事を見つけました。
qiita.com

どうやら、プロジェクトごとに個別の実装環境を構築するようです。

virtualenvのインストール

virtualenvはシステムの中に分離されたPythonの仮想環境を作るためのソフトウェアです。つまりここに使用するpythonとflaskが同居していれば、pythonがflaskを見つけられて動くようになるということですね。また、いつもと違うバージョンでシステムを作りたい時にも重宝すると思います。

pip install virtualenv

インストールが完了。

virtualenvで仮想環境を作成

それでは仮想環境を作っていきます。まずは作成するディレクトリまで移動します。

cd /Users/piyomaru/piyomaru/python

そしたら、下記のコマンドでPython仮想環境を作成します。

python -m venv env

pythonディレクトリの中にenvというディレクトリが作成されます。この中にpythonも入っています。
今のディレクトリ構成はこんな感じ。

/Users
  `--piyomaru
      `--piyomaru
          `--python
              |--routing.py
              |--static
              |    `--index.html
              |--templates
              |    `--echo.html
              `--env

仮想環境を有効化する

以下のコマンドで仮想環境を立ち上げることができます。

$source env/bin/activate
(env)$ 

$マークの前に(env)がついていれば成功です。

仮想環境へflaskをインストール

もう一度、今度は仮想環境の方へflaskをインストールします。

pip install flask

無事にインストール完了です。

routing.pyの実行

python routing.py
 * Serving Flask app "routing" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 830-317-826

うおおお!動いた!サーバが立ち上がりました!ちなみに書いてある通りCTRL+Cでサーバはとまります。
さて早速ブラウザで表示されるか見てみよう。

http://127.0.0.1:5000/で接続したところ、無事にWelcome to my home page!!!と歓迎してくれました。
そしてhttp://127.0.0.1:5000/echo/Piyomaru/Japanで接続すると、上手くルーティングしてくれてHello Piyomaru! Welcome to Japan!と日本に来たことを歓迎してくれます。

仮想環境の無効化

使い終わった後は一応、仮想環境の無効化をしておきます。

deactivate

無事になんとかflaskを使用したwebサーバの構築は成功です。いやぁ、長かったなぁ...。