FlaskとPython3を使用して最初のWebアプリケーションを作成する方法

投稿日: 2022-04-20 2022-10-19
タグ: Development, Flask, python, Python Frameworks

序章

Flask は、Python言語でWebアプリケーションを作成するための便利なツールと機能を提供する軽量のPythonWebフレームワークです。単一のPythonファイルのみを使用してWebアプリケーションをすばやく構築できるため、開発者に柔軟性を提供し、新しい開発者がアクセスできるフレームワークになります。 Flaskも拡張可能であり、特定のディレクトリ構造を強制したり、開始する前に複雑なボイラープレートコードを必要としたりすることはありません。

Flaskを学ぶことで、PythonでWebアプリケーションをすばやく作成できるようになります。 Pythonライブラリを利用して、データをデータベースに保存したり、Webフォームを検証したりするなど、Webアプリケーションに高度な機能を追加できます。

このチュートリアルでは、ブラウザでHTMLテキストをレンダリングする小さなWebアプリケーションを作成します。 Flaskをインストールし、Flaskアプリケーションを作成して実行し、アプリケーションを開発モードで実行します。ルーティングを使用して、Webアプリケーションでさまざまな目的に役立つさまざまなWebページを表示します。また、ビュー機能を使用して、ユーザーが動的ルートを介してアプリケーションと対話できるようにします。最後に、デバッガーを使用してエラーのトラブルシューティングを行います。

前提条件

ローカルのPython3プログラミング環境。 Python3シリーズのローカルプログラミング環境をインストールおよびセットアップする方法のチュートリアルに従ってください。このチュートリアルでは、プロジェクトディレクトリを呼び出します flask_app.
データ型、リスト、関数などの基本的なPython3の概念の理解。 Pythonに慣れていない場合は、 Python3シリーズのコーディング方法を確認してください。
基本的なHTMLの概念の理解。背景知識については、HTMLを使用してWebサイトを構築する方法チュートリアルシリーズを確認できます。

ステップ1—Flaskのインストール

このステップでは、Python環境をアクティブ化し、pipパッケージインストーラーを使用してFlaskをインストールします。

まず、プログラミング環境をまだアクティブにしていない場合はアクティブにします。

source env/bin/activate

プログラミング環境をアクティブ化したら、を使用してFlaskをインストールします。 pip install 指図：

pip install flask

インストールが完了すると、次のように、出力の最後の部分にインストールされているパッケージのリストが表示されます。

Output...

Installing collected packages: Werkzeug, MarkupSafe, Jinja2, itsdangerous, click, flask
Successfully installed Jinja2-3.0.1 MarkupSafe-2.0.1 Werkzeug-2.0.1 click-8.0.1 flask-2.0.1 itsdangerous-2.0.1

これは、Flaskをインストールすると、他のいくつかのパッケージもインストールされたことを意味します。これらのパッケージは、Flaskがさまざまな機能を実行するために必要な依存関係です。

プロジェクトフォルダ、仮想環境を作成し、Flaskをインストールしました。これで、簡単なアプリケーションのセットアップに進むことができます。

ステップ2—簡単なアプリケーションを作成する

プログラミング環境がセットアップされたので、Flaskの使用を開始します。このステップでは、Pythonファイル内に小さなFlask Webアプリケーションを作成します。このアプリケーションでは、ブラウザーに表示するHTMLコードを記述します。

あなたの中で flask_app ディレクトリ、という名前のファイルを開きます app.py 編集には、 nano またはお気に入りのテキストエディタ：

nano app.py

次のコードを内部に記述します app.py ファイル：

フラスコ_app/app.py


from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return '<h1>Hello, World!</h1>'

ファイルを保存して閉じます。

上記のコードブロックでは、最初に Flask からのオブジェクト flask パッケージ。次に、それを使用してFlaskアプリケーションインスタンスを作成し、名前を付けます app. 特別な変数を渡します __name__、現在のPythonモジュールの名前を保持します。この名前は、それが配置されているインスタンスを示します。 Flaskが舞台裏でいくつかのパスを設定するため、これが必要です。

