ServBay で VitePress プロジェクトを作成・運用する

VitePress は Vue によって支えられた最新の静的サイトジェネレーターで、素早く美しく、メンテナンスしやすいドキュメントサイト構築のために設計されています。Vite をベースにしているため、開発体験やビルドパフォーマンスが非常に優れています。自分のプロジェクト・ライブラリ・製品の公式ドキュメントサイトを作りたい開発者にとって理想的な選択肢です。

ローカルで VitePress の開発・テストを行う際には、安定していて設定が簡単な開発環境が不可欠です。ServBay はまさにそのためのツールで、複数バージョンの Node.js や強力な Web サーバー（Caddy や Nginx 等）を統合し、VitePress プロジェクトのサービス提供を容易にします。

この記事では ServBay の統合環境を活用し、ゼロから VitePress プロジェクトを作成・設定・運用するステップをご案内します。開発サーバーのリバースプロキシ設定、ビルド後の静的ファイルサービスの構築も含めて解説します。

VitePress とは？

VitePress は Vite を基盤にした静的サイトジェネレーター（SSG）で、Vue 3 の強力な機能と Vite の高速性を活かして、高品質な静的サイト、特に技術ドキュメント構築を得意としています。

VitePress の主な特徴とメリット

超高速な開発体験: Vite の HMR（ホットモジュールリプレースメント）により、修正後すぐにブラウザで変更を確認でき、開発効率が大幅向上。
Vue が駆動: Markdown ファイル内で Vue コンポーネントを直接使用可能。インタラクティブな表現力が大幅にアップします。
シンプルで簡単: 設定が簡単で、箱から出してすぐに使えます。コンテンツ制作に集中できます。
高パフォーマンス: 生成される静的ファイルは軽量で読み込みが速く、SPA ライクな体験を提供する内蔵ルーティングも完備。
SEO 対応: 生成される HTML 構造は検索エンジンによるクロールに適しており、カスタムヘッダータグの設定も可能です。
Markdown 強化: CommonMark や GitHub Flavored Markdown (GFM) の全機能に加え、独自の拡張構文もサポート。

VitePress を使えば、開発者は高品質かつパフォーマンスに優れたドキュメントサイトを簡単に構築できます。

ServBay で VitePress プロジェクトを作成・運用する

ServBay なら Node.js のバージョン管理や Web サーバー設定が簡単。開発時のローカルサーバー運用も、ビルド後の静的ファイル配信も一括して管理できます。

必要な準備

始める前に、以下の準備を済ませてください：

ServBay のインストール: お使いのシステムに ServBay が無事インストールされていることをご確認ください。まだであれば ServBay インストールガイドを参照してください。
Node.js パッケージの導入: ServBay 上で必要なバージョンの Node.js パッケージをインストール・有効化してください。"パッケージ" ページから簡単に管理できます。Node.js の使い方を参考に。

VitePress プロジェクトの作成

プロジェクトディレクトリの初期化
まず、ターミナルアプリを開いてください。ServBay のデフォルトの Web サイトルートディレクトリ内にプロジェクト用フォルダを作成するのがおすすめです。その方が後の設定がスムーズです。
macOS:
bash
```
cd /Applications/ServBay/www
mkdir servbay-vitepress-app
cd servbay-vitepress-app
```
1
2
3
Windows:
cmd
```
cd C:\ServBay\www
mkdir servbay-vitepress-app
cd servbay-vitepress-app
```
1
2
3

VitePress のインストールと初期設定

プロジェクトフォルダ servbay-vitepress-app で npm または yarn のどちらかを使って VitePress を開発依存として追加し、初期化コマンドを実行します。

bash

npm add -D vitepress
npx vitepress init

Yarn の場合:

bash

yarn add -D vitepress
yarn vitepress init

初期化コマンドでは、サイトタイトルや説明などの基本設定がガイドされます。指示に従って入力してください。

 ┌  Welcome to VitePress!
 │
 ◇  Where should VitePress initialize the config?
 │  ./docs  # デフォルトのドキュメントディレクトリ。Enter で確定。
 │
 ◇  Site title:
 │  ServBay VitePress Demo # サイトタイトル（例: ServBay VitePress Demo）
 │
 ◇  Site description:
 │  A VitePress site running on ServBay # サイトの説明文
 │
 ◇  Theme:
 │  Default Theme # デフォルトテーマを選択
 │
 ◇  Use TypeScript for config and theme files?
 │  Yes # 設定ファイル等に TypeScript を使うか。好みで選択。
 │
 ◇  Add VitePress npm scripts to package.json?
 │  Yes # package.json にスクリプトを追加。Yes 推奨。
 │
 └  Done! Now run npm run docs:dev and start writing.

