Webの勉強をしよう

※当ブログではアフィリエイト広告を利用しています。

はじめに

この記事は、筆者のプログラミング系の勉強備忘録です。

想定読者は筆者自身で、日記的な扱いです。

勉強によって、解りたいこと

🤔
■わかっていること 「需要予測・在庫最適化」をする機械学習モデルを作成できたとして、自分のPC上であれば、なんどでも異なるデータをインプットととして、結果を出力できる。

■わからないこと 実際のビジネスの現場では、どのように機械学習モデルの結果を定期的に確認する体制を整えるの？

どうやら、Webアプリについて理解するとこの辺りの謎が解けそう…!!

Webアプリは３層構造である

image

  1. プレゼンテーション層
    • WebブラウザとWebサーバーの部分
  2. アプリケーション層
    • APサーバーの部分
    • 機械学習モデル（プログラム）はここに実装する!!
  3. データ層
    • DBサーバーの部分

勉強したいこと

Webサーバーってなに？
APサーバーってなに？
簡単な処理を通してみよう。

1. Webサーバーってなんだ？

代表的なwebサーバー

ApacheやNginxなどがある。

ググった感じNginxのほうが最近は主流っぽいので、今回はこちらを採用する。

ちなみに、エンジンエックスって読むらしい。

はじめてのNginx

インストール方法

ターミナルで以下のコマンドを実行して、バージョンが返ってきたら、インストール済みの証拠

nginx -v

私のPCには未インストールだったので、インストールした。

インストールをUbuntuやCentOSにするか悩んだけど、今回は見逃して、macOSにインストール。

brew install nginx

起動・確認・停止

①起動はターミナルで以下のコマンドを実行

sudo nginx

PCのパスワードを求められるときと、求められない時がある…

②ブラウザで確認

起動ができたら、ブラウザで起動できたかを確認できる

特に指定しなければ、URLはこれなはず。 http://localhost:8080/

これがブラウザで見えたら起動できている証拠!!
これがブラウザで見えたら起動できている証拠!!

③Nginxの停止

こういうのは明示的にきちんと停止するのが鉄則みたい

sudo nginx -s stop

Webサーバーについてはここまでできたら一旦区切って、APサーバーとは？に進みます。

APサーバーってなんだ？

image

APサーバーは、Webサーバーからの処理要求を受けて、データと機械学習モデルなどのプログラムを使って、処理を行う部分です（たぶん）。

代表的なAPサーバー

Rubyであれば、PumaやUnicorn。 Javaであれば、Tomcat。 Pythonなら、Gunicorn。DjangoやFlaskと組み合わせて使用する。

機械学習モデルの実装を視野に入れているので、Gunicornを採用する。

なんとなくFlaskを組み合わせることにした。

はじめてのFlask

インストール方法

pipでいける。

pip install flask

実行してみる

①任意のディレクトリにmyapp.pyというファイルを作成。

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run()

このコードは、ルートURL（/）にアクセスすると「Hello, World!」と表示するというもの。

②ターミナルで実行

ディレクトリを移動しておくこと。

python myapp.py

Flaskはデフォルトのポートが5000なので、http://localhost:5000とかhttp://127.0.0.1:5000とかでアクセスできるはず。

成功していると、「Hello,World!」と出る
成功していると、「Hello,World!」と出る

③終了の仕方

Ctrl + c

これはFlask単体で動かせたことを意味しています！

この段階では、Flaskの開発サーバーを使用しており、本番環境での使用は推奨されていません。本番環境にデプロイする際には、先ほどのGunicornのようなWSGIサーバーと組み合わせることが一般的です。

FlaskとGunicornを組み合わせた起動

①Gunicornをインストール

これもpipでいける

pip install gunicorn

②”myapp.py”をGunicornで起動

起動のコマンドがちょっと変わるだけ。

gunicorn -w 4 myapp:app

ここで、-w 4は4つのワーカープロセスを使用することを意味し、myappはPythonファイル名（.py拡張子なし）、appはFlaskアプリケーションオブジェクトの名前です。

Gunicornのデフォルトのポートは8000です。http://127.0.0.1:8000

同じ結果になればOK
同じ結果になればOK

③終了

同様にCtrl + CでOK

終了した後に、ブラウザを更新すると見れなくなる。

myapp.pyを少し複雑にしてみる

私は最終的には、「データベースのデータ」と「機械学習モデル」をアプリ内で使って、予測結果を出力させたいと思っています。とはいえ、それはまだちょっと難しいので、今回は簡単なアプリを作ってみます。

  1. 今の「myapp.py」
    1. 特定のURLにアクセスしたら「Hello,World!」と表示してくれる
  2. この章で作成したい「myapp.py」
    1. 特定のURLにアクセスしたら、数値の入力欄がある
    2. 実行ボタンを押すと、入力した数値が２倍になって返ってくる

これを行うためのSTEPは以下の通りです。

①ライブラリのインストール

この例では、HTMLフォームを処理するためにWTFormsを使用します。

次のコマンドでインストールします。

pip install flask-wtf

②Flaskアプリケーションの更新

myapp.pyを更新します。

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import IntegerField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecretkey'  # 任意の秘密鍵

class NumberForm(FlaskForm):
    number = IntegerField('Enter a number:', validators=[DataRequired()])
    submit = SubmitField('Execute')

@app.route('/', methods=['GET', 'POST'])
def home():
    form = NumberForm()
    result = None
    if form.validate_on_submit():
        number = form.number.data
        result = number * 2  # ここで何らかの処理を行う
    return render_template('index.html', form=form, result=result)

if __name__ == '__main__':
    app.run()

③index.htmlを作成します。

以下のようなファイル構造にします。

「first_app」というフォルダ名は任意です。

first_app/
    ├── myapp.py
    └── templates/
        └── index.html

そんで、index.htmlは以下の通りです

<!DOCTYPE html>
<html>
<head>
    <title>Number App</title>
</head>
<body>
    <form method="post">
        {{ form.hidden_tag() }}
        {{ form.number.label }} {{ form.number(size=20) }}<br>
        {{ form.submit() }}
    </form>
    {% if result != None %}
        <p>Result: {{ result }}</p>
    {% endif %}
</body>
</html>

④ターミナルに戻って、myapp.pyを実行

実行はこのコマンドでしたね…!!

python myapp.py

で、localhostにアクセスすると、できているはずです。

入力した数値を２倍にするwebアプリが完成!!
入力した数値を２倍にするwebアプリが完成!!

今後やりたいことを整理

今日はたくさんの知識が頭に入ってきました！

がんばりました。

今日はこのくらいで区切って、次回に回しましょう。

次回やりたいことは以下の通りです

  1. WEBサーバーとの連携
    1. Nginxをインストールしたもののどう連携させれば良いか、連携する旨味がなんなのかがいまいち掴めず、、今度調べてやってみます!!
  2. アプリケーション層の高度化??
    1. 今回は単純に２倍にする処理をしている ここを機械学習モデルなどに置き換えてみたい
  3. DBサーバーとの連携
    1. 今回はフォームに数値を入力させた DBに入っている数値を処理させてみたい

では、おやすみなさい！

Home

新着記事

ブログ

キャリア

エンタメ

©Copyright 2023 19cm .All Rights Reserved.