From 4bff0427ae8ec9ac2fe338ba1de6a79ec497f271 Mon Sep 17 00:00:00 2001 From: Tosho Hirasawa Date: Tue, 7 Oct 2025 14:10:17 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Add=20Dev=20Container=20support?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .devcontainer/devcontainer.json | 57 ++++++++++++++++++++++++++++++++ .devcontainer/docker-compose.yml | 31 +++++++++++++++++ backend/Makefile | 6 ++++ development.md | 25 ++++++++++++++ frontend/Makefile | 5 +++ 5 files changed, 124 insertions(+) create mode 100644 .devcontainer/devcontainer.json create mode 100644 .devcontainer/docker-compose.yml create mode 100644 backend/Makefile create mode 100644 frontend/Makefile diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..c06fda221e --- /dev/null +++ b/.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" + } +} diff --git a/.devcontainer/docker-compose.yml b/.devcontainer/docker-compose.yml new file mode 100644 index 0000000000..6efd29aa21 --- /dev/null +++ b/.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 diff --git a/backend/Makefile b/backend/Makefile new file mode 100644 index 0000000000..2fd6eff18e --- /dev/null +++ b/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 diff --git a/development.md b/development.md index d7d41d73f1..b3f5225960 100644 --- a/development.md +++ b/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`. diff --git a/frontend/Makefile b/frontend/Makefile new file mode 100644 index 0000000000..fc33279681 --- /dev/null +++ b/frontend/Makefile @@ -0,0 +1,5 @@ +SHELL := /bin/bash + +.PHONY: dev +dev: + npm install && npm run dev --loglevel silly -- --host 0.0.0.0