[Pythonで作るWEBアプリ開発] Flaskで、HTML、CSSファイルを表示するWebサーバーを作る

Flask

2020.08.182022.02.11

けんろう

Raspberry Pi上に、

PythonフレームワークであるFlaskを使って、

HTML、CSSファイルを表示するWebサーバを立てる方法を紹介します　

■前提
■今回作成するアプリ
■まとめ

■前提

まず、Python、Flaskはインストール済みという前提です。
インストールしていない人は、Python、Flaskをインストールしてください。

■今回作成するアプリ

HTML,CSSファイルを表示するWebサーバを作ります。

■ディレクトリ構成

以下のディレクトリ構成を用意ください。

/home/pi/app/app.py
/home/pi/app/templates/hello.html

ここにある、app.py、hello.htmlを作成していきます。

■サンプルコード

まずは、app.pyです。

# -*- coding: utf-8 -*-
 
from flask import Flask, render_template
app = Flask(__name__)
 
@app.route("/")
def index():
    return "This is the root page."
 
@app.route("/hello")
def example():
    return render_template("hello.html")
 
if __name__ == "__main__":
    app.run()

次は、hello.htmlです。

<html>
    <body>
        <h1>Hello Flask!!!</h1>
    </body>
</html>

■サーバ起動方法

・コンソールを立ち上げて、
・app.pyが保存されているディレクトリに移動します。
・以下のコマンドを入力します。

$ python3 app.py

・ブラウザを開いてください
・ブラウザのurl画面に、以下の内容を入力してください。

http://localhost:5000/

ブラウザ上に、以下の文言が表示されているはずです。

This is the root page.

次に、
・ブラウザのurl画面に、以下の内容を入力してください。

http://localhost:5000/hello

ブラウザ上に、以下の文言が表示されているはずです。

Hello Flask!!!

■CSSで見た目を変える

次に、CSSファイルで見た目を変えてみます。

■ディレクトリ構成

以下のディレクトリ構成を用意ください。

/home/pi/app/app.py
/home/pi/app/templates/hello.html
/home/pi/app/static/style.css ←　新しく用意してください

ここにある、style.css、hello.htmlを作成していきます。
app.pyは、そのままです。

■サンプルコード

まずは、style.cssです。

h1 {
    color: #eee;
}

次は、hello.htmlを以下のように変更します。

<html>
    <head>
      <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    </head>
    <body>
      <h1>Hello Flask!!!</h1>
    </body>
</html>

■サーバ起動方法

・コンソールを立ち上げて、
・app.pyが保存されているディレクトリに移動します。
・以下のコマンドを入力します。

$ python3 app.py

・ブラウザを開いてください
・ブラウザのurl画面に、以下の内容を入力してください。

http://localhost:5000/hello

ブラウザ上に、以下の文言が灰色で表示されているはずです。

Hello Flask!!!

■まとめ

FlaskというWebアプリケーションフレームワークを利用して、HTML、CSSファイルを表示するWebサーバを作りました。

リンク