Flask を使用して Web アプリケーションを構築し、クラウドにデプロイする方法

サルバドール・ヴィラロン著

はじめに

各セクションでは、従うべきコードの一部を示します。チュートリアルで使用されるすべてのコードは、この GitHub リポジトリで入手できます。

HTTP とは何ですか?Flask と何の関係がありますか?

HTTP は Web サイトのプロトコルです。インターネットは、コンピューターやサーバーと対話し、通信するためにこれを使用します。日常の使い方の一例をご紹介します。

ブラウザのアドレスバーに Web サイトの名前を入力し、Enter キーを押したとき。 HTTP リクエストがサーバーに送信されると何が起こります。

たとえば、アドレスバーに「google.com」と入力して Enter キーを押すと、HTTP リクエストが Google サーバーに送信されます。 Google サーバーはリクエストを受信し、そのリクエストを解釈する方法を理解する必要があります。 Google サーバーは、Web ブラウザが受信した情報を含む HTTP 応答を送り返します。次に、ブラウザのページに要求した内容が表示されます。

Flask はどのように関与していますか?

サーバー側の処理を行うコードを記述します。私たちのコードはリクエストを受け取ります。これらのリクエストが何を扱っているのか、何を求めているのかを把握します。また、ユーザーにどのような応答を送信するかも決定します。

これをすべて行うには、Flask を使用します。

フラスコとは何ですか?

これにより、Web アプリケーションの設計プロセスが簡素化されます。 Flask を使用すると、ユーザーが何を要求しているのか、どのような応答を返す必要があるのかに焦点を付けることができます。

マイクロフレームワークについて詳しくは、こちらをご覧ください。

Flask アプリはどのように機能しますか?

このコードを使用すると、Web サイトであるかのように、提供できる基本的な Web アプリケーションを実行できます。

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, World!"
    
if __name__ == "__main__":
    app.run(debug=True)

このコード部分は main.py に保存されます。

行 1: ここでは、Flask モジュールをインポートし、Flask モジュールから Flask Web サーバーを作成しています。

行 3: __name__ は、この現在のファイルを意味します。この場合は main.py になります。この現在のファイルは Web アプリケーションを表します。

Flask クラスのインスタンスを作成し、それを app と呼びます。ここでは新しい Web アプリケーションを作成しています。

行 5: これはデフォルトのページを表します。たとえば、スラッシュの後に何もない「google.com/」などの Web サイトにアクセスしたとします。これがGoogleのデフォルトページになります。

行 6 ～ 7: ユーザーが私の Web サイトにアクセスし、デフォルトのページ (スラッシュの後には何もない) に移動すると、以下の機能が有効になります。

行 9: Python スクリプトを実行すると、Python は実行時にスクリプトに名前「__main__」を割り当てます。

別のスクリプトをインポートすると、if ステートメントによって他のスクリプトが実行されなくなります。 main.py を実行すると、その名前が __main__ に変更され、そのときのみ if ステートメントがアクティブになります。

行 10: これにより、アプリケーションが実行されます。 debug=True を指定すると、Python エラーの可能性が Web ページに表示されるようになります。これはエラーを追跡するのに役立ちます。

main.py を実行してみましょう

ターミナルまたはコマンドプロンプトで、main.py が含まれるフォルダーに移動します。次に、py main.py または を実行します。 >python main.py。ターミナルまたはコマンドプロンプトにこの出力が表示されるはずです。

重要な部分は、Running on http://127.0.0.1:5000/ と書かれている部分です。

127.0.0.1 は、このローカルコンピューターを意味します。この意味がわからない場合は (私も始めたときはわかりませんでしたが、この記事は本当に役立ちます)、主な考え方は 127.0.0.1 と localhost がこのローカルコンピューターを指すということです。

そのアドレスにアクセスすると、次の内容が表示されるはずです。

Flask をもっと楽しく

先ほど、 app.route(“/ ”) という 1 つのルートで main.py を実行したときに何が起こるかを見ました。

