WSL × Next.js × FastAPI × PostgreSQLでつくるフルスタック開発入門

① WSL（Ubuntu）でプロジェクト用フォルダを作る

bash

mkdir workspacecd workspace

※ すでに作っているならスキップでOK。

② Next.js プロジェクトを作成する

bash

npx create-next-app@latest frontend

実行すると、いくつか質問が出るけど、 全部 Enter（デフォルト）でOK。

③ プロジェクトフォルダに移動

bash

cd frontend

④ 開発サーバーを起動

bash

npm run dev

⑤ ブラウザで確認

コード

http://localhost:3000

Next.js の初期画面が表示されれば成功。

? FastAPI プロジェクトの作成

このレクチャーでは、バックエンド API を構築するための FastAPI プロジェクト を作成します。 以下のコマンドを WSL（Ubuntu）上で実行してください。

① プロジェクト用フォルダを作成

bash

mkdir backendcd backend

② Python 仮想環境の作成と有効化

bash

python3 -m venv venvsource venv/bin/activate

③ FastAPI と Uvicorn のインストール

bash

pip install fastapi uvicorn[standard]

④ 最小構成の API を作成（main.py）

bash

echo "from fastapi import FastAPIapp = FastAPI()@app.get('/tasks')def get_tasks():    return [{'id': 1, 'title': 'Sample Task'}]" > main.py

⑤ FastAPI の起動

bash

uvicorn main:app --reload --host 0.0.0.0 --port 8000

⑥ 動作確認

ブラウザまたは curl で確認できます。

ブラウザ

コード

http://localhost:8000/tasks

curl

bash

curl http://localhost:8000/tasks

⑦ 自動ドキュメント（Swagger UI）

FastAPI には自動ドキュメントが標準搭載されています。

コード

http://localhost:8000/docs

? このレクチャーのゴール

• FastAPI プロジェクトが作成できる

• 仮想環境で FastAPI を動かせる

• API がブラウザで確認できる

• Swagger UI が使える

このレクチャーでは、FastAPI と連携するための PostgreSQL データベース をセットアップします。 すべて WSL（Ubuntu）上で実行してください。

このレクチャーでは、FastAPI と PostgreSQL を接続するために SQLAlchemy（ORM）とデータベース接続設定 を行います。

このレクチャーでは、FastAPI と SQLAlchemy を使って タスクの CRUD（作成・更新・削除）API を実装します。

このレクチャーでは、Next.js から FastAPI の CRUD API を呼び出し、 タスク一覧の取得・作成・更新・削除 を実装します。

このレクチャーでは、Next.js プロジェクトに Tailwind CSS を導入し、 タスク管理アプリの UI を見やすく整えます。

このレクチャーでは、FastAPI と PostgreSQL を Docker で永続化 し、 アプリを再起動してもデータが消えない環境を構築します。

このレクチャーでは、Next.js を Docker コンテナ化 し、 FastAPI・PostgreSQL と同じように docker-compose で一括起動できる環境 を構築します。

このレクチャーでは、セクション3で構築した フロントエンド（Next.js）＋バックエンド（FastAPI）＋DB（PostgreSQL）＋Docker の全体像を整理します。