# Flask + React Web Application

FlaskバックエンドとReactフロントエンドを組み合わせたWebアプリケーションテンプレートです。Docker Composeで両方を簡単に起動できます。

## 🚀 プロジェクト構成

```
flask-react-app/
├── docker-compose.yml    # Docker Compose設定
├── README.md             # このファイル
├── backend/              # Flaskバックエンド
│   ├── app.py            # Flaskアプリケーション本体
│   ├── Dockerfile        # バックエンド用Dockerイメージ定義
│   └── requirements.txt  # Python依存パッケージ
└── frontend/             # Reactフロントエンド
    ├── src/              # Reactソースコード
    │   ├── App.tsx       # Reactメインコンポーネント
    │   ├── App.css
    │   └── main.tsx      # Reactエントリーポイント
    ├── index.html        # 起動の起点となるHTMLファイル
    ├── package.json      # Node.js依存パッケージ（pythonのrequirements.txtみたいなもの）
    ├── vite.config.ts    # Vite設定
    ├── tsconfig.json     # TypeScript設定
    └── Dockerfile        # フロントエンド用Dockerイメージ定義
```


## 🏃 起動方法

### 1. アプリケーションの起動
/flask-react-app ディレクトリに移動して、以下のコマンドを実行：
```bash
docker compose up -d
```

### 2. アクセス

#### フロントエンド（React）
ブラウザで以下のURLにアクセス：
```
http://localhost:5173
```
基本はこっちにアクセスして、Reactアプリを利用します。

#### バックエンド（Flask）
```
http://localhost:6000
```
こっちはAPIサーバー用です。

### 3. 停止

```bash
docker compose down
```

## 🔌 API エンドポイント

バックエンド（Flask）は `http://localhost:6000` で以下のAPIを提供します。

### GET `/`
- トップページ（index.html）を表示

### GET `/api/health`
- 応答確認API
- レスポンス例：
  ```json
  {
    "ok": true,
    "message": "hello from Flask"
  }
  ```

### POST `/api/echo`
- 送信されたJSONをそのまま返すエコーAPI
- リクエスト例：
  ```json
  {
    "name": "test",
    "time": "2026-02-08T12:50:16.020Z"
  }
  ```
- レスポンス例：
  ```json
  {
    "ok": true,
    "you_sent": {
      "name": "test",
      "time": "2026-02-08T12:50:16.020Z"
    }
  }
  ```

## 🛠️ 開発

### ログの確認

全サービスのログ：
```bash
docker compose logs -f
```

特定のサービスのみ：
```bash
docker compose logs -f backend
docker compose logs -f frontend
```

### コンテナ内に入る

バックエンド：
```bash
docker compose exec backend bash
```

フロントエンド：
```bash
docker compose exec frontend sh
```

### ソースコードの編集

#### バックエンド
`backend/` 配下のファイルを編集すると、Flaskの開発モードにより自動でリロードされます。

#### フロントエンド
`frontend/src/` 配下のファイルを編集すると、Viteのホットリロード機能により自動で反映されます。

## 📦 使用技術

### バックエンド
- **Flask** - PythonのWebフレームワーク

### フロントエンド
- **React** - フロントエンドWebフレームワーク
- **Vite** - フロントエンドビルドツール


## 🌐 ポート設定

| サービス | ポート | 説明 |
|---------|-------|------|
| Frontend | 5173 | React開発サーバー（Vite） |
| Backend | 6000 | Flask APIサーバー |

## 📝 備考

- デバッグモードが有効になっているため、本番環境では設定を変更してください
- フロントエンドからバックエンドAPIを呼び出す際は `http://localhost:6000/api/...` を使用してください
- ポートが他のアプリケーションと競合する場合は `docker-compose.yml` のポート設定を変更してください
- フロントエンドのホットリロードとバックエンドの自動リロードが有効になっています