Ubuntu 22.4　Flask　環境構築　

![スクリーンショット 2022-06-16 145821.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/a2a23705-cbdb-d24f-1388-78c1ff5c803e.png)

![スクリーンショット 2022-06-16 145914.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/28242a3e-bee1-9261-5cfc-ec1f54ccdfc7.png)



![スクリーンショット 2022-06-16 150038.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/24035a94-9c8b-0ecf-3510-763211114405.png)


![スクリーンショット 2022-06-16 150216.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/2543d8f3-eaca-ceba-8c0e-4f391e0f10c3.png)



![ubuntu-desktop-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/bccc8d2a-b166-4463-352f-16c5d88932bb.png)

![ubuntu-desktop-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/585689e8-f386-81c4-0786-fa12dbd2fa61.png)

![ubuntu-desktop-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/4d64ad3d-483d-cd1c-5cc9-11ee3007300e.png)



![ubuntu-desktop-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/bf6c5412-1dea-ca33-283d-b45e786c9b49.png)



![ubuntu-2204-110.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/e279d5ce-bdd4-9184-57c5-8b1659678e6d.jpeg)




![スクリーンショット 2022-06-16 151105.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/a9f55779-a24f-c14f-6cd1-dd70320f50d5.png)





![ubuntu-2204-112.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/4dc26a9c-12c2-cb5b-33e8-289827e13823.jpeg)


#  再起動中
```
画面に表示されているエンターをクリック
```
![ubuntu-2204-113.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/e0412f52-6baf-01a7-3533-d142d452626e.jpeg)


#  再起動完了画面

![ubuntu-2204-120.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/32493228-36c9-18b6-05e8-5f6240adc894.jpeg)


# ログイン画面

```
パスワードを入力
```


![ubuntu-2204-121.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/3fd98b4d-26e3-59ed-bf74-a8372730b852.jpeg)

# ログイン成功時HOME画面


![ubuntu-2204-122.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/e6a6729b-9a53-fd89-e5b6-530ee13ad4dc.jpeg)


#  画面拡大
![スクリーンショット 2022-06-16 153251.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/f2887e96-09f9-d445-3301-ec4b9d33fc15.png)


![スクリーンショット 2022-06-16 153329.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/4f8dadc8-1968-6694-2ad7-72e35d9bf26b.png)


![スクリーンショット 2022-06-16 153355.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/002ced9d-08c2-f833-3f10-ba6e4ec81aa8.png)

#  ショートカット変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/25ac2306-9ce8-2ec2-7e7f-3d68c588b0e5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/ad5c070b-3577-95fb-5e1f-260073cc5de2.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/de7854d5-765b-37a8-2213-b984f7be1196.png)




#  ホスト⇔ゲスト間でコピペができるようにする。
![スクリーンショット 2022-06-16 154314.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/e1c07402-ef98-f53b-5d78-abec2a1a9b72.png)


![スクリーンショット 2022-06-16 154433.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/b97c88db-48f1-3ab3-158e-33511fc37af9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/38b3fc79-9b61-b9fd-9dd1-0e2c37156708.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/c4e7dcfe-1024-4c2b-f8fb-0eba85f35d4d.png)




#### ll　コマンドでディレクトリ内のファイルを表示する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/ca0a937b-590d-5e2b-01c5-7207eb731a3f.png)


#### 以下のファイルを実行する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/6deb9cbe-912b-9085-0f9b-bb246399b02f.png)

#### 実行コマンド
```
./autorun.sh
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/21234414-098a-4385-7469-f673d3ee2f27.png)


#### パスワードが効かれるので入力

![スクリーンショット 2022-06-16 161222.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/d152fbfe-5678-d3cc-7933-6e923c8273f9.png)


####  以下の画面が表示されたらエンターキーを押す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/2df666f1-9807-33cc-9897-04692d18ddc8.png)


####  「VBox_GAs_6.1.34」のディスクマークのアイコンを右クリックしてメニューを開き「取り出す」をクリックして「Guest Additions CDイメージ」のマウントを解除

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/3930aacb-d8d2-efb1-be0e-7b36fdfbfff9.png)

# VirtualBox本体の設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/cf35553c-3a64-4965-b143-8756c08ea25b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/fa715d32-0dbe-4687-b21a-b052554d7b16.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200760/25f5a8de-5ea2-ccd8-fc50-99ec23f43207.png)


# 再起動
```
再起動しないと有効になりません。
```

# 再起動コマンド
```
reboot
```

#  パッケージリストを更新
```
sudo apt update
sudo apt full-upgrade
```

#  Python 3のバージョンを確認
```
python3 -V
```
#  Pythinのバージョン管理ツール【pip】をいれる。
```
sudo apt install -y python3-pip
```


# NumPyをインストールする
```
package_nameは、Web開発用のDjangoや科学計算用のNumPyなど、
任意のPythonパッケージまたはライブラリを参照できます。

