flaskとherokuでアプリを作る方法
flaskとherokuでアプリを作る方法
まずサイト名の入ったフォルダを作成
その中にapp.pyファイルを作る
その後仮想環境を作っていこう。
python -m venv （仮想環境名）
を実行して、仮想環境を作り
（仮想環境名）\Scripts\activate.ps1
で仮想環境に入ろう。
そして今回必要依存パッケージは
flask、
なので
pip install flask
でインストールしていく
次にtemplatesフォルダとstaticフォルダを作成し、その下にhtmlファイルcssフォルダを作成して、その下にcssファイルを作成しよう。
appファイル内を下記のように記載して
from flask import Flask
from flask import Flask, render_templateapp = Flask(__name__, static_folder='./static')
@app.route('/')
def index():
return render_template('index.html')if __name__ == "__main__":
app.run(debug=True,host='0.0.0.0', port=5000)
次にhtml内を下記のように記載してローカルサーバーを起動させてhtml、cssの効いたh1タグが表示されるか確認しよう。
<!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>Roboses</title><link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"><link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<h1>aaaaaaaaaaaaa
</h1>
</body>
</html>
ファビコン
次にファビコンを設定していこう
ファビコンとはサイトページ上の小さなアイコンのことだ。
まずファビコンファイル(.ico)を作成していく
にアクセスしてま頑張ってくれ
ファビコンファイルが完成したら、staticフォルダの下にimagesフォルダを作成してそこに保存してくれ
そしてhtmlファイルに
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/favicon.ico') }}" />
を追加して完了だ。
ブートストラップ
さてここからはブートストラップを使ってuiを構築していこう
ブートストラップとはTwitter社が開発したフレームワークらしい。
簡単に言うとmedeiaクエリを使わずに自動的にレスポンシブデザインを構築してくれる便利な物
herokuデプロイ
Herokuをデプロイするにあたって必要ファイルがあるのでそこを用意していきましょう
・Procfile
・requirements.txt
・runtime.txt
まずをインストールして
pip install gunicorn
・Procfile
Procfileという名前のファイルを作成して
ファイル内に
web: gunicorn <実行するファイル名>:app --log-file=-
を作りましょう。
※この時、拡張子はなしで保存しましょう！
・requirements.txt
requirements.txtは下記を打ち込むだけです
pip freeze > requirements.txt
・runtime.txt
runtime.txtファイルを作成して
python -V
pythonのバージョンを確認して
だったので
Python-3.11.1
と打ち込みましょう。
ここからだ
そしてコマンドから
heroku login --interactive
または
heroku login
と打ち込みHerokuにログインします。
heroku login --interactive
の場合パスワードはapi keyを入力しましょう。
ログインできたら
heroku create <好きなアプリケーション名>
とコマンドに打ち込んでHeroku上にアプリを作成しましょう。
そしてプッシュしていきます。
なお初プッシュする際はこのように入力してください。
git remote add heroku
.gitは
https://git.heroku.com/(自分のアプリ名).git
にしてください。
なお
デプロイする際は
app.run(debug=True,host='0.0.0.0', port=5000)
debug=True,
を削除
これでプッシュしてデプロイできる
git push heroku master
変更を再デプロイする際は
git add .
git commit -m "Fix Testdbs model and form"
git push heroku master
ドメインを独自ドメインに…
これを最初に見たあとに
を見ればできるはず
ssl化
https://dash.cloudflare.com/57b22a86199e36627a668e5765af89c4
