環境構築検証アプリ

テクノロジ系／ L00 first-step — 環境構築

環境構築検証アプリ

Python と Node.js の開発環境が一通り動くかを最小コードで検証する。 Vue (フロント) と FastAPI (バック) を別ターミナルで起動し、ブラウザから 1 つの画面で連携動作が見えれば「環境構築 OK」とみなせる。

> 想定環境: Python 3.10 以上 + Node.js 18 以上。 Vite と FastAPI が動けば古いバージョンでも可。

期待結果

ブラウザに 「✅ 成功」と JSON {"message": "Hello from FastAPI", "status": "ok"} が表示されればOK。

構成

verify-app/
├── backend/
│   ├── main.py          ← GET /api/hello を返すだけ
│   └── requirements.txt
└── frontend/
    ├── package.json
    ├── vite.config.js
    ├── index.html
    └── src/
        ├── main.js
        └── App.vue      ← /api/hello を叩いて表示

実行手順

Windows（PowerShell）

1. バックエンド起動（ターミナル1）

cd verify-app\backend
python -m venv .venv
.\.venv\Scripts\Activate.ps1
pip install -r requirements.txt
python -m uvicorn main:app --reload

→ http://127.0.0.1:8000 で起動メッセージが出る。

→ ブラウザで http://localhost:8000/api/hello を開いて JSON が返れば backend OK。

2. フロントエンド起動（ターミナル2 を新規に開く）

cd verify-app\frontend
npm install
npm run dev

→ Local: http://localhost:5173/ と出る。

3. ブラウザで確認

http://localhost:5173 を開く。

✅ 「✅ 成功」+ JSON が表示 → 環境構築OK
❌ 「❌ 失敗」 が表示 → バックエンドが起動していない or CORS設定漏れ。トラブルシューティングへ。

macOS / Linux（bash/zsh）

# ターミナル1（バックエンド）
cd verify-app/backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python -m uvicorn main:app --reload

# ターミナル2（フロントエンド）
cd verify-app/frontend
npm install
npm run dev

ブラウザで http://localhost:5173 を開く。

トラブルシューティング

症状	原因	対処
`python` コマンドが見つからない	PATH 未設定	python.org インストーラで「Add to PATH」を入れて再インストール
`Activate.ps1` がブロックされる	PowerShell実行ポリシー	`Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned` を1回実行
`uvicorn` コマンドが見つからない	venv未有効化 or PATH	`python -m uvicorn main:app --reload` の形で起動
`pip install` で pydantic-core ビルド失敗	Python バージョン不一致	`python --version` で 3.14.x を確認
ブラウザに ❌ 失敗が出る	バックエンド未起動	ターミナル1のuvicornログを確認
CORS error がブラウザコンソールに出る	CORS設定漏れ	`main.py` の `allow_origins` に `http://localhost:5173` が入っているか確認
`npm install` が遅い	初回ネットワーク	1〜2分待つ

片付け

検証が終わったらターミナル1/2でそれぞれ Ctrl+C で停止。

このディレクトリ自体を削除してもOK（タスク管理アプリの本番作業には影響しない）。