pip3 install numpy 
```

```
プログラミング環境の堅牢なセットアップを確保するために、
パッケージと開発ツールをインストールする。

sudo apt install -y build-essential libssl-dev libffi-dev python3-dev

```


# ##### ステップ2 —仮想環境のセットアップ
```
仮想環境を使用すると、Pythonプロジェクト用にサーバー上に隔離されたスペースが確保できます。
これにより、各プロジェクトが、他のプロジェクトを中断させない独自の依存関係を持つことができます。

プログラミング環境をセットアップすると、
Pythonプロジェクトやパッケージのさまざまなバージョンの処理方法をより詳細に制御できます。
これは、サードパーティのパッケージを使用する場合に特に重要です。

必要な数のPythonプログラミング環境がセットアップできます。各環境は基本的に、
サーバーを環境として機能させるためのいくつかのスクリプトを含むサーバー上のディレクトリまたはフォルダーです。

Pythonでプログラミング環境を構築する方法はいくつかありますが、ここでは、
標準のPython 3ライブラリの一部であるvenvモジュールを使用します。次を入力してvenvをインストールしましょう。

sudo apt install -y python3-venv

```




## flask インストール##
```
Flask インストール
pip3 install flask
```


## Apache2とApacheでPython3を使えるようにするmodのインストール
```
pache2のインストール
sudo apt install apache2

apache2のバージョン確認
apache2 -v

.apache2の状態確認
sudo systemctl status apache2

.apacheの稼動を確認、IPアドレスを取得
sudo apache2ctl configtest
```


##  mod_wsgiのインストール
```
wsgiパッケージインストール


mod_wsgi(ウィズギー)は、PythonフレームワークとApache2を連携させるためのインターフェースモジュール。
wsgi無しでは、PythonをWebサーバーと連携できないので、インストールが必要。
※一応cgiを使うという手もある

sudo apt install libapache2-mod-wsgi-py3  
sudo apt-get install python3-pip apache2 libapache2-mod-wsgi-py3

```

##ファイル構成

```
root@Ubuntu:/var/www$ tree -l 
.                               
└── flask                    
    ├── flask_script.py    
    └── flask_app.wsgi           
```                          
1 directories, 2 files        



##flaskアプリケーションの作成
ファイル名
flask_script.py
```
from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

```
## .wsgiファイルの作成
```
flask_app.wsgi

import os,sys
sys.path.insert(0, os.path.abspath(os.path.dirname(__file__)))

from flask_script import app as application
```


## Apacheの設定

```
sudo vim /etc/apache2/sites-available/flask.conf
```

#　Flaskの設定ファイルつくる

flask.conf

```
<VirtualHost *:80>
    ServerName localhost
    WSGIDaemonProcess flask_app user=www-data group=www-data threads=5
    WSGIScriptAlias / /var/www/flask/flask_app.wsgi
    <Directory /var/www/flask>
        WSGIProcessGroup flask_app
        WSGIApplicationGroup %{GLOBAL}
        Order deny,allow
        Allow from all
    </Directory>
</VirtualHost>

```

プリケーションのディレクトリ以下が、www-dataがオーナーになるように所有者を変えておく。
```
sudo chown -R www-data:www-data /var/www/flask/
```
Apacheに読み込んでもらうために、シンボリックリンクを作成する。
```
sudo ln -s /etc/apache2/sites-available/flask.conf /etc/apache2/sites-enabled/flask.conf  
```
 # デフォルトの設定ファイルを読み込まれないようにする
```
sudo rm /etc/apache2/sites-enabled/000-default.conf  
```
Apacheを再起動
```
sudo systemctl restart apache2
sudo systemctl status apache2

もし、再起動の時に

「httpd.conf」の文法チェック方法（apachectl）
apachectl configtest

「httpd.conf」の文法チェック方法（apache2ctl）
apache2ctl configtest

AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using localhost Set the 'ServerName' directive globally to suppress this message

というエラーが発生したら、以下を打ち込んで、もう一度再起動する

sudo echo ServerName $HOSTNAME > /etc/apache2/conf-available/fqdn.conf
sudo a2enconf fqdn


sudo apachectl restart
エラーが出なかったら、
http://localhost
にアクセスしてみてHello World!

