🚀 Add Dev Container support

Author: toshohirasawa

.devcontainer/devcontainer.json

@@ -0,0 +1,57 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/docker-existing-docker-compose
+{
+	"name": "full-stack-fastapi-template devcontainer",
+
+	// Update the 'dockerComposeFile' list if you have more compose files or use different names.
+	// The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
+	"dockerComposeFile": [
+		"../docker-compose.yml",
+		"../docker-compose.override.yml",
+		"docker-compose.yml"
+	],
+
+	// The 'service' property is the name of the service for the container that VS Code should
+	// use. Update this value and .devcontainer/docker-compose.yml to the real service name.
+	"service": "backend",
+
+	// The optional 'workspaceFolder' property is the path VS Code should open by default when
+	// connected. This is typically a file mount in .devcontainer/docker-compose.yml
+	"workspaceFolder": "/workspaces",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	"features": {
+        "ghcr.io/devcontainers/features/common-utils:2":{
+            "installZsh": "true",
+			"installOhMyZsh": "true",
+            "upgradePackages": "true"
+        },
+		// node
+		// host both backend and frontend in the same container
+		"ghcr.io/devcontainers/features/node:1": {
+			"version": "24"
+		}
+	},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Uncomment the next line if you want start specific services in your Docker Compose config.
+	"runServices": ["db", "prestart", "backend"],
+
+	// Uncomment the next line if you want to keep your containers running after VS Code shuts down.
+	// "shutdownAction": "none",
+
+	// Uncomment the next line to run commands after the container is created.
+	// "postCreateCommand": "cat /etc/os-release",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "devcontainer"
+
+	"remoteEnv": {
+		"VITE_API_URL": "http://localhost:8000"
+	}
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,31 @@
+version: '3.8'
+services:
+  # Update this to the name of the service you want to work with in your docker-compose.yml file
+  backend:
+    # Uncomment if you want to override the service's Dockerfile to one in the .devcontainer 
+    # folder. Note that the path of the Dockerfile and context is relative to the *primary* 
+    # docker-compose.yml file (the first in the devcontainer.json "dockerComposeFile"
+    # array). The sample below assumes your primary file is in the root of your project.
+    #
+    # build:
+    #   context: .
+    #   dockerfile: .devcontainer/Dockerfile
+
+    volumes:
+      # Update this to wherever you want VS Code to mount the folder of your project
+      - .:/workspaces
+    
+    ports:
+      - 5173:5173
+
+    # Uncomment the next four lines if you will use a ptrace-based debugger like C++, Go, and Rust.
+    # cap_add:
+    #   - SYS_PTRACE
+    # security_opt:
+    #   - seccomp:unconfined
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+  
+  mailcatcher:
+    hostname: ${STACK_NAME}-mailcatcher

backend/Makefile

@@ -0,0 +1,6 @@
+SHELL := /bin/bash
+
+.PHONY: dev
+dev:
+	uv sync
+	uv run fastapi dev app/main.py --host 0.0.0.0 --reload

development.md

@@ -34,6 +34,31 @@ To check the logs of a specific service, add the name of the service, e.g.:
 docker compose logs backend
 ```
 
+## Dev Container Development
+
+Run `Dev Containers: Rebuild Container` command to build and open the workspace in the dev container.
+
+> [!IMPORTANT]
+> As Dev Container does not support a part of its features in a multi-devcontainer environment, use the backend container for both backend and frontend servers.
+
+To start the server for the frontend, run:
+```bash
+cd frontend
+make dev
+# or use commands:
+# npm install
+# npm run dev --loglevel silly -- --host 0.0.0.0
+```
+
+To start the server for the backend, run:
+```bash
+cd backend
+make dev
+# or use commands:
+# uv sync
+# uv run fastapi dev app/main.py --host 0.0.0.0 --reload
+```
+
 ## Local Development
 
 The Docker Compose files are configured so that each of the services is available in a different port in `localhost`.

frontend/Makefile

@@ -0,0 +1,5 @@
+SHELL := /bin/bash
+
+.PHONY: dev
+dev:
+	npm install && npm run dev --loglevel silly -- --host 0.0.0.0