Dockerで開発サーバを動かす

VitePressはViteを採用しています。Hot Module Replacementにより，VitePressドキュメントを執筆するにあたり，プレビューをリアルタイムで更新させることがで
きます。このプロジェクトでは，VitePress開発サーバをDockerで起動し，Markdown本文はObsidianで編集する運用にしています。

プロジェクト構成（srcDir，publicDir，en/ja ルーティング，Obsidian Vault運用）については，VitePressプロジェクト構成 を参照してください。

Dockerfile

開発用コンテナはNode.jsイメージを使い，lastUpdated 用にGitを入れます。

Dockerfile

FROM node:20-alpine

# Install dependencies
RUN apk add --no-cache git

# Set working directory
WORKDIR /workspace

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm install

# Default command
CMD ["npm", "run", "docs:dev", "--", "--host", "0.0.0.0", "--port", "5173"]

1. Gitをインストールする。 VitePressにはドキュメントの最終更新日時を表示する機能があります（Last Update）。この機能は，VitePress内部で git log -1 --pretty="%ai" を呼ぶことによって実現しています。Last Updateを使用する場合はGitのインストールが必要です。
2. ワーキングディレクトリを設定する。 以後はこのディレクトリがカレントディレクトリになります。
3. ローカルの package.json と package-lock.json をコンテナにコピーする。 コピー先は /workspace です。
4. その package.json に記載されたモジュールをインストールする。 /workspace/node_modules にインストールされます。
5. 開発サーバを立ち上げる。

compose.yaml

docs をマウントしつつ，node_modules はNamed Volumeに分離します。

compose.yaml

services:
  vitepress-dev:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: vitepress-dev
    restart: unless-stopped
    ports:
      - "5173:5173"
    volumes:
      - ./docs:/workspace/docs:rw
      - node_modules:/workspace/node_modules
    environment:
      - NODE_ENV=development

volumes:
  node_modules:

package.json

{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },

  "devDependencies": {
    "markdown-it-mathjax3": "^4.3.2",
    "vitepress": "next",
    "vitepress-sidebar": "^1.33.0",
    "vitepress-plugin-group-icons": "^1.6.3"
  },

  "dependencies": {
    "markdown-it": "^14.1.0",
    "vue": "^3.4.0"
  }
}

name, version, description を適切に設定します。開発時依存関係には，公式のMathJaxを利用するための markdown-it-mathjax3，ディレクトリ構造か
らサイドバーを生成する vitepress-sidebar，コードブロックにタイトルとアイコンをつけるための vitepress-plugin-group-icons を設定しています。それぞ
れ config.mts 等で指定が必要です。

MathJaxには少し手間取りました。執筆時点ではドキュメントがありませんが，config.mts で math を true にする場合，すなわち以下のような場合には，
markdown-it-mathjax3 をインストールしないと動作しません。

export default defineConfig({
  markdown: {
    math: true,
  }
})

起動

docker compose build --no-cache
docker compose up -d

依存関係を更新したとき

package.json を変えた場合は，再インストールのために node_modules ボリュームを作り直します。

docker compose down
docker volume rm vitepress_node_modules
docker compose build --no-cache
docker compose up -d