Flask Python RaspberryPi

[Raspberry Pi] Flaskで、HTML、CSSファイルを表示するWebサーバーを作ってみる

更新日:

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サーバを作りました。

-Flask, Python, RaspberryPi
-,

Copyright© ラズパイの実 , 2020 All Rights Reserved Powered by STINGER.