
..
backend	first commit	5 months ago
frontend	first commit	5 months ago
README.md	first commit	5 months ago
docker-compose.yml	first commit	5 months ago

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 ディレクトリに移動して、以下のコマンドを実行：

docker compose up -d

2. アクセス

フロントエンド（React）

ブラウザで以下のURLにアクセス：

http://localhost:5173

基本はこっちにアクセスして、Reactアプリを利用します。

バックエンド（Flask）

http://localhost:6000

こっちはAPIサーバー用です。

3. 停止

docker compose down

🔌 API エンドポイント

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

GET `/`

トップページ（index.html）を表示

GET `/api/health`

応答確認API

レスポンス例：

{
  "ok": true,
  "message": "hello from Flask"
}

POST `/api/echo`

送信されたJSONをそのまま返すエコーAPI

リクエスト例：

{
  "name": "test",
  "time": "2026-02-08T12:50:16.020Z"
}

レスポンス例：

{
  "ok": true,
  "you_sent": {
    "name": "test",
    "time": "2026-02-08T12:50:16.020Z"
  }
}

🛠️ 開発

ログの確認

全サービスのログ：

docker compose logs -f

特定のサービスのみ：

docker compose logs -f backend
docker compose logs -f frontend

コンテナ内に入る

バックエンド：

docker compose exec backend 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 のポート設定を変更してください
フロントエンドのホットリロードとバックエンドの自動リロードが有効になっています