- Docker Composeでローカルスタックを起動します：
docker compose watch- ブラウザを開いて以下のURLにアクセスできます：
Dockerでビルドされたフロントエンド（パスに基づいてルーティング）: http://localhost:5173
OpenAPIベースのJSON形式のバックエンドAPI: http://localhost:8000
OpenAPIバックエンドによる自動対話型ドキュメント（Swagger UI）: http://localhost:8000/docs
データベース管理用ウェブインターフェース（Adminer）: http://localhost:8080
プロキシによるルート処理の確認用Traefik UI: http://localhost:8090
注意: スタックを初めて起動する際、準備が整うまで1分ほどかかる場合があります。バックエンドがデータベースの準備を待ち、すべての設定を行うためです。ログを確認して進捗を監視できます。
ログを確認するには（別のターミナルで）以下を実行します：
docker compose logs特定のサービスのログを確認するには、サービス名を追加します。例：
docker compose logs backendDocker Composeファイルは、各サービスがlocalhostの異なるポートで利用できるように設定されています。
バックエンドとフロントエンドは、ローカル開発サーバーと同じポートを使用します。つまり、バックエンドはhttp://localhost:8000、フロントエンドはhttp://localhost:5173です。
これにより、Docker Composeサービスを停止してローカル開発サービスを起動しても、同じポートを使用するため、すべてが正常に動作し続けます。
例えば、Docker Composeのfrontendサービスを停止し、別のターミナルで以下を実行できます：
docker compose stop frontendそしてローカルフロントエンド開発サーバーを起動します：
cd frontend
npm run devまたはbackend Docker Composeサービスを停止できます：
docker compose stop backendそしてバックエンドのローカル開発サーバーを実行できます：
cd backend
fastapi dev app/main.pyDocker Composeスタックを起動すると、デフォルトでlocalhostを使用し、各サービス（バックエンド、フロントエンド、Adminerなど）に異なるポートが割り当てられます。
本番環境（またはステージング環境）にデプロイする際は、各サービスが異なるサブドメインにデプロイされます（例：バックエンドはapi.example.com、フロントエンドはdashboard.example.com）。
デプロイメントのガイドでは、設定されたプロキシであるTraefikについて説明しています。これはサブドメインに基づいて各サービスにトラフィックを転送する役割を果たします。
ローカルでこれらが正常に動作しているかテストしたい場合は、ローカルの.envファイルを編集し、以下のように変更できます：
DOMAIN=localhost.tiangolo.comこれはDocker Composeファイルでサービスのベースドメインを設定するために使用されます。
Traefikはこれを使用して、api.localhost.tiangolo.comへのトラフィックをバックエンドに、dashboard.localhost.tiangolo.comへのトラフィックをフロントエンドに転送します。
localhost.tiangolo.comドメイン（およびそのすべてのサブドメイン）は127.0.0.1を指すように設定された特別なドメインです。これによりローカル開発に使用できます。
更新後、再度以下を実行します：
docker compose watch本番環境などにデプロイする場合、メインのTraefikはDocker Composeファイルの外部で設定されます。ローカル開発では、docker-compose.override.ymlに含まれるTraefikを使用して、api.localhost.tiangolo.comやdashboard.localhost.tiangolo.comなどのドメインが期待通りに動作することをテストできます。
スタック全体に適用される設定を含むメインのcompose.ymlファイルがあり、docker composeによって自動的に使用されます。
また、開発用のオーバーライドを含むcompose.override.ymlもあります。例えば、ソースコードをボリュームとしてマウントするなどの設定が含まれています。これはdocker composeによって自動的に使用され、compose.ymlの上にオーバーライドを適用します。
これらのDocker Composeファイルは、コンテナに注入される環境変数として設定を含む.envファイルを使用します。
また、docker composeコマンドを呼び出す前にスクリプトで設定された環境変数からいくつかの追加設定も使用します。
変数を変更した後は、必ずスタックを再起動してください：
docker compose watch.envファイルには、すべての設定、生成されたキーやパスワードなどが含まれています。
プロジェクトがパブリックな場合など、ワークフローによってはGitから除外したい場合があります。その場合、プロジェクトのビルドやデプロイ時にCIツールがこれを取得する方法を確保する必要があります。
一つの方法として、各環境変数をCI/CDシステムに追加し、compose.ymlファイルを更新して.envファイルを読み取る代わりに特定の環境変数を読み取るようにすることができます。
コードのリンティングとフォーマットにはpre-commitというツールを使用しています。
インストールすると、gitでコミットする直前に実行されます。これにより、コードが一貫性を保ち、フォーマットされていることがコミット前に確認されます。
プロジェクトのルートに.pre-commit-config.yamlという設定ファイルがあります。
pre-commitはすでにプロジェクトの依存関係の一部ですが、グローバルにインストールすることもできます。その場合は公式のpre-commitドキュメントに従ってください。
pre-commitツールがインストールされ利用可能になったら、各コミットの前に自動的に実行されるようにローカルリポジトリに「インストール」する必要があります。
uv/uvxを使用する場合、以下のようにできます：
❯ uv tool install pre-commit
❯ uvx pre-commit install
pre-commit installed at .git/hooks/pre-commitこれで、コミットしようとする際（例：git commit）に、pre-commitが実行され、コミットしようとしているコードをチェックおよびフォーマットし、そのコードを再度gitでステージングするよう求めます。
その後、修正されたファイルを再度git addでステージングし、コミットできます。
pre-commitを全ファイルに対して手動で実行することもできます。uvxを使用して以下のように実行できます：
❯ uvx pre-commit run --all-files
check for added large files..............................................Passed
check toml...............................................................Passed
check yaml...............................................................Passed
ruff.....................................................................Passed
ruff-format..............................................................Passed
eslint...................................................................Passed
prettier.................................................................Passed本番環境やステージング環境のURLは、これらと同じパスを使用しますが、独自のドメインを使用します。
ローカル開発用のURL。
フロントエンド: http://localhost:5173
バックエンド: http://localhost:8000
自動対話型ドキュメント（Swagger UI）: http://localhost:8000/docs
自動代替ドキュメント（ReDoc）: http://localhost:8000/redoc
Adminer: http://localhost:8080
Traefik UI: http://localhost:8090
ローカル開発用のURL。
フロントエンド: http://dashboard.localhost.tiangolo.com
バックエンド: http://api.localhost.tiangolo.com
自動対話型ドキュメント（Swagger UI）: http://api.localhost.tiangolo.com/docs
自動代替ドキュメント（ReDoc）: http://api.localhost.tiangolo.com/redoc
Adminer: http://localhost.tiangolo.com:8080
Traefik UI: http://localhost.tiangolo.com:8090