React,TypeScript, FastAPIでプロジェクトを作成

Dockerfile for FastAPI (backend/Dockerfile)

FROM python:3.10-slim

WORKDIR /app
COPY requirements.txt /app/requirements.txt

RUN pip install --no-cache-dir -r requirements.txt

COPY . /app

CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

Why Separate the COPY Commands?

1. COPY requirements.txt /app/requirements.txt
   This step copies only the requirements.txt file to the container. This file is usually small and changes infrequently (only when dependencies change). By copying only this file, Docker can cache the subsequent RUN pip install step.

2. RUN pip install --no-cache-dir -r requirements.txt
   This installs the Python dependencies listed in requirements.txt. If requirements.txt hasn’t changed, Docker will reuse the cached result of this step. This prevents reinstalling the dependencies unnecessarily, speeding up the build.

3. COPY . /app
   This step copies the rest of the files (your application code) to the container. Your application code changes more frequently than your dependencies, so by separating this COPY from the pip install step, Docker can avoid re-running the dependency installation every time the application code changes. Only the application files will be copied, and the rest of the image will remain cached.

Dockerfile for frontend

FROM node:latest

WORKDIR /app

COPY . .
RUN npm install

CMD ["npm", "run", "dev", "--", "--host"]

--hostを設定すると、ブラウザからコンテナ内のViteにアクセス可能