4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

第1回 作りながら覚えるFlask+Pipenv 〜フォルダごとのURLルーティングについて〜

Last updated at Posted at 2021-02-17

#概要
●記事一覧
第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へのデプロイ後、ドメインでアクセスできるように設定〜

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?