pythonでWebアプリ（deta.space編）
deta.space - flaskを利用してWebアプリ(2023/2にdeta.shからdeta.spaceに変わりました。)
deta.spaceはdeta.shと同じIDパスワードでLoginして、真っ白な画面上に左上から右下にかけて四角をドラッグで描くとメニューが表示されるように変わりました。「Installed App」に移動すれば過去に作ったものが表示されて実行できます。まだ詳細はチェックしていません。
こんなふうに範囲指定すると
そこにメニューが表示されます
Installed Appを選べば、デスクトップにアイコンが張り付きクリックで実行できます
終わり方は、下の赤丸を選んでLogoutを選び
Confirmすれば終了です
flaskで作るWebアプリ
githubとherokuを使ってflaskでWebアプリを作るのは以前やっていましたが、herokuの無料枠が無くなるというので、今回はdeta clouddeta.spaceという無料のCloudがあるので、こちらをご紹介します。
deta.spaceとは
deta.spaceは、ドイツベルリンに本拠のあるクラウドサービスで、ありがたいことに無料です。FastAPIを展開するグループがスポンサーしてくれるようで、しばらく無料で使えますかね。お金が足りなくて実験ができないなんてのは悲しいので、こんなサイトがあるのは嬉しいです。
Detaにアカウントを作成する
Deta.space にアクセスします。
Join Detaをクリックすると、サインアップ、サインイン画面に入ります
ここの、username,password(8文字以上英数記号が必用),Emailを入力して、Enable Developer ModeをOnにして begin your joneyをクリックすると指定したEmailアドレスに認証のメールが届くので、Verify Emailをクリックしてください。
最初にTokenを作成
loginしたら、下のType a command or searchにsetと入力して settingをクリックして、generate tokenを押してください。そこで41文字のtokenが表示されますが、これは最初の1回しか表示されません。保存してください。といいながら、私はメモは取ったもののキャプチャ忘れていて、涙
ローカルPCの準備
自分が使用するパソコンにdetaのCLI コマンド群をインストールしないといけません。まずPowerShellを起動してください。青地のやつです
Windowsの場合 iwr https://deta.space/assets/space-cli.ps1 -useb | iex
これで deta関係の CLIが使えるようになりました。
毎回使用前にlogin
毎回使用前にloginが必用です。一度loginしたらlogoutするまで使えます。
space login ? Enter access token (41 chars) >
ここに保存しておいたaccess tokenを貼り付けてenterするとloginできます。
CLIでprojectを作成します
space new -n {project名}
まずは WebSampleを作成しましょう
わかりやすいように、まずはHello worldをHTMLで表示するだけのプログラムを作って見ましょう。flaskで作ります。本当はFastAPIを使って上げたいのですが、まだ良くわからなくて、スポンサーさんすいません。
PowerPointで最初にmkdir で WebSampleフォルダーを作って cd WebSampleしてからプロジェクトを作ります
space new
project名は、指定しなければフォルダー名が使われます。またプロジェクト名は公開時のURLの一部になるだけですから、自分の好きなようにつけて構いません。今回はflaskで単純にhello worldのホームページと出力するだけですので、ファイルは3つ作ります。まずmain.pyを作成します。
main.py
from flask import Flask
app = Flask(__name__)
@app.route("/")
def read_root():
src = """
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSample</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>"""
return src
つづいて、実行時に必要なライブラリー環境を宣言します。今回はflaskを使うのでそれを宣言します。
requirements.txt
flask
このファイルのスペルをよく間違えるので、確認してください。
続いて SpaceFile ファイルをさわります。
SpaceFile
# Spacefile Docs: https://go.deta.dev/docs/spacefile/v0 v: 0 micros: - name: websample src: ./ engine: python3.9 primary: true public: true
結局、２つファイルを追加して、SpaceFileを変更したので、フォルダー構成はこのようになりました
C:. | .gitignore | main.py | requirements.txt | Spacefile | \---.space meta README
projectをデプロイします
space push
いっぱいコマンドが表示されます
Validating your Spacefile... Your Spacefile looks good, proceeding with your push! ✓ Successfully started your build! ✓ Successfully pushed your Spacefile! ~ Pushing your code (3 files) & running build process... 2023/06/22 12:15:27 2023/06/22 12:15:27 Parsing Spacefile... 2023/06/22 12:15:27 Scanned micros: 2023/06/22 12:15:27 └ websample
最後に
i Updating your Builder instance with the new revision... 2023/06/22 12:15:48 starting installation... 2023/06/22 12:15:48 fetching release configuration... 2023/06/22 12:15:48 allocating resources.. 2023/06/22 12:15:48 configuring resource 1 out of 1... 2023/06/22 12:16:08 waiting for function to be ready... 2023/06/22 12:16:08 completed... ✓ Successfully pushed your code and updated your Builder instance! Builder instance: https://websample-*-********.deta.app Checking for new Space CLI version...
これでデプロイ終了です。トップのcanvas画面に戻ると今作った websampleが表示されています。このアイコンをクリックするとコマンドの最後に表示されたurlが開いて実行が確認できます。
実行結果はしょぼいですが、とりあえずデプロイできました
