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つ目のログインページ画像では、フィールドが未入力のためエラーが表示されている状態です。
開発動機 FastAPIの需要が増加しそう
最近はフロントエンド（Vue.jsやReactなど）とバックエンド（web API）に分けてwebサイト開発をするスタイルが流行っています。
Djangoはpythonのwebフレームワークの中で最も需要や人気が高いフレームワークです。
しかし、今後のwebサイト開発では非同期サーバーに対応していて、web API開発がしやすく人気のあるFast APIの需要も高まるのではないかと思って勉強がてら作ってみました。
