Open2

Vite+FastAPIのDevContainerアプリの新規作成手順

星野 仁星野 仁

概要

FastAPIでバックエンドを構成し、ReactでUIのフロントエンドを提供するアプリ環境を構築する。

環境

  • 開発環境： VSCode
  • コンテナ： Docker - mcr.microsoft.com/vscode/devcontainers/base:bookworm
  • 利用言語： Python v3.12, Node.js (TS) v22.13
  • Python環境ツール： rye
  • Node.js環境ツール： npm

条件

  • DevコンテナよびGitリポジトリは一つで運用 → Pythonパッケージで両方まとめて提供予定のため
  • OS環境は非依存想定（ただし開発はMacOSホスト上で実施）
  • coreとなる機能やコンポーネントは別途PythonやTSのモジュールとして分離開発
  • 原則ルーティングは不要でサーバサイドレンダリング(SSR)などは行わない
  • viteサーバは開発で利用するが、実行環境ではFastAPIのStaticPageとして扱う（サービスポートは1つ）
星野 仁星野 仁

コンテナ構築

プロジェクトの直下 .devcontainer フォルダに以下の3つのファイルを作成し、[F1] 開発コンテナ: 開発コンテナのリビルド を実行する。

  • devcontainer.json : Devcontainerの設定ファイル
  • Dockerfile : Dockerコンテナの構築手順定義
  • post-start.sh : コンテナ構築後の初期設定
ファイルの中身詳細

devcontainer.json

devcontainer.json
{
    "name": "<<コンテナ名>>",
    "build": {
        "context": "..",
        "dockerfile": "Dockerfile"
    },
    "customizations": {
        "vscode": {
            "extensions": [
                // 必要なVSC拡張機能を設定（あとから必要時に追加で良い）
            ],
            "settings": {
                "python.defaultInterpreterPath": "./.venv/bin/python"
            }
        }
    },
    "postStartCommand": "./.devcontainer/post-start.sh",
    "remoteUser": "vscode"
}

Dockerfile

マルチステージビルドでなるべく小さなコンテナを目指す。

Dockerfile
# Build container for Python-Rye
FROM debian:bookworm-slim as builder-python

WORKDIR /home/vscode

ENV RYE_HOME="/home/vscode/.rye"
ENV PATH="$RYE_HOME/shims:$PATH"

# hadolint ignore=DL3008
RUN apt-get update \
    && apt-get install -y --no-install-recommends ca-certificates curl

SHELL [ "/bin/bash", "-o", "pipefail", "-c" ]
RUN curl -sSf https://rye.astral.sh/get | RYE_INSTALL_OPTION="--yes" bash


# Build container for TypeScript-Node.js
FROM debian:bookworm-slim as builder-node

WORKDIR /usr/local

ENV NVM_DIR=/usr/local/nvm
ENV NODE_VERSION=22.13.0

# hadolint ignore=DL3008
RUN mkdir -p $NVM_DIR \
    && apt-get update \
    && apt-get install -y --no-install-recommends ca-certificates curl

SHELL [ "/bin/bash", "-o", "pipefail", "-c" ]
# hadolint ignore=DL3008
RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash \
    && . $NVM_DIR/nvm.sh \
    && nvm install $NODE_VERSION \
    && nvm use $NODE_VERSION \
    && npm install -g npm@latest \
    && npm install -g typescript vite


# Create container for devcontainer
FROM mcr.microsoft.com/vscode/devcontainers/base:bookworm

ENV USER=vscode
ENV RYE_HOME="/home/vscode/.rye"
ENV NVM_DIR=/usr/local/nvm
ENV PATH="$RYE_HOME/shims:$PATH"
ENV PYTHONUNBUFFERED True

COPY --from=builder-python "$RYE_HOME" "$RYE_HOME"
COPY --from=builder-node "$NVM_DIR" "$NVM_DIR"

RUN chown -R "$USER" "$RYE_HOME" && chgrp -R "$USER" "$RYE_HOME" \
    && echo "export NVM_DIR=\"$NVM_DIR\"" >> /home/"$USER"/.bashrc \
    && echo "[ -s \"$NVM_DIR/nvm.sh\" ] && \\. \"$NVM_DIR/nvm.sh\"" >> /home/"$USER"/.bashrc

post-start.s

rootではなくユーザー権限で実施する環境構築処理を定義する。
プロジェクトのGitリポジトリ更新に影響される環境構築などが該当。

post-start.s
#!/bin/bash

# Abort script if any command returns an error.
set -euo pipefail


# Setup python virtual environment.
rye sync
# Activate the python virtual environment.
source .venv/bin/activate
# Install pre-commit hooks.
pre-commit install


# Setup Node.js
source /usr/local/nvm/nvm.sh
nvm use default
# install node modules
pushd ./frontend
npm install
popd


# Setup Git
# Set the safe.directory
git config --global --add safe.directory `pwd`

Gitのリポジトリ作成

VSCのソース管理で [Initialize Repository] を実行、またはターミナルで以下実行。

git init -b main

Python環境の構築

別記事でまとめるため省略。

ViteでReact環境を構築

コンテナ上のターミナルでReactアプリを作成する create vite を実行。

 npm create vite@latest . -- --template react-ts

Docker経由でのアクセスになるので、viteがlocalhost以外の要求を受けるように vite.config.ts でバインド先を 0.0.0.0 に設定する。

vite.config.ts
...
export default defineConfig({
  plugins: [react()],
  server: {
    host: "0.0.0.0",
    // ...
  },
});