作成したら app たとえば、これを使用して、着信Web要求を処理し、ユーザーに応答を送信できます。 @app.route はデコレータであり、通常のPython関数をFlask ビュー関数に変換します。これにより、関数の戻り値がHTTP応答に変換され、WebブラウザなどのHTTPクライアントによって表示されます。。値を渡します '/' に @app.route() この関数がURLのWeb要求に応答することを示します /、メインURLです。

The hello() view関数は文字列を返します '<h1>Hello, World!</h1>' HTTP応答として。

これで、Pythonファイルに次のような単純なFlaskアプリケーションが作成されました。 app.py、次のステップでは、アプリケーションを実行して、 hello() Webブラウザでレンダリングされた表示機能。

ステップ3—アプリケーションの実行

Flaskアプリケーションを含むファイルを作成したら、Flaskコマンドラインインターフェイスを使用してファイルを実行し、開発サーバーを起動して、ブラウザーで、作成したHTMLコードをの戻り値としてレンダリングします。 hello() 前のステップの表示機能。

まず、あなたの中に flask_app 仮想環境がアクティブになっているディレクトリで、アプリケーションの場所をFlaskに指示します（app.py あなたの場合）を使用して FLASK_APP 次のコマンドを使用した環境変数（Windowsでは、 set それ以外の export):

export FLASK_APP=app

次に、アプリケーションを開発モードで実行することを指定します（これにより、デバッガーを使用してエラーをキャッチできます）。 FLASK_ENV 環境変数：

export FLASK_ENV=development

最後に、を使用してアプリケーションを実行します flask run 指図：

flask run

アプリケーションが実行されると、出力は次のようになります。

Output * Serving Flask app "app" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 296-353-699

上記の出力には、次のようないくつかの情報が含まれています。

実行しているアプリケーションの名前（"app").
アプリケーションが実行されている環境（development).
Debug mode: on Flaskデバッガーが実行されていることを示します。これは、問題が発生したときに詳細なエラーメッセージを提供し、トラブルシューティングを容易にするため、開発時に役立ちます。
アプリケーションはURLでローカルに実行されています http://127.0.0.1:5000/. 127.0.0.1 マシンを表すIPです localhost と :5000 ポート番号です。

ブラウザを開き、URLを入力します http://127.0.0.1:5000/. テキストが表示されます Hello, World! で <h1> 応答として見出し。これにより、アプリケーションが正常に実行されていることが確認されます。

開発サーバーを停止する場合は、を押します CTRL+C.

警告： Flaskは、シンプルなWebサーバーを使用して、開発環境でアプリケーションを提供します。これは、Flaskデバッガーが実行されているため、エラーの検出が容易になることも意味します。この開発サーバーを実稼働環境で使用しないでください。詳細については、Flaskドキュメントの展開オプションページを参照してください。このFlaskデプロイメントチュートリアルをGunicornで、またはこれをuWSGI でチェックすることもできます。または、DigitalOcean App Platformを使用して、 How ToDeployaを使用してFlaskアプリケーションをデプロイすることもできます。 Gunicornを使用したFlaskアプリからAppPlatformチュートリアル。

開発を継続するには app.py アプリケーションで、開発サーバーを実行したままにして、別のターミナルウィンドウを開きます。に移動します flask_app ディレクトリ、仮想環境をアクティブ化し、環境変数を設定します FLASK_ENV と FLASK_APP、次の手順に進みます。（これらのコマンドは、このステップの前半にリストされています。）

注：新しいターミナルを開くとき、または開発サーバーを実行しているターミナルを閉じて再実行するときは、仮想環境のアクティブ化と環境変数の設定を覚えておくことが重要です。 FLASK_ENV と FLASK_APP のために flask run 正しく動作するコマンド。

サーバーを実行する必要があるのは、1つのターミナルウィンドウで1回だけです。

Flaskアプリケーションの開発サーバーがすでに実行されている間は、同じもので別のFlaskアプリケーションを実行することはできません。 flask run 指図。それの訳は flask run ポート番号を使用します 5000 デフォルトでは、実行されると、別のアプリケーションを実行できなくなるため、次のようなエラーが発生します。

OutputOSError: [Errno 98] Address already in use

この問題を解決するには、現在実行中のサーバーを停止します。 CTRL+C、次に実行します flask run 繰り返しますが、両方のアプリケーションを同時に実行する場合は、別のポート番号をに渡すことができます。 -p たとえば、ポートで別のアプリケーションを実行するための引数 5001 次のコマンドを使用します。