初期化完了後、servbay-vitepress-app の docs フォルダ内に設定ファイル（.vitepress）、サンプルページ（index.md, guide/index.md など）が自動生成されます。また、package.json に docs:dev や docs:build などのスクリプトも追加されます。

VitePress サイト内容の編集

トップページの編集
デフォルトのトップページは docs/index.md にあります。任意のテキストエディタで内容を修正できます。例えばこう変更できます：
markdown
```
# Hello ServBay!

ServBay を使って VitePress ドキュメントサイトを運用しましょう。

これは ServBay でサービス提供する VitePress のローカルデモサイトです。
```
1
2
3
4
5

開発モードで実行する

VitePress の開発時には内蔵開発サーバーを使います。ホットリロードによるリアルタイムプレビューができるほか、ServBay のリバースプロキシ機能で独自ドメイン・SSL を利用可能です。

VitePress 開発サーバーの起動
ターミナルでプロジェクトルート（macOS: /Applications/ServBay/www/servbay-vitepress-app、Windows: C:\ServBay\www\servbay-vitepress-app）に移動し、以下のコマンドで開発サーバーを任意のポート（例：8585）で起動します。
bash
```
npm run docs:dev -- --port 8585
```
1
Yarn の場合:
bash
```
yarn docs:dev --port 8585
```
1
サーバーは指定ポートでローカル待機（例：8585）し、ターミナルでアドレス（http://localhost:8585）が表示されます。
ServBay サイトの設定（リバースプロキシ）
ServBay コントロールパネルの「サイト」ページを開き、新規ウェブサイト設定を追加します。
- 名前: 認識しやすい名称（例：VitePress 開発サイト）。
- ドメイン名: 希望するローカル開発用ドメイン。ブランドガイドラインに従い .servbay.demo サフィックス推奨。例：vitepress-dev.servbay.demo
- サイトタイプ: 「リバースプロキシ」を選択。
- IP: 127.0.0.1（ローカルホスト）。
- ポート: ステップ1で指定したポート（例：8585）。
保存後、ServBay が Web サーバー（Caddy や Nginx 等）を自動設定し、https://vitepress-dev.servbay.demo へのアクセスを http://127.0.0.1:8585 に転送します。
開発サイトにアクセス
ブラウザから設定したドメイン https://vitepress-dev.servbay.demo にアクセスすると、開発サーバーの VitePress サイトが表示されます。ServBay 経由なら、独自ドメインと ServBay User CA による SSL 証明書も自動適用され、HTTPS で安全に利用できます。

本番版（静的サイト）のビルド

VitePress ドキュメント作成が済み、公開準備ができたら静的ファイルとして最適化ビルドします。

本番版のビルド
ターミナルでプロジェクトルートに移動し、以下を実行します：
bash
```
npm run docs:build
```
1
または Yarn:
bash
```
yarn docs:build
```
1
Markdown ファイルや Vue コンポーネント類が静的 HTML・CSS・JavaScriptファイルとして最適化ビルドされます。成果物はプロジェクトディレクトリの docs/.vitepress/dist に生成されます。
ServBay サイト設定（静的ファイルサービス）
本番版は静的ファイル群なので、ServBay の静的ファイルサービス機能を使いましょう。
ServBay のコントロールパネルで「サイト」ページから新規設定を追加します。
- 名前: 認識しやすい名称（例：VitePress 本番サイト）。
- ドメイン名: 本番用ローカルドメイン（例：vitepress-prod.servbay.demo）。
- サイトタイプ: 「静的」を選択。
- ウェブルート: ビルド成果物の絶対パスを入力：
  - macOS: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist
  - Windows: C:\ServBay\www\servbay-vitepress-app\docs\.vitepress\dist