違いを確認できるようにルートをさらに追加してみましょう。

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, World!"
    
@app.route("/salvador")
def salvador():
    return "Hello, Salvador"
    
if __name__ == "__main__":
    app.run(debug=True)

9 ～ 11 行目です。新しいルートを追加しました。今回は /salvador です。

次に main.py を再度実行し、 http://localhost:5000/salvador に移動します。

これまではテキストを返してきました。 HTMLとCSSを追加して、Webサイトの見栄えを良くしましょう。

HTML、CSS、および仮想環境

Flask の HTML とテンプレート

まず、新しい HTML ファイルを作成します。私はhome.html という名前を付けました。

ここに、始めるためのコードがいくつかあります。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Flask Tutorial</title>
  </head>
  <body>
    <h1> My First Try Using Flask </h1>
    <p> Flask is Fun </p>
  </body>
</html>

覚えておくべき重要なポイント

Flask Framework はテンプレートと呼ばれるフォルダーで HTML ファイルを探します。テンプレートフォルダーを作成して、そこにすべての HTML ファイルを置く必要があります。

次に、作成した HTML ファイルを表示できるように main.py を変更する必要があります。

from flask import Flask, render_template      

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")
    
@app.route("/salvador")
def salvador():
    return "Hello, Salvador"
    
if __name__ == "__main__":
    app.run(debug=True)
  We made two new changes

行 1: フラスコフレームワークから render_template() メソッドをインポートしました。 render_template() は、テンプレートフォルダー内でテンプレート (HTML ファイル) を検索します。次に、要求したテンプレートがレンダリングされます。 render_templates() 関数の詳細については、こちらをご覧ください。

7 行目: 戻り値を変更して、render_template(“home.html ”) を返すようにしました。これにより、HTML ファイルを表示できるようになります。

次に、ローカルホストにアクセスして変更を確認します: http://localhost:5000/。

ページを追加しましょう

templates フォルダ内にabout.html を作成しましょう。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>About Flask</title>
  </head>
  <body>
    <h1> About Flask </h1>
    <p> Flask is a micro web framework written in Python.</p>
    <p> Applications that use the Flask framework include Pinterest,
      LinkedIn, and the community web page for Flask itself.</p>
  </body>
</html>

main.py に対して前に行ったのと同様の変更を加えてみましょう。

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")
    