flask run -p 5001

これにより、1つのアプリケーションを実行できます http://127.0.0.1:5000/ ともう1つ http://127.0.0.1:5001/ あなたがしたい場合は。

これで、小さなFlaskWebアプリケーションができました。アプリケーションを実行し、Webブラウザに情報を表示しました。次に、ルートと、ルートを使用して複数のWebページを提供する方法について学習します。

ステップ4—ルートとビュー機能

このステップでは、アプリケーションにいくつかのルートを追加して、要求されたURLに応じて異なるページを表示します。また、ビュー機能とその使用方法についても学習します。

route は、ユーザーがブラウザーでWebアプリケーションにアクセスしたときに受け取るものを判別するために使用できるURLです。例えば、 http://127.0.0.1:5000/ インデックスページを表示するために使用される可能性のある主なルートです。 URL http://127.0.0.1:5000/about 訪問者にWebアプリケーションに関する情報を提供するaboutページに使用される別のルートである可能性があります。同様に、ユーザーがアプリケーションにサインインできるルートを作成できます。 http://127.0.0.1:5000/login.

現在、Flaskアプリケーションには、メインURLを要求するユーザーにサービスを提供するルートが1つあります（http://127.0.0.1:5000/). アプリケーションに新しいWebページを追加する方法を示すために、アプリケーションファイルを編集して、次のWebアプリケーションに関する情報を提供する別のルートを追加します。 http://127.0.0.1:5000/about.

まず、 app.py 編集用ファイル：

nano app.py

ファイルの最後に次の強調表示されたコードを追加して、ファイルを編集します。

フラスコ_app/app.py

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return '<h1>Hello, World!</h1>'


@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

ファイルを保存して閉じます。

と呼ばれる新しい関数を追加しました about(). この機能は、 @app.route() それをビュー関数に変換するデコレータは、 http://127.0.0.1:5000/about 終点。

開発サーバーが実行されている状態で、ブラウザーを使用して次のURLにアクセスします。

http://127.0.0.1:5000/about

テキストが表示されます This is a Flask web application. でレンダリング <h3> HTMLの見出し。

1つのビュー機能に複数のルートを使用することもできます。たとえば、両方でインデックスページを提供できます / と /index/. これを行うには、 app.py 編集用ファイル：

nano app.py

別のデコレータをに追加してファイルを編集します hello() ビュー機能：

フラスコ_app/app.py

from flask import Flask

app = Flask(__name__)

@app.route('/')
@app.route('/index/')
def hello():
    return '<h1>Hello, World!</h1>'

@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

ファイルを保存して閉じます。

この新しいデコレータを追加すると、両方のインデックスページにアクセスできます http://127.0.0.1:5000/ と http://127.0.0.1:5000/index.

これで、ルートとは何か、それらを使用してビュー機能を作成する方法、およびアプリケーションに新しいルートを追加する方法を理解できました。次に、動的ルートを使用して、ユーザーがアプリケーションの応答を制御できるようにします。

ステップ5—動的ルート

このステップでは、動的ルートを使用して、ユーザーがアプリケーションを操作できるようにします。 URLを通過した単語を大文字にするルートと、2つの数字を足して結果を表示するルートを作成します。

通常、ユーザーはURLを手動で編集してWebアプリケーションを操作することはありません。むしろ、ユーザーは、ユーザーの入力とアクションに応じて異なるURLにつながるページ上の要素を操作しますが、このチュートリアルの目的のために、URLを編集して、アプリケーションが異なるURLで異なる応答をする方法を示します。

まず、 app.py 編集用ファイル：

nano app.py

次の編集で行うように、URLの値など、ユーザーがWebアプリケーションに何かを送信できるようにする場合は、アプリが信頼できないデータ（ユーザーのデータ）を直接表示しないように常に注意する必要があります。送信）。ユーザーデータを安全に表示するには、 escape() 付属の機能 markupsafe Flaskと一緒にインストールされたパッケージ。

編集 app.py ファイルの先頭、上に次の行を追加します Flask 輸入：

フラスコ_app/app.py