設定保存後 ServBay が Web サーバーを適切に構成し、指定ディレクトリから静的ファイルを提供します。
本番サイトにアクセス
設定したドメイン https://vitepress-prod.servbay.demo にアクセスすると、本番ビルド済みの VitePress サイトが確認できます。ここでも ServBay による独自ドメインと SSL 暗号化が適用されます。

クリーンURLモード（`cleanUrls: true`）で運用

VitePress には cleanUrls: true という設定があり、生成ページのリンクから .html 拡張子を省略できます（例：/guide/ や /about など）。これをサーバー側で正しく処理するには追加設定が必要です。

ServBay の Web サーバーは Caddy または Nginx が利用可能。ここでは Caddy 向けサンプル設定を示します（try_files 指令で .html付きやディレクトリ内index.htmlも探索）。

VitePress 設定で cleanUrls を有効化
VitePress 設定ファイル（docs/.vitepress/config.mts もしくは config.ts）を編集し、siteConfig に cleanUrls オプションを追加してください：
typescript
```
// docs/.vitepress/config.mts
import { defineConfig } from 'vitepress'

export default defineConfig({
  // ...他の設定
  cleanUrls: true, // クリーンURLを有効化
  // ...他の設定
})
```
1
2
3
4
5
6
7
8
再度 npm run docs:build で本番ビルドを行いましょう。

ServBay サイトのカスタム Caddy 設定

コントロールパネルで対象サイト（例：vitepress-prod.servbay.demo）を編集します。

「カスタム設定」を有効化。
「Caddy 設定」欄に以下を貼り付けます。servbay-vitepress-test.prod を実際のドメイン名に、ウェブルートパスも環境に合わせて変更してください：
- macOS: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist
- Windows: C:\ServBay\www\servbay-vitepress-app\docs\.vitepress\dist

bash

# 実際のドメイン名（例：vitepress-cleanurl.servbay.demo）に修正
vitepress-cleanurl.servbay.demo {
    # Brotli (zstd)・Gzip圧縮で高速化
    encode zstd gzip

    # ServBayの標準ログ設定をインポート（デバッグに便利）
    import set-log vitepress-cleanurl.servbay.demo

    # ServBayの内部SSL証明書処理
    tls internal

    # ファイル探索の主要設定
    # 1. パスに直接一致するファイルを探索（例：/about -> /about）
    # 2. ディレクトリ内の index.html（例：/guide/ -> /guide/index.html）
    # 3. .html 拡張子ファイル（例：/about -> /about.html）
    try_files {path} {path}/index.html {path}.html

    # サイトのルートディレクトリを指定
    # macOS: root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist
    # Windows: root * C:\ServBay\www\servbay-vitepress-app\docs\.vitepress\dist
    root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

    # 静的ファイルサーバを有効化
    file_server
}

設定を保存して変更を適用してください。

クリーンURLモードサイトのアクセス
設定したドメイン（例：https://vitepress-cleanurl.servbay.demo）にアクセスすると、.html 拡張子無しの URL（例：/about）でもページを表示できます。

まとめ

この記事を通じて、ServBay 環境下で VitePress ドキュメントサイトの作成・開発・公開まで一連の流れを習得できました。Node.js 環境管理からローカル Web サーバー設定（開発時のリバースプロキシや本番時の静的配信サービス）まで ServBay が一括サポートし、独自ドメインや SSL 証明書発行も自動化されています。

ServBay と VitePress の組み合わせで、効率的かつ高品質な技術ドキュメントの構築・運用がさらに身近になります。

ServBay で VitePress プロジェクトを作成・運用する ​

VitePress とは？ ​

VitePress の主な特徴とメリット ​

ServBay で VitePress プロジェクトを作成・運用する ​

必要な準備 ​

VitePress プロジェクトの作成 ​

VitePress サイト内容の編集 ​

開発モードで実行する ​

本番版（静的サイト）のビルド ​

クリーンURLモード（cleanUrls: true）で運用 ​

まとめ ​

ServBay で VitePress プロジェクトを作成・運用する

VitePress とは？

VitePress の主な特徴とメリット

ServBay で VitePress プロジェクトを作成・運用する

必要な準備

VitePress プロジェクトの作成

VitePress サイト内容の編集

開発モードで実行する

本番版（静的サイト）のビルド

クリーンURLモード（`cleanUrls: true`）で運用

まとめ