FastAPIとVue.js v3のサンプルを作成&公開

FastAPIとVue.js v3を使ったサンプルプロジェクトを作成しました。 

開発経緯

FastAPIの勉強用に何か良いサンプルが無いか探していたところ、公式サイトにFull Stack FastAPI and PostgreSQLが紹介されていました。

これは、cookiecutterを使ってプロジェクトテンプレートを生成するためのリポジトリです。

これを使ってプロジェクトを作成しましたが動きませんでした。2020年以降メンテナンスされておらず、利用しているパッケージが古いことなどが原因でした。

docker-compose, Flower, Celery, RabbitMQ, も使っていてサンプルにしては非常に出来が良かったので、大幅にリファクタリングをして、パッケージやフレームワークも最新にして作り直しました。

特徴

フロントエンドとバックエンドの特徴です。より詳しい内容を知りたい方は、GithubリポジトリのREADMEを参照してください。

Backend

  • FastAPI
  • python 3.10
  • ドメイン駆動設計(DDD)風にディレクトリ構造を変更
  • パスワードのハッシュ化
  • JWT トークン認証
  • SQLAlchemy
  • Alembic
  • CORS
  • Celery
  • Pytest と factory boy

Frontend

  • Vue.js v3 composition API スタイルでコーディング
  • VeeValidate v4
  • pinia v2
  • Vue-router
  • Viteを使って生成
  • JWT 認証ハンドリング
  • UI Framework未使用 (お好みのUI フレームワークを導入しやすくするため)
  • Nginxのコンテナを使ったサーバー
  • .envファイルサポート(ローカル開発の場合、/backend/.envを作成し、設定を上書きできます)
  • ページや機能
    • ログイン、ログアウト
    • 管理者専用ページ, ログインユーザー用ページ.
    • ユーザーの作成、編集、削除機能
    • プロフィール編集、パスワード編集
    • パスワードリセット

注意事項

  • デフォルトではメール機能をオフにしているため、パスワードリカバリーなどメールを送信する機能を使うとエラーが発生します。メール機能は独自で追加する必要があります。

ページ画像

ページのサンプルです。シンプルさを優先してUIフレームワークは使っていません。

1つ目のログインページ画像では、フィールドが未入力のためエラーが表示されている状態です。

adminページ

開発動機 FastAPIの需要が増加しそう

最近はフロントエンド(Vue.jsやReactなど)とバックエンド(web API)に分けてwebサイト開発をするスタイルが流行っています。

Djangoはpythonのwebフレームワークの中で最も需要や人気が高いフレームワークです。

しかし、今後のwebサイト開発では非同期サーバーに対応していて、web API開発がしやすく人気のあるFast APIの需要も高まるのではないかと思って勉強がてら作ってみました。

スポンサーリンク
スポンサーリンク