#概要
●記事一覧
第1回作りながら覚えるFlask+Pipenv 〜フォルダごとのURLルーティングについて〜 ※本記事
第2回作りながら覚えるFlask+Pipenv 〜Zappaを使用してAWSへのデプロイ〜
第3回作りながら覚えるFlask+Pipenv 〜AWSへのデプロイ後、ドメインでアクセスできるように設定〜

FlaskフレームワークでWebアプリケーションを作成する際、
URLごとにフォルダを分けて管理するようにしたかった(ASP.NET MVC等のように)のですが、
調べても中々見つかりませんでした。
なので、Flaskアプリケーションの簡単な使い方と合わせて整理しておきます。
また、今回はPipenv環境で作成しています。

#フォルダ構成
まず初めに最終的なフォルダ構成を記載しておきます。

application
├── Pipfile
├── Pipfile.lock
├── flask_sample
│   ├── __init__.py
│   ├── static
│   │   └── images
│   │       └── test.jpg
│   ├── templates
│   │   ├── index.html
│   │   └── test
│   │       └── index.html
│   └── views
│       └── test.py
└── wsgi.py

#手順1.仮想環境の構築
任意の場所に「application」フォルダを作成します。

mkdir application

仮想環境を構築します。
※記事作成時点でzappaがpython3.9に対応していないため、3.8で構築しています。

pipenv --python 3.8

仮想環境に入ります。

pipenv shell

Flaskフレームワークをインストールします。

pipenv install Flask

#手順2.ファイルの準備

####「application/wsgi.py」

#----------
#Flaskアプリケーション実行ファイル
#----------

from flask_sample import app

if __name__ == "__main__":
    app.run()

####「application/flask_sample/__init__.py」

#----------
#Flaskアプリケーション立ち上げ後に呼び出されるファイル
#run.py→__init__.py
#----------

#Flaskとrender_template（HTMLを表示させるための関数）をインポート
from flask import Flask,render_template

#Flaskオブジェクトの生成
app = Flask(__name__)

#「/」もしくは「/index」へアクセスがあった場合に、「index.html」を返す
@app.route("/index")
@app.route("/")
def index():
    return render_template("index.html")

#viewsフォルダ以下のpyファイルをインポート (*複数ある場合は: test1, test2...)
from flask_sample.views import test

####「application/flask_sample/templates/index.html」
*URL「/」でアクセスするファイル

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <h1>Flaskサンプルアプリケーション</h1>
    <h2>ファイル場所: /flask_sample/templates/index.html</h2>
    </body>
</html>

####「application/flask_sample/templates/test/index.html」
*URL「/test/index/」でアクセスするファイル

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <h1>テストページです</h1>
    <h2>URL: /test</h2>
    <h2>ファイル場所: /flask_sample/templates/test/index.html</h2>
    <img src="/static/images/test.jpg" alt="テスト画像">
    </body>
</html>

####「application/flask_sample/views/test.py」

#----------
#URL「/test/」以下のレンダリング処理
#----------

from flask import request, redirect, url_for, render_template, flash, session
from flask_sample import app

@app.route('/test', methods=['GET', 'POST'])
def show_entries():
    return render_template('test/index.html')

####「application/flask_sample/static/images/test.jpg」
任意の画像を設置して下さい。
「static」フォルダ以下は、画像ファイルやJavaScript、CSSファイル等を配置します。

#手順3.実行してみる
「run.py」を実行してあげるとFlaskアプリケーションが立ち上がります。

(application) ryohei@MacBook-Pro-2 application % python run.py
 * Serving Flask app "flask_sample" (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: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

正常に実行できると、最後に「Running on…」のあとにURLが表示されているのでブラウザでアクセスすると、
Flaskアプリケーションの確認ができます。

また、以下コマンドでデバッグモードで実行することも可能です。
※この場合、Flaskアプリケーション実行中にpythonファイルを変更すると、
自動的にリロードがかかってWebページが更新されます。
また、エラーがあった場合は、StackTraceも表示してくれます。

flask run --debugger --reload

#まとめ
URLとフォルダをいい感じに合わせるには、
「application/flask_sample/templates/」以下にフォルダを分けてあげると見やすくなります。
例: 「/product/list」のURLでアクセスさせたい場合、
フォルダ構造は「application/flask_sample/templates/product/list.html」になります。
その場合、「application/flask_sample/views/product.py」ファイルの追加と、
「application/flask_sample/__init__.py」に

from flask_sample.views import product

の追記が必要になります。

お疲れ様です！

●記事一覧
第1回作りながら覚えるFlask+Pipenv 〜フォルダごとのURLルーティングについて〜 ※本記事
第2回作りながら覚えるFlask+Pipenv 〜Zappaを使用してAWSへのデプロイ〜
第3回作りながら覚えるFlask+Pipenv 〜AWSへのデプロイ後、ドメインでアクセスできるように設定〜