Support the use of dev containers for reproducible dev environment

[JonathanPlasse]

This would allow having the dev environment automatically set up and allow using code spaces.
https://code.visualstudio.com/docs/devcontainers/containers

[PhilippWu]

if #721 is solved it may also support devcontainers

[tiangolo]

Thanks for the interest! This would mean a somewhat tightly coupling with the specific product GitHub Code Spaces.

I think it could work for other types of projects that don't involve so much of handling different containers that the developer is expected to manage (e.g. the DB), so for now I would leave it as it is.

[east4ming]

Devcontainer has actually become an open standard, which is currently supported by a number of ide's and tools in addition to vscode, github code spaces, etc., such as JetBrains and DevPod/DevBox. So I hope it is possible to realize this function . Thanks!

[robot-ranger]

I also want to point out the many containers can be run on the devcontainer host, and managed from inside the devcontainer with "docker-outside-of-docker" (see here: https://github.com/devcontainers/features/tree/main/src/docker-outside-of-docker)

I almost have this working, but im still contending with some networking road blocks and i dont have a solution yet.

from inside devcontainer with DooD feature enabled:
docker compose up (will launch the stack on the devcontainer's host)
docker compose down frontend (will bring down the frontend container)
cd frontend/ && npm run dev -- --host ( will launch frontend dev server inside the devcontainer)

but doing this, i run into CORS errors. cant login via ui for some reason. oddly enough, i can get an access-token when logging in via the api @ :8000/docs, so i am not sure why the ui cant login.

personally I just dont want to install node and all backend deps in my WSL installation, i would prefer they were containerized inside a devcontianer.

[yangliuyu]

https://github.com/loft-sh/devpod is an open source solution using devcontainer.json specification. No vendor lock-in.

[pzq123456]

Prerequisites and Setup Instructions

I have successfully built a backend development container in VS Code. Before using it, make sure you have already built the full-stack-fastapi-template Docker container in the parent directory and that its db container is running. Also, you need to copy the .env file from the parent directory into the backend folder; otherwise, FastAPI will not start.

Once these steps are complete, you can open the backend folder in VS Code and place the following configuration file at: .devcontainer/devcontainer.json

{
	"name": "Existing Dockerfile",
	"build": {
		"context": "..",
		"dockerfile": "../Dockerfile"
	},
	"features": {
		"ghcr.io/va-h/devcontainers-features/uv:1": {
			"version": "latest"
		}
	},
	// 使用父容器中 Docker Compose 的网络
	"runArgs": [
		"--network=full-stack-fastapi-template_default"
	],
	// 自动安装 VS Code Python 插件
	"customizations": {
		"vscode": {
			"extensions": [
				"ms-python.python",
				"ms-python.vscode-pylance"
			],
			// 配置 Python 解释器自动使用虚拟环境
			"settings": {
				"python.defaultInterpreterPath": "/workspaces/backend/.venv/bin/python"
			}
		}
	},
	// 在容器创建后自动运行 uv sync
	"postCreateCommand": "uv sync"
}