# WebAppTemplate

Webアプリケーション開発のためのテンプレートです。

## 📁 プロジェクト一覧

### 1. flask-app
シンプルなFlask Webアプリケーション

**特徴：**
- Flaskのみで完結するシンプルな構成
- 静的ファイル（HTML/CSS/JS）を配信

**詳細：** [flask-app/README.md](flask-app/README.md)

---

### 2. flask-react-app
Flask（バックエンド）+ React（フロントエンド）の分離構成

**特徴：**
- フロントエンド：React + TypeScript + Vite
- バックエンド：Flask REST API

**詳細：** [flask-react-app/README.md](flask-react-app/README.md)

**カスタマイズ：**
フロントエンドの他の選択肢（Vue.js, Next.jsなど）への変更も可能

---

## 🚀 使い方

### 前提条件
- Docker Desktop がインストールされていること
- Docker Compose が利用可能であること
- ローカルにPythonやNode.jsをインストールする必要はありません

### プロジェクトの起動

各プロジェクトディレクトリに移動して起動します：

```bash
# Flask単体アプリの場合
cd flask-app
docker compose up -d

# Flask + React アプリの場合
cd flask-react-app
docker compose up -d
```

### 停止

```bash
docker compose down
```

## 🛠️ 拡張
- データベースを追加する場合は、`docker-compose.yml` にサービスを追加してください。
- cssフレームワーク（Tailwind Bootstrapなど）を導入。

## 📚 Dockerコマンド集
* コンテナ起動  
`docker compose up -d`
* ビルドして起動  
`docker compose up -d --build`
* ビルド  
`docker compose build <container-name>`
* キャッシュなしでビルド  
`docker compose build --no-cache <container-name>`
* コンテナ停止  
`docker compose down`
* コンテナ再起動  
`docker compose restart`
* コンテナ状況確認   
`docker ps`
* コンテナログ確認  
`docker logs <container-name>`
* コンテナ内に入る  
`docker compose exec <container-name> bash`

## 🔍　Docker のセットアップ（WSL）

### 3.1. 既存の Docker Desktop を無効化

Windows 上で Docker Desktop が動いている場合は停止します。(アンインストールしてもOK)

### 3.2. 必要なパッケージをインストール（以下からはWSL内で実行）

```bash
sudo apt update
sudo apt install -y ca-certificates curl gnupg lsb-release
```

### 3.3. Docker リポジトリを登録

```bash
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] \
  https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```

### 3.4. Docker をインストール

```bash
sudo apt update
sudo apt install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```

### 3.5. Docker デーモン起動 & 自動起動設定

```bash
echo "[boot]\nsystemd=true" | sudo tee /etc/wsl.conf > /dev/null
wsl --shutdown   # これだけPowerShell で実行
# 再度 WSL を開いて:
sudo systemctl enable --now docker
```

### 3.6. 権限設定（sudo不要でDocker実行）

```bash
sudo usermod -aG docker $USER
newgrp docker
```

### 3.7. 動作確認

```bash
docker run hello-world
```