from markupsafe import escape
from flask import Flask

# ...

次に、ファイルの最後に次のルートを追加します。

フラスコ_app/app.py

# ...

@app.route('/capitalize/<word>/')
def capitalize(word):
    return '<h1>{}</h1>'.format(escape(word.capitalize()))

ファイルを保存して閉じます。

この新しいルートには可変セクションがあります <word>. これにより、FlaskはURLから値を取得し、それをビュー関数に渡すように指示されます。 URL変数 <word> キーワード引数をに渡します capitalize() ビュー機能。引数の名前はURL変数と同じです（word この場合）。これにより、URLを介して渡された単語にアクセスし、 capitalize() Pythonのメソッド。

あなたは escape() レンダリングするために以前にインポートした関数 word テキストとしての文字列。これは、クロスサイトスクリプティング（XSS）攻撃を回避するために重要です。ユーザーが単語の代わりに悪意のあるJavaScriptを送信した場合、 escape() テキストとしてレンダリングされ、ブラウザはそれを実行せず、Webアプリケーションを安全に保ちます。

大文字の単語を内部に表示するには <h1> HTML見出し、使用する format() Pythonメソッド。このメソッドの詳細については、Python3で文字列フォーマッターを使用する方法を参照してください。

開発サーバーが実行されている状態で、ブラウザーを開き、次のURLにアクセスします。ハイライトされた単語は、任意の単語に置き換えることができます。

http://127.0.0.1:5000/capitalize/hello
http://127.0.0.1:5000/capitalize/flask
http://127.0.0.1:5000/capitalize/python

あなたはで大文字にされたURLの単語を見ることができます <h1> ページ上のタグ。

ルートで複数の変数を使用することもできます。これを示すために、2つの正の整数を加算して結果を表示するルートを追加します。

あなたの app.py 編集用ファイル：

nano app.py

次のルートをファイルの最後に追加します。

フラスコ_app/app.py

# ...

@app.route('/add/<int:n1>/<int:n2>/')
def add(n1, n2):
    return '<h1>{}</h1>'.format(n1 + n2)

ファイルを保存して閉じます。

このルートでは、特殊コンバーターを使用します int URL変数を使用して（/add/<int:n1>/<int:n2>/）正の整数のみを受け入れます。デフォルトでは、URL変数は文字列と見なされ、そのように扱われます。

開発サーバーが実行されている状態で、ブラウザーを開き、次のURLにアクセスします。

http://127.0.0.1:5000/add/5/5/

結果は2つの数値の合計になります（10 この場合）。

これで、動的ルートを使用して、要求されたURLに応じて単一のルートにさまざまな応答を表示する方法を理解できました。次に、エラーが発生した場合にFlaskアプリケーションのトラブルシューティングとデバッグを行う方法を学習します。

ステップ6—Flaskアプリケーションのデバッグ

Webアプリケーションを開発するとき、アプリケーションが期待する動作ではなくエラーを表示する状況に頻繁に遭遇します。変数のスペルを間違えたり、関数の定義やインポートを忘れたりする可能性があります。これらの問題の修正を容易にするために、Flaskは、アプリケーションを開発モードで実行するときにデバッガーを提供します。このステップでは、Flaskデバッガーを使用してアプリケーションのエラーを修正する方法を学習します。

エラーの処理方法を示すために、ユーザー名のリストからユーザーに挨拶するルートを作成します。

あなたの app.py 編集用ファイル：

nano app.py

次のルートをファイルの最後に追加します。

フラスコ_app/app.py

# ...

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    return '<h2>Hi {}</h2>'.format(users[user_id])

ファイルを保存して閉じます。

上記のルートでは、 greet_user() ビュー関数は user_id からの議論 user_id URL変数。あなたは int 正の整数を受け入れるコンバーター。関数内には、というPythonリストがあります。 users、ユーザー名を表す3つの文字列が含まれています。 view関数は、提供されたものに応じて作成された文字列を返します user_id. の場合 user_id は 0、応答は Hi Bob で <h2> タグを付ける理由 Bob リストの最初の項目です（の値 users[0]).

開発サーバーが実行されている状態で、ブラウザーを開き、次のURLにアクセスします。

