そう思ったことはありませんか。私はあります。
まず最初にチャレンジしたのは、Flask単体で作るWebアプリです。
おおよそ静的なページのみで構成する分には課題を感じません。
フォームに入力し、送信ボタンを押して画面をリロードする。シンプルな入力フォームならそれで済むのですが、時は令和。そんな貧弱なUXで、ユーザーが使ってくれるかというと疑問符がついてしまいます。
昨今では様々なフロントエンドのフレームワークが提供されており、こちらを使うことでぐるんぐるんと動くWebアプリの開発が比較的簡単に出来る環境が整っています。
今回は、Vue.jsを使うことにしました。
とはいえ、１から立ち上げていては時間がかかりすぎてしまいます。
プロトタイピングがしたいだけなのに！著者は叫びました。
そこから数ヶ月。色々なチャレンジをした結果、汎用化したのでこちらに公開しておきます。
環境
フロントエンドはVue.js です。
テンプレートはこちらからお借りしてきました。
https://github.com/tookit/vue-material-admin
バックエンドはFlaskです。どうしてもpythonで処理を書きたかったからです。
デプロイ先はHerokuです。無料の範囲で色々なことが出来ます。
こちらのページにあるDeploy to Herokuボタンを押せば、デプロイが完了します。
https://github.com/geeorgey/vue_flask_template
あとはちょこっと設定を加えます。
Herokuに環境変数を設定する
Heroku postgresをインストールする
Heroku管理画面のResourcesタブを開き、Add-ons部分からHeroku Postgresを選択。 FreeプランでOKです。
環境変数を設定する
Settingsタブを開き、Reveal Config Varsボタンをクリック。
環境変数欄にすでにDATABASE_URL が入っているのがわかると思います。
その下に４つ追加します。
Key ｜ Value
ENV ｜ development
FLASK_APP ｜ backend
FLASK_DEBUG ｜ 1
VUE_APP_BASE_API ｜ ここには、Heroku画面の右上にあるOpen App ボタンを押して開いたURLを入れてください。
現時点で実装してある機能
ログイン画面でメールアドレスとパスワードを入力してログインすることが可能です。
ログイン画面でメールアドレスとパスワードを入力してRegisterボタンを押すとユーザー登録できます。
DBに登録されるパスワードはハッシュ化されておらず平文で保存されます。
Just Do It
デプロイ後のイメージはこちらです。
https://vueflasktestgeeorgey.herokuapp.com/#/auth/login?redirect=%2Fdashboard
メアドとパスワードを入力することで登録・ログインが出来ますので使ってみて下さい。
メアドの認証はしていないのでダミーのもので構いません。
ログイン後のイメージはこちらと同様です。
http://vma.isocked.com/#/dashboard
色々なパーツが取り揃えられているので、必要なものをピックアップして画面に配置していきましょう。
オプション
Slack用のbotを組み込む場合はこちらを参照。
https://qiita.com/geeorgey/items/7844dee644524dacac41
関連リンク
pythonを使ってリアクティブなWebアプリを作りたい【基礎編】
pythonを使ってリアクティブなWebアプリを作りたい【開発編】