0
0

ラズベリーパイ3B+をサーバーにしてFLASKでwebアプリ作成してみた。

Posted at

1ヵ月前に作成したものを備忘録として残します。
記憶が曖昧ですので抜けている個所があるかもしれませんが、作成手順の大筋は合っています。

【作成した経緯】

■条件
・2人暮らし
・家賃生活費などの生活に関わる支出は全て合計して折半して支払う。

■問題点
・お金は折半できるけど、家事はキッチリ折半できない。

■解決策
・2人でそれぞれどれだけ家事をしたか記録して、家事をした分だけ生活費の負担を減らす。
例えば、2人で家事の負担度が、50%と50%ならば、今まで通り折半すればいいし、10%と90%ならば、90%も家事をしてくれている方を優遇して生活費の支払いを軽減させる。

【作成したもの】

タイトルなし.png
ルーターには、ラズパイ、スマホ、スマホ、PCなど接続しています。
webアプリで家事記録をしていくので、OSはなんでも起動するのがwebアプリのいいところ。

ラズパイはアプリケーションサーバ兼DBサーバ
スマホは入力のみで、家事を行ったら行った家事を登録していきます。

【必要なもの】

ネットワークに接続できる環境
ルーター
ラズベリーパイ3B+

【全体の流れ 作り方】

全体の流れを確認してから詳細な作り方を紹介しましょう。

1.ラズベリーパイのセットアップ

OS入れ
VNCの設定

2.Flaskアプリの開発

HTML
JavaScript
CSS
Python
DB設計

Flaskアプリ起動コマンド テスト

3.ラズベリーパイの設定

Flaskアプリのフォルダーを共有フォルダーに設定(windowsからソースコードの修正とバックアップを取れるように) sambaの設定
2で作ったFlaskアプリを入れる
nfwを入れて、Flaskアプリの接続を許可
ラズパイの電源投下時にFlaskアプリを起動させる設定

【詳細な作り方】

1.ラズベリーパイのセットアップ

■OSセットアップの参考
https://invisibletechnology.jp/raspberrypi-setup/#:~:text=OS%E3%81%AE%E9%81%B8%E6%8A%9E%E3%81%A8%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%201%20Raspberry%20Pi%20Imager%E3%81%AE%E8%B5%B7%E5%8B%95%20Raspberry%20Pi%20Imager%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%BE%E3%81%99%E3%80%82,...%204%20OS%E3%81%AE%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%20microSD%E3%82%AB%E3%83%BC%E3%83%89%E3%81%8C%E9%81%B8%E6%8A%9E%E3%81%95%E3%82%8C%E3%81%9F%E3%82%89%E3%80%81%E3%80%8C%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E3%80%8D%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%97%E3%81%A6OS%E3%81%AE%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E3%82%92%E9%96%8B%E5%A7%8B%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%20...%205%20%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E5%AE%8C%E4%BA%86%20

■VNCのセットアップの参考
VNCを使うことで、windowsPCからリモート接続してラズベリーパイのセットアップを行えます。
ラズベリーパイ用にモニター、キーボード、マウスを用意しなくてよくなるので利用しましょう。
参考
https://www.indoorcorgielec.com/resources/raspberry-pi/raspberry-pi-vnc/

2.Flaskアプリの開発

ここからプログラミングです。webページを作っていきます。

PC内でwebページの動作を確認して、問題が無ければ、作成したものをラズベリーパイに移植します。PCでの作業となります。

フォルダー構造は次の通り、ビデオの下に作りました。sharisaは、ユーザー名入れてください。

C:\Users\sharisa\Videos
|       
+---flaskr
|   |   database.db
|   |   db.py
|   |   main.py
|   |   __init__.py
|   |   
|   +---static
|   |       style.css
|   |       
|   +---templates
|   |       form.html
|   |       index.html
|   |       option.html
|   |       scr.html
|   |       scraping.html
|   |       

database.dbはFlask実行時に勝手に作られるので作成しなくてOK
flaskrをgitからダウンロードしてください。
gti url
https://github.com/arisaEN/kajiAPP
code の download zip

必要なライブラリインストール

cd C:\Users\sharisa\Videos
pip install Flask
pip install pandas

Flask起動コマンド

flaskrフォルダーを置いているPCで実行します。

cd C:\Users\sharisa\Videos
set FLASK_APP=flaskr 
set FLASK_ENV=development
flask run --host=0.0.0.0

flask run --host=0.0.0.0を実行すると次の画面になります。
image.png

http://127.0.0.1:5000にwebページから接続します。

http://127.0.0.1:5000

webアプリが正常に動作すればOK。

3.ラズベリーパイの設定

sambaの設定 ラズベリーパイをwindowsから共有フォルダーに設定する。

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt install samba

$は入力しなくていい。

Samba設定ファイルのsmb.confを「nano」や「vi」などのエディタで編集します
$ sudo nano /etc/samba/smb.conf

最終行にこれ追加

[arisa]
   comment = arisa user file space
   path = /home/arisa
   force user = arisa
   guest ok = yes
   create mask = 0666
   directory mask = 0777
   read only = no

path 共有したいディレクトリ
force user どのラズパイユーザーの権限で動かすか
guest ok noならパスワードなし

ユーザー名 admin
PW admin

samba再起動

$ service smbd restart
$ service nmbd restart

ラズパイにFWインストール

 sudo apt install ufw

ラズパイ側でファイアウォールのポート許可 sambaで使うやつのみ。

sudo ufw allow 137/tcp
sudo ufw allow 137/udp
sudo ufw allow 138/tcp
sudo ufw allow 138/udp
sudo ufw allow 139/tcp
sudo ufw allow 445/tcp
sudo ufw enable

winPC側に資格情報追加
winPC側からアクセス

\100.64.16.〇(ラズベーパイのIPアドレス)\shared

2で作ったFlaskアプリを入れる

ラズパイのビデオフォルダーにflaskをコピー どこでもいいけど、Flask起動コマンドと合わせる。

ラズパイの電源投下時にFlaskアプリを起動させる設定

参考
https://www.pc-koubou.jp/magazine/52061


ラズパイ再起動させてスマホからラズパイのwebサーバーに接続できれば完了

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0