8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

pythonを使ってリアクティブなWebアプリをお手軽に1分で作りたい

Last updated at Posted at 2021-07-06

そう思ったことはありませんか。私はあります。
まず最初にチャレンジしたのは、Flask単体で作るWebアプリです。
おおよそ静的なページのみで構成する分には課題を感じません。
フォームに入力し、送信ボタンを押して画面をリロードする。シンプルな入力フォームならそれで済むのですが、時は令和。そんな貧弱なUXで、ユーザーが使ってくれるかというと疑問符がついてしまいます。

昨今では様々なフロントエンドのフレームワークが提供されており、こちらを使うことでぐるんぐるんと動くWebアプリの開発が比較的簡単に出来る環境が整っています。
今回は、Vue.jsを使うことにしました。
とはいえ、1から立ち上げていては時間がかかりすぎてしまいます。
プロトタイピングがしたいだけなのに!著者は叫びました。

そこから数ヶ月。色々なチャレンジをした結果、汎用化したのでこちらに公開しておきます。

環境

フロントエンドは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 が入っているのがわかると思います。
その下に4つ追加します。
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アプリを作りたい【開発編】

8
6
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
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?