http://127.0.0.1:5000/users/0
http://127.0.0.1:5000/users/1
http://127.0.0.1:5000/users/2

次の応答が返されます。

OutputHi Bob
Hi Jane
Hi Adam

これは今のところうまく機能しますが、存在しないユーザーに挨拶を要求するとうまくいかない可能性があります。 Flaskデバッガーがどのように機能するかを示すには、次のURLにアクセスしてください。

http://127.0.0.1:5000/users/3

次のようなページが表示されます。

上部のページには、Python例外の名前 IndexError が表示され、リストのインデックス（3 この場合）はリストの範囲外です（これは 0 に 2 リストには3つの項目しかないため）。デバッガーでは、この例外を発生させたコード行を示すトレースバックを確認できます。

トレースバックの最後の2行は、通常、エラーの原因を示しています。あなたの場合、行は次のようになります。

File "/home/USER/flask_app/app.py", line 28, in greet_user
    return '<h2>Hi {}</h2>'.format(users[user_id])

これは、エラーが greet_user() 内部の機能 app.py ファイル、特に return ライン。

例外を発生させる元の行を知っていると、コードで何がうまくいかなかったかを判断し、それを修正するために何をすべきかを判断するのに役立ちます。

この場合、単純なものを使用できます try...except このエラーを修正する句。要求されたURLにリストの範囲外のインデックスがある場合、ユーザーは 404 Not Found エラーを受け取ります。これは、探しているページが存在しないことをユーザーに通知するHTTPエラーです。

あなたの app.py 編集用ファイル：

nano app.py

HTTP 404エラーで応答するには、Flaskの abort（）関数が必要です。この関数を使用してHTTPエラー応答を行うことができます。ファイルの2行目を変更して、この関数もインポートします。

フラスコ_app/app.py

from markupsafe import escape
from flask import Flask, abort

次に、 greet_user() 次のように見える関数を表示します。

フラスコ_app/app.py

# ...

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    try:
        return '<h2>Hi {}</h2>'.format(users[user_id])
    except IndexError:
        abort(404)

あなたが使う try 上記をテストするには return エラーの式。エラーがなかった場合、つまり user_id のインデックスと一致する値を持っています users リストの場合、アプリケーションは適切な挨拶で応答します。の値が user_id リストの範囲外である、 IndexError 例外が発生し、使用します except エラーをキャッチし、HTTP404エラーで応答するには abort() フラスコヘルパー機能。

ここで、開発サーバーが実行されている状態で、URLに再度アクセスします。

http://127.0.0.1:5000/users/3

今回は、ページが存在しないことをユーザーに通知する標準の404エラーページが表示されます。

このチュートリアルの終わりまでに、 app.py ファイルは次のようになります。

フラスコ_app/app.py

from markupsafe import escape
from flask import Flask, abort

app = Flask(__name__)


@app.route('/')
@app.route('/index/')
def hello():
    return '<h1>Hello, World!</h1>'


@app.route('/about/')
def about():
    return '<h3>This is a Flask web application.</h3>'

@app.route('/capitalize/<word>/')
def capitalize(word):
    return '<h1>{}</h1>'.format(escape(word.capitalize()))

@app.route('/add/<int:n1>/<int:n2>/')
def add(n1, n2):
    return '<h1>{}</h1>'.format(n1 + n2)

@app.route('/users/<int:user_id>/')
def greet_user(user_id):
    users = ['Bob', 'Jane', 'Adam']
    try:
        return '<h2>Hi {}</h2>'.format(users[user_id])
    except IndexError:
        abort(404)

これで、Flaskデバッガーを使用してエラーのトラブルシューティングを行い、エラーを修正するための適切なアクションを決定するのに役立つ一般的なアイデアが得られました。

結論

これで、Flaskとは何か、インストール方法、Webアプリケーションの作成方法、開発サーバーの実行方法、ルートと表示機能を使用して特定のサービスを提供するさまざまなWebページを表示する方法について一般的に理解できました。目的。また、動的ルートを使用して、ユーザーがURLを介してWebアプリケーションと対話できるようにする方法、およびデバッガーを使用してエラーのトラブルシューティングを行う方法についても学習しました。

Flaskの詳細については、Flaskトピックページをご覧ください。

getdocs

13036