WebAppTemplate

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

📁 プロジェクト一覧

1. flask-app

シンプルなFlask Webアプリケーション

特徴：

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

詳細： flask-app/README.md

2. flask-react-app

Flask（バックエンド）+ React（フロントエンド）の分離構成

特徴：

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

詳細： flask-react-app/README.md

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

🚀 使い方

前提条件

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

プロジェクトの起動

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

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

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

停止

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内で実行）

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

3.3. Docker リポジトリを登録

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 をインストール

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

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

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

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

sudo usermod -aG docker $USER
newgrp docker

3.7. 動作確認

docker run hello-world