と表示されれば成功
```

-----------------------------------------------------------------------
##共通テンプレートJinja2を利用する
-----------------------------------------------------------------------
Flaskには標準でJinja2というテンプレートエンジンが付いているので使ってみます。
templatesというフォルダを作る。そこに、htmlを置きます。


※インストールされていない場合は以下コマンド実行
sudo pip3 install Jinja2



-----------------------------------------------------------------------
##Jinja2の動作確認
-----------------------------------------------------------------------

from jinja2 import Template
 
template = Template('このサンプルコードは、 {{ title }}用です。')
result = template.render(title='Jinja2の動作確認')
 
print(result)



-----------------------------------------------------------------------
##MySQL8.0以降で接続できない場合は「認証プラグイン」を変更する
------------------------------------------------------------------------
1. ユーザーの認証方式の変更

ユーザーの認証方式を旧式の「mysql_native_password」に変更する。
ALTER USER 'ユーザー名'@'localhost' IDENTIFIED WITH mysql_native_password BY 'パスワード';

ALTER USER 'hiro'@'localhost' IDENTIFIED WITH mysql_native_password BY 'hirotada';

変更の確認をする。

SELECT user, host, plugin FROM mysql.user;



-----------------------------------------------------------------------
##データベースをSQLAlchemy
------------------------------------------------------------------------
pip3 install sqlalchemy
Python用のSQLAlchemyというライブラリをインストール。




-----------------------------------------------------------------------
flask_bootstrapのインストール方法
------------------------------------------------------------------------
pip3 install flask_bootstrap

使用方法

# 必要なライブラリのインポート
from flask import *

# render_templateを使用するために記載
from flask import Flask, render_template #追加

#flask_bootstrapの使用　※　以下を追記
from flask_bootstrap import Bootstrap

# アプリの設定 ・Flaskオブジェクトの生成
app = Flask(__name__)

#flask_bootstrapの使用　※　以下を追記
bootstrap = Bootstrap(app)

# どのディレクトリ階層で実行する関数か設定
@app.route('/')
#関数名
def hello_world():
	#実行内容 Hello, World! を出力
    return "Hello, World!"

# おまじない
if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0', port=8888, threaded=True)



※render_template
htmlファイルを動的に返す。
htmlファイルを表示しhtmlファイルに値を引数として渡す。

def main():
	#name変数に【Flask】の文字列を代入
    name = "Flask"
    
    #players配列に「111」「555」「777」3種類の文字列を代入
    players = ["111","555","777"]
    
    #index.htmlファイルのname_value変数にname変数の値を代入
    #index.htmlファイルのplayers変数にplayersの値を代入
    return render_template("index.html",name_value = name,players = players)



-----------------------------------------------------------------------
CSS、JSファイルを読み込む
------------------------------------------------------------------------
staticディレクトリの中に[CSS]ディレクトリと[js]ディレクトリを作成

┣ static/
┃ ┣ css/
┃ ┗ js/

-----------------------------------------------------------------------
##完成版フォルダー構成
------------------------------------------------------------------------


├── __pycache__
│   └── flask_script.cpython-38.pyc
├── flask_app.wsgi
├── flask_script.py
├── static
│   ├── css
│   │   └── index.css
│   ├── images
│   │   └── index.jpeg
│   └── js
│       └── script.js
└── templates
    ├── index.html
    ├── layout.html
    └── bootstrap.html

-----------------------------------------------------------------------
##参考サイト
------------------------------------------------------------------------
UbuntuのApacheでFlaskを用いてPython3でWebアプリケーションを作る
https://blog.akashisn.info/entry/%3Fp%3D258

Python 3をインストールしUbuntu 20.04サーバーにプログラミング環境を設定する方法
https://www.digitalocean.com/community/tutorials/how-to-install-python-3-and-set-up-a-programming-environment-on-an-ubuntu-20-04-server-ja

Ubuntu 16.04 で Flask アプリケーションを動かすまでにやることまとめ
https://qiita.com/hoto17296/items/845850c8854dd18f6fff

Ubuntu環境でApache WSGI flaskなWebアプリケーションを構築する
https://lifeinprogram.com/2019/08/18/post-992/

Flaskの簡単な使い方
https://qiita.com/zaburo/items/5091041a5afb2a7dffc8

はじめての Flask #1 ~はじめてのウェブアプリ~
https://qiita.com/nagataaaas/items/d249c3905d41137cd510

はじめての Flask #2 ~POSTを受け取ろう~
https://qiita.com/nagataaaas/items/3116352da186df102d96

はじめての Flask #3 ~htmlをrenderしてみよう~
https://qiita.com/nagataaaas/items/4662237cfb7b92f0f839

はじめての Flask #4 ~データベースをSQLAlchemyでいじってみよう~
https://qiita.com/nagataaaas/items/5c7c9ec4813fea85c40c

はじめての Flask #5 ~JSONを返すWebAPIを書こう~
https://qiita.com/nagataaaas/items/24e68a9c736aec31948e



Invalid command WSGIDaemonProcess Deploy Django application on CentOS 6.7
https://stackoverflow.com/questions/33320889/invalid-command-wsgidaemonprocess-deploy-django-application-on-centos-6-7