【Next.js × FastAPI】ライブ情報検索アプリ開発とGitHubを使ったチーム開発の手順まとめ
ハッカソンで、Next.js (フロントエンド) と FastAPI (バックエンド) を使ったライブ情報検索アプリを開発しています。
その中で実施した「バックエンドの起動設定」「UIライブラリの導入」、そして「友達とGitHubで共同開発する際の手順」について自分の復習用としてまとめます。
1. FastAPI: python Main.py で起動できるようにする
通常： uvicorn Main:app --reload のようなコマンドで起動
変更： python Main.py だけでサーバーを起動できるようにする
if __name__ == "__main__":
import uvicorn
# "Main:app" は「Main.pyのappというFastAPIインスタンス」という意味
uvicorn.run("Main:app", host="127.0.0.1", port=8000, reload=True)
2. Next.js: shadcn/ui の導入でUI構築を爆速化
Tailwind CSSのHTMLタグに一からクラスを当てる手間を省くため、急速に利用者が増えているshadcn/ui を導入した。
パッケージのインストールと初期化
ターミナルで以下のコマンドを実行し、プロジェクトに導入する。
npx shadcn@latest init
# アプリで必要なコンポーネントのみをダウンロード
npx shadcn@latest add button
npx shadcn@latest add input
3. GitHubを使ったチーム開発の進め方
今回、自分がリポジトリ所有者で、もう一人のメンバーがログイン機能を担当したので、その際のGit/GitHubの連携手順をまとめました。
パターン1：友達をリポジトリの共同開発者（Collaborator）に追加する（おすすめ）
-
メンバーをCollaboratorに追加し、権限URLを共有する
- GitHubのリポジトリ画面
Settings→Collaborators→Add peopleと進み、メンバーのGitHubアカウントを追加 - 編集権限を承認するための招待URL（Pending inviteのリンク）をコピーしてメンバーに直接送る。メンバーがそのURLを開いて承認することで、初めてpush権限が付与される
- GitHubのリポジトリ画面
-
メンバーがローカルに環境を作り、ブランチを切る
- メンバーのPCでリポジトリをクローンし、作業用のブランチを作成する
git clone "https://github.com/あなた/repository.git" git switch -c feature/login -
メンバーが開発してpushする
- 開発が終わったらコミットし、GitHubへプッシュする。
git add . git commit -m "ログイン機能実装" git push origin feature/login -
Pull Request（PR）を作成し、私がMergeする
- メンバーがpull requestを作成します。
- 私がコードをレビューし、問題なければマージする
今後の方針
- UIを改善する
- app下のフォルダ構成を機能ごとに作成する
- スケルトンUIの導入
- トースト通知
- Vercelなどへデプロイ
そろそろ終わらなくなってきたので、上手くAIを使いながらの方針にシフトしていきます。頑張りましょう。