@app.route("/about)
def about():
    return render_template("about.html")
    
if __name__ == "__main__":
    app.run(debug=True)

次の 3 つの新しい変更を加えました。

9 行目: ルートを"/about"に変更します。

10 行目: 関数を次のように変更します def about():

行 11: render_template("about.html") を返すように戻り値を変更します。

変更内容を確認します: http://localhost:5000/about。

両方のページをナビゲーションで接続しましょう

両方のページを接続するには、上部にナビゲーションメニューを表示します。 Flask を使用すると、ナビゲーションメニューの作成プロセスが簡単になります。

まずtemplate.html を作成しましょう。 この template.html は親テンプレートとして機能します。 2 つの子テンプレートはそこからコードを継承します。

 <!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
   <meta charset="utf-8">
   <title>Flask Parent Template</title>
   <link rel="stylesheet" href="{{ url_for('static',     filename='css/template.css') }}">
 </head>
 <body>
    <header>
      <div class="container">
        <h1 class="logo">First Web App</h1>
        <strong><nav>
          <ul class="menu">
            <li><a href="{{ url_for('home') }}">Home</a></li>
            <li><a href="{{ url_for('about') }}">About</a></li>
          </ul>
        </nav></strong>
      </div>
    </header>
    
    {% block content %}
    {% endblock %}
    
 </body>
</html>

行 13 ～ 14: url_for() という関数を使用します。 関数の名前を引数として受け取ります。ここでは関数の名前を付けました。詳細については、url_for() 関数をご覧ください。

中括弧で囲まれた 2 行は、home.html と about.html のコンテンツに置き換えられます。 これは、ユーザーが閲覧している URL によって異なります。

これらの変更により、子ページ (home.html および about.html) が親ページ (template.html) に接続できるようになります。これにより、about.html と home.html のナビゲーションメニューのコードをコピーする必要がなく なります。

about.html の内容:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>About Flask</title>
  </head>
  <body>
    {% extends "template.html" %}
    {% block content %}
    
    <h1> About Flask </h1>
    <p> Flask is a micro web framework written in Python.</p>
    <p> Applications that use the Flask framework include Pinterest,
      LinkedIn, and the community web page for Flask itself.</p>
      
    {% endblock %}
  </body>
</html>

home.html の内容:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Flask Tutorial</title>
  </head>
  <body>
    {% extends "template.html" %}
    {% block content %}
    
    <h1> My First Try Using Flask </h1>
    <p> Flask is Fun </p>
    
    {% endblock %}
  </body>
</html>

CSS を追加してみましょう。

Web サイトに CSS を追加する

覚えておくべき重要な注意事項

すべての HTML テンプレートを保存するために templates というフォルダーを作成したのと同じ方法で、 static というフォルダーが必要です。

CSS、JavaScript、画像、その他の必要なファイルを静的に保存します。そのため、スタイルシートを保存するCSSフォルダーを作成することが重要です。 これを実行すると、プロジェクトフォルダーは次のようになります。

CSS を HTML ファイルにリンクする

template.html はすべてのページにリンクするものです。ここにコードを挿入すると、すべての子ページに適用されます。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Flask Parent Template</title>
    
    <link rel="stylesheet" href="{{ url_for('static',    filename='css/template.css') }}">
    
</head>
  <body>
    <header>
      <div class="container">
        <h1 class="logo">First Web App</h1>
        <strong><nav>
          <ul class="menu">
            <li><a href="{{ url_for('home') }}">Home</a></li>
            <li><a href="{{ url_for('about') }}">About</a></li>
          </ul>
        </nav></strong>
      </div>
    </header>
    
{% block content %}
{% endblock %}

 </body>
</html>

7 行目: ここでは、template.css が配置されている場所へのパスを指定しています。

変更内容を確認します: http://localhost:5000/about。

Flask と virtualenv を前進させる

Flask の使用に慣れてきたので、将来のプロジェクトで Flask を使用し始めることができます。常に行うべきことの 1 つは、virtualenv を使用することです。

virtualenv を使用する理由

Python は、Web 開発以外の他のプロジェクトにも使用できます。

プロジェクトには、異なるバージョンの Python がインストールされ、異なる依存関係やパッケージがインストールされている場合があります。

virtualenv を使用して、Python プロジェクト用の分離環境を作成します。これは、他のプロジェクトがどのような依存関係を持っているかに関係なく、各プロジェクトが独自の依存関係を持つことができることを意味します。

virtualenv の使用を開始する

まず、コマンドプロンプトまたはターミナルで次のコマンドを実行します。

pip install virtualenv

次に、次の操作を行います。

virtualenv “name of virtual environment”

ここで環境に名前を付けることができます。通常は「virtual」という名前を付けます。 virtualenv virtual. のようになります。

仮想環境を設定したら、プロジェクトフォルダーを確認してください。このように見えるはずです。仮想環境はアプリファイルが配置されているのと同じディレクトリに作成する必要があります。

仮想環境のアクティブ化

次に、ターミナルまたはコマンドプロンプトに移動します。 activate というファイルが含まれているディレクトリに移動します。 activate というファイルは、Windows の場合は Scripts、OS X および Linux の場合は bin というフォルダ内にあります。

OS X および Linux 環境の場合:

$ name of virtual environmnet/bin/activate

Windows環境の場合:

name of virtual environment\Scripts\activate

私は Windows マシンを使用しているため、環境をアクティブ化すると次のようになります。

次のステップは、環境内でアプリケーションを実行できるように、仮想環境に flask をインストールすることです。次のコマンドを実行します。

pip install flask

アプリケーションを実行し、http://localhost:5000/ に移動します。

ついにWebアプリケーションを作成しました。今、私たちのプロジェクトを全世界に見せたいと思っています。

(virtualenv の詳細については、virtualenv に関する次のガイドと Flask 公式ドキュメントを参照してください)

クラウドに送信してみよう

自分が作成したプロジェクトを他の人に見せるには、クラウドサービスの使用方法を学ぶ必要があります。

Web アプリケーションをクラウドにデプロイする

Web アプリケーションをクラウドにデプロイするには、Google App Engine (標準環境) を使用します。これはサービスとしてのプラットフォーム (PaaS) の例です。

PaaS とは、ダウンロードやインストールを行わずに、インターネット経由でオペレーティングシステムと関連サービスを配信することを指します。このアプローチにより、顧客は基盤となるインフラストラクチャに投資することなくアプリケーションを作成して展開できるようになります (PaaS の詳細については、TechTarget をご覧ください)。

Google App Engine は、開発者や企業が Google の高度なインフラストラクチャである TechOpedia を使用してアプリケーションを構築および実行できるようにする、サービスとしてのプラットフォームです。

始める前に:

Google アカウントが必要です。 アカウントを作成したら、Google Cloud Platform Console に移動して新しいプロジェクトを作成します。また、Google Cloud SDK をインストールする必要があります。

このチュートリアルを終えると、プロジェクトの構造は次のようになります。

app.yaml、appengine_config.py、requirements.txt の 3 つの新しいファイルを作成する必要があります。

app.yaml の内容:

runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /static
  static_dir: static
- url: /.*
  script: main.app
  
libraries:
  - name: ssl
    version: latest

Google のチュートリアルでapp.yaml の内容について説明している部分を確認すると、私がライブラリについて書いたセクションは含まれていません。

初めて単純な Web アプリをデプロイしようとしたとき、デプロイは機能しませんでした。何度も試した結果、SSL ライブラリを含める必要があることがわかりました。

SSL ライブラリを使用すると、クライアントとサーバーの間に安全な接続を作成できます。ユーザーは当社の Web サイトにアクセスするたびに、Google App Engine によって実行されるサーバーに接続する必要があります。このためには安全な接続を作成する必要があります。 (最近知ったので、これに関する提案があれば教えてください。)

appengine_config.py の内容:

from google.appengine.ext import vendor

# Add any libraries installed in the "lib" folder.
vendor.add('lib')

要件.txt の内容:

Flask
Werkzeug

ここで、仮想環境内 (virtualenv がアクティブ化されていることを確認してください) で、requirements.txt にある新しい依存関係をインストールします。次のコマンドを実行します。

pip install -t lib -r requirements.txt

-t lib: このフラグは、ライブラリを lib フォルダにコピーし、デプロイ中に App Engine にアップロードします。

-rrequirements.txt: requirements.txt からすべてをインストールするように pip に指示します。

アプリケーションのデプロイ

アプリケーションを Google App Engine にデプロイするには、次のコマンドを使用します。

gcloud app deploy

通常は、プロジェクト [プロジェクトの ID] を含めます。

これは、デプロイするプロジェクトを指定します。コマンドは次のようになります。

gcloud app deploy --project [ID of Project]

アプリケーション

次に、アプリケーションの URL を確認します。アプリケーションは次の方法で保存されます。

"your project id".appspot.com

私のアプリケーションはここにあります: http://sal-flask-tutorial.appspot.com

結論

このチュートリアルで、皆さんは次の方法を学びました。

Python をサーバーサイド言語として使用するには、Flask と呼ばれるフレームワークを使用します。
HTML、CSS、Flaskを使用してWebサイトを作成する方法を学びました。
virtualenv を使用して仮想環境を作成する方法を学習しました。
Google App Engine スタンダード環境を使用して、アプリケーションをクラウドにデプロイします。

学んだこと

この小さなプロジェクトから私は 3 つの重要なことを学びました。

まず、静的 Web サイトと Web アプリケーションの違いについて学びました

静的ウェブサイト:

サーバーが HTML、CSS、および JavaScript ファイルをクライアントに提供していることを意味します。ユーザーがサイトを操作しても、サイトのコンテンツは変わりません。

ウェブアプリケーション:

Web アプリケーションまたは動的 Web サイトは、取得したデータ (ほとんどの場合はデータベース) に基づいてコンテンツを生成します。このデータは、サイトとのユーザーの対話に基づいて変更されます。 Web アプリケーションでは、サーバーはデータのクエリ、取得、更新を担当します。このため、Web アプリケーションは、単純なアプリケーション (Reddit) の静的 Web サイトよりも遅くなり、デプロイが難しくなります。

サーバー側とクライアント側:

Web アプリケーションには 2 つの側面があることがわかりました。クライアント側とサーバー側。クライアント側はユーザーが対話する部分であり、サーバー側はユーザーが入力したすべての情報が処理される場所です。

2 番目に、クラウドサービスについて学びました

以前のプロジェクトのほとんどは静的 Web サイトであり、それらをデプロイするために GitHub Pages を使用しました。 GitHub Pages は、GitHub リポジトリからプロジェクトをホストするように設計された無料の静的サイトホスティングサービスです。

Web アプリケーションを操作する場合、GitHub Pages を使用してアプリケーションをホストすることができませんでした。 GitHub Pages は静的な Web サイトのみを対象としており、サーバーとデータベースを必要とする Web アプリケーションのような動的なものには対応していません。 Amazon Web Services や Heroku などのクラウドサービスを使用する必要がありました

第三に、Python をサーバーサイド言語として使用する方法を学びました

Web アプリケーションのサーバー側を作成するには、サーバー側言語を使用する必要がありました。 Flaskというフレームワークを使えばサーバーサイド言語としてPythonを使えることを知りました。

次のステップ:

Flask を使用するとあらゆる種類のものを構築できます。 Flask が Web サイトの背後にあるコードを読みやすくするのに役立つことに気づきました。私は 2018 年の夏に以下のアプリケーションを作成しましたが、さらに作成したいと考えています。

個人プロジェクト

Twilio SMS アプリ
私の個人的なウェブサイト

インターンシップ中に

Docker とコンテナについて学んだプロジェクトの一部

このチュートリアルの作成に役立ったリソースのリストは次のとおりです。

「App Engine — あらゆる言語でスケーラブルな Web およびモバイルバックエンドを構築 |アプリエンジン |グーグルクラウド。「Google、Google、cloud.google.com/appengine/」
「Python Flaskでウェブサイトを構築する。」」PythonHow、pythonhow.com/building-a-website-with-python-flask/。
「Flask — 講義 2 — Python と JavaScript を使用した CS50 の Web プログラミング」」YouTube、2018 年 2 月 6 日、youtu.be/j5wysXqaIV8。
「App Engine スタンダード環境で Flask を使ってみる | Python の App Engine スタンダード環境 |グーグルクラウド。「Google、Google、cloud.google.com/appengine/docs/standard/python/getting-started/python-standard-env」。
「インストール。「ようこそ | Flask (Python マイクロフレームワーク)、flask.pocoo.org/docs/0.12/installation/。
「Python — Github ページで静的 Flask サイトを無料でデプロイします。 ”Reddit、www.reddit.com/r/Python/comments/1iewqt/deploying_static_flask_sites_for_free_on_github/。
本物のパイソン。「Python 仮想環境: 入門 — 本物の Python。 ”リアル Python、リアル Python、2018 年 8 月 7 日、realpython.com/python-virtual-environments-a-primer/。
「クラウドサービスって何？」 — WhatIs.com による定義。」SearchITChannel、searchitchannel.techtarget.com/definition/cloud-services。
「Google App Engine（GAE）とは何ですか？」 — Techopedia の定義。 Techopedia.com、www.techopedia.com/definition/31267/google-app-engine-gae。

ご提案やご質問がございましたら、お気軽にコメントを残してください。