Flask Tutorialやったらきれいにハマった話(環境構築編)

f:id:cyclemem:20180728233523p:plain

今日は勉強記録を載せていきます。主にエラーへの対処について。
これまでPython使ってスクレイピングしたりAPIいじったりは少しやってきましたが、これをWEBアプリにしたりはまだ挑戦していなかったので、PythonのWEBフレームワークにチャレンジしてみようと思います。

PythonのWEBフレームワークだと、

が有名かと思いますが、今回はこちらの記事を参照して、一旦Flaskをやってみようかな。将来的には、open edXがDjangoで動いていたはずなので、そちらにも手を出したいところです。

PythonでWebアプリを開発したい人が何を学べばよいか初心者向けに解説してみた |

open.edx.org

今回やったこと

  • DockerでFlask Tutorialができる環境を作る
  • Flask Tutorialの1章を終わらせる

1. Webアプリケーションを作る準備 — study flask 1 ドキュメント

とにかく環境構築で失敗した

今回Flask Tutorialを進めるにあたり、とにかく環境構築で失敗しまくったので、今回試した方法を書いておきます。
試した方法は次の3つ。

1. 自分のPC上で構築
2. Cloud9を使って構築
3. Dockerを使って構築

最終的には紆余曲折を経て3でうまくいきました。それぞれ簡単に見ていきます。


1.自分のPC環境で構築する

まずは自分のPC環境で構築。これはなんで詰んだかというと、ぼくのPCのPythonがAnacondaで入っていたからです。
最初にPCにPythonの環境を作る際、Anacondaを経由してPythonのセットアップをしていると、condaというライブラリが入っている状態になります。

このcondaとvirtualenvの相性がすこぶる悪く、ぼくのPCだとうまく起動しませんでした。

$ virtualenv env

Using base prefix '/Users/taikomegane/anaconda'
New python executable in /Users/taikomegane/study_flask/handson/env/bin/python
dyld: Library not loaded: @rpath/libpython3.6m.dylib
  Referenced from: /Users/taikomegane/study_flask/handson/handson/env/bin/python
  Reason: image not found
ERROR: The executable /Users/taikomegane/study_flask/handson/env/bin/python is not functioning
ERROR: It thinks sys.prefix is '/Users/taikomegane/study_flask/handson/' (should be '/Users/taikomegane/study_flask/handson/env')
ERROR: virtualenv is not compatible with this system or executable

最初の一行目で出ているように、anacondaをベースに実行しようとした結果つまづいたのではないかと。予想してます。
エラーは沢山出てるので、他の理由があったら教えてください。


2.Cloud9で構築する

これは全部うまくいくんですが、Cloud9で実行したものをどこで開けばいいかがわからず挫折しました。

(env)taikomegane:~/workspace/study_flask/handson/helloworld (master) $ python app.py                                                                         
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   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: 220-374-413

チュートリアル通りにやるとこうなりますが、ここで「http://127.0.0.1:5000/」にアクセスしても「This site can’t be reached」と出てくるだけ。
ここは何か方法がありそうですが、一旦ここで挫折。



3.Dockerで構築する

ここで大好きなDockerちゃんの出番です。以前もこちらの書籍で勉強したときから、愛用しています。

ただこの書籍のものを使うと、やはりAnacondaのPython環境を利用しているので、1と同じ理由でうまくいかないはず。
ということで、イメージのダウンロードからし直しました。

参照記事はこちら

web-engine.hatenadiary.com


書いてある通りやっていきます。ここから少し長くなるのでセクション区切ります。

DockerでFlask Tutorialの環境構築をする方法(3ステップ)

ステップ1:Docker for MacPython環境を用意する

まずはDocker for Macを入れましょう。Windowsの人はちょっとやり方わからないですが、該当するものを探してください。

www.docker.com

インストールしたら、ちゃんと動いているか確認します。

$docker --version
Docker version 18.06.0-ce, build 0ffa825

$which docker
/usr/local/bin/docker

動いていたらPythonの環境を構築していきます。

$docker pull python:3.6

これでpython 3.6のイメージを利用できます。インストールが終わったらイメージが入っているかを確認。

$docker images
IMAGE ID            CREATED    ......
python                    3.6           ......

ステップ2:Dockerで起動する(ここが重要!)

イメージが入っていることは確認できたので、早速起動していきましょう。普通に起動してもいいですが、エディタ入れたり面倒だと思うのでめっちゃオプション付けてやります。(xxxxxは自分のユーザ名を入れてください)

docker run -it -v /Users/xxxx:/Users/xxxx \
    -e LANG=ja_JP.UTF-8 \
    -e PYTHONIOENCODING=utf_8 \
    -p 4000:80 python:3.6 /bin/bash

ここは簡単に確認しておきます。

  • -it:これは管理者権限与えたりするやつ?だと思います
  • -v /Users/xxxx:/Users/xxxx:この設定をしておくと自分のファイルをマウントさせることができ、Dockerでの実行、自分の手元で編集ができます
  • -e LANG=ja_JP.UTF-8:日本語設定です
  • -e PYTHONIOENCODING=utf_8 :Pythonエンコーディング設定
  • -p 4000:80:ここで使用するポートを指定します。docker上の80番を、ローカルの4000番からアクセスできるようになります。

ここ、最後の-pが今回の肝でした。

ステップ3:チュートリアル通り進める

ここまで来たらあとはチュートリアル通りやるだけです。

$ git clone https://github.com/planset/study_flask
$ pip install Flask
$ pip install -r requirements.txt #ここパスが違うことがあるので気をつける
$ pip intall virtualenv


これらのコードをまずは一通り実行すれば、環境構築は終了。次にpythonの仮想環境を作っていきます。

$ mkdir handson
handson $ cd handson
handson $ virtualenv env
handson $ source env/bin/activate
[env] handson $

この辺りは実際のチュートリアルを見てもらうほうがいいかと思いますが、改めて仮想環境にFlaskをインストールします。
ちなみにDocker自体が仮想環境なので、この処理が必要なのかは正直不明です。ただサーバ起動したりするのに必要かもしれないので、一旦この通りやるのをおすすめします。

[env] handson $ pip install flask
...
Successfully installed Flask Werkzeug Jinja2 itsdangerous markupsafe
Cleaning up...


ではここからサンプルファイルを用意します。

$ mkdir helloworld
$ cd helloworld
$ touch app.py  #ここはチュートリアルと違うので注意

三行目だけチュートリアルと違うのに注意してください。せっかくDockerでマウントして使っているので、ファイルは自分のPCで編集しましょう。
三行目を書けば、自分の該当フォルダに「app.py」というファイルができているはずです。そこに次のコードを入力してください。

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello world!'

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=80)

これまた最後だけチュートリアルと違うので、注意してください。
ここで「app.run(host='0.0.0.0', port=80)」を使ってポートを80に指定しています。ただDockerの80をローカルの4000番からアクセスできるように指定しているので、これでローカルからアクセスできるようになるわけです。

元ネタはこちら
qiita.com



では最後に、実行していきましょう。

$ python app.py

 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://0.0.0.0:80/ (Press CTRL+C to quit)

最後の表記が最初にローカルでやったときから変わりました。4000番からアクセスしているようにしているので、http://localhost:4000/にアクセスすると、「Hello World」と出てくるはずです。

これでOK。ここまでなんとか来ました。
明日以降はFlaskチュートリアルをこの環境で進めていこうと思います。
本日も最後までお付き合いいただきありがとうございました。
今回の記事は後ほどQiitaにもあげようと思いますので、よろしくお願いいたします。

qiita.com