VitePressサイトのデプロイ

以下のガイドは、いくつかの共通の前提に基づいています

VitePressサイトは、プロジェクトの`docs`ディレクトリ内にあります。
デフォルトのビルド出力ディレクトリ（`.vitepress/dist`）を使用しています。
VitePressはプロジェクトのローカル依存関係としてインストールされており、`package.json`に以下のスクリプトを設定しています
json
```
{
  "scripts": {
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  }
}
```

ローカルでのビルドとテスト

ドキュメントをビルドするには、次のコマンドを実行します
sh
```
$ npm run docs:build
```
ビルド後、次のコマンドを実行してローカルでプレビューします
sh
```
$ npm run docs:preview
```
`preview`コマンドは、出力ディレクトリ`.vitepress/dist`を`https://:4173`で提供するローカルの静的Webサーバーを起動します。本番環境にプッシュする前に、すべてが正しく表示されることを確認するために使用できます。
引数として`--port`を渡すことで、サーバーのポートを設定できます。
json
```
{
  "scripts": {
    "docs:preview": "vitepress preview docs --port 8080"
  }
}
```
これで、`docs:preview`メソッドはサーバーを`https://:8080`で起動します。

パブリックベースパスの設定

デフォルトでは、サイトはドメインのルートパス（`/`）にデプロイされると想定しています。サイトがサブパス（例：`https://mywebsite.com/blog/`）で提供される場合は、VitePress設定で`base`オプションを`'/blog/'`に設定する必要があります。

**例：** Github（またはGitLab）Pagesを使用し、`user.github.io/repo/`にデプロイする場合は、`base`を`'/repo/'`に設定します。

HTTPキャッシュヘッダー

本番サーバーのHTTPヘッダーを制御できる場合は、`cache-control`ヘッダーを設定して、繰り返しアクセス時のパフォーマンスを向上させることができます。

本番ビルドでは、静的アセット（JavaScript、CSS、および`public`にないその他のインポートされたアセット）にハッシュ化されたファイル名を使用します。ブラウザの開発ツールネットワークタブを使用して本番プレビューを検査すると、`app.4f283b18.js`のようなファイルが表示されます。

この`4f283b18`ハッシュは、このファイルのコンテンツから生成されます。同じハッシュURLは、同じファイルコンテンツを提供することが保証されています。コンテンツが変更されると、URLも変更されます。つまり、これらのファイルには、最も強力なキャッシュヘッダーを安全に使用できます。このようなファイルはすべて出力ディレクトリの`assets/`の下に配置されるため、次のヘッダーを設定できます

Cache-Control: max-age=31536000,immutable

Netlify `_headers`ファイルの例

/assets/*
  cache-control: max-age=31536000
  cache-control: immutable

注：`_headers`ファイルは、パブリックディレクトリ（この場合は`docs/public/_headers`）に配置して、出力ディレクトリにそのままコピーされるようにする必要があります。

Netlifyカスタムヘッダーのドキュメント

`vercel.json`のVercel設定の例

json

{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "max-age=31536000, immutable"
        }
      ]
    }
  ]
}

注：`vercel.json`ファイルは、**リポジトリ**のルートに配置する必要があります。

Vercelのヘッダー設定に関するドキュメント

プラットフォームガイド

Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render

新しいプロジェクトを設定し、ダッシュボードを使用してこれらの設定を変更します

**ビルドコマンド：** `npm run docs:build`
**出力ディレクトリ：** `docs/.vitepress/dist`
**ノードバージョン：** `18`（以上）

警告

HTMLコードに対して*自動縮小*などのオプションを有効にしないでください。Vueにとって意味のあるコメントが出力から削除されます。削除されると、ハイドレーションの不一致エラーが発生する可能性があります。

GitHub Pages

プロジェクトの`.github/workflows`ディレクトリ内に、次のような内容の`deploy.yml`という名前のファイルを作成します

yaml

# Sample workflow for building and deploying a VitePress site to GitHub Pages
#
name: Deploy VitePress site to Pages

on:
  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
  # using the `master` branch as the default branch.
  push:
    branches: [main]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Not needed if lastUpdated is not enabled
      # - uses: pnpm/action-setup@v3 # Uncomment this if you're using pnpm
      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm # or pnpm / yarn
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Install dependencies
        run: npm ci # or pnpm install / yarn install / bun install
      - name: Build with VitePress
        run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: docs/.vitepress/dist

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

警告

VitePressの`base`オプションが正しく設定されていることを確認してください。詳細は、パブリックベースパスの設定を参照してください。

リポジトリの設定の「ページ」メニュー項目で、「ビルドとデプロイ」>「ソース」で「GitHub Actions」を選択します。
変更を`main`ブランチにプッシュし、GitHub Actionsワークフローが完了するまで待ちます。設定に応じて、サイトが`https://<username>.github.io/[repository]/`または`https://<custom-domain>/`にデプロイされているはずです。サイトは、`main`ブランチへのプッシュごとに自動的にデプロイされます。

GitLab Pages

VitePress設定で`outDir`を`../public`に設定します。 `https://<username>.gitlab.io/<repository>/`にデプロイする場合は、`base`オプションを`'/<repository>/'`に設定します。

プロジェクトのルートに、以下の内容の`.gitlab-ci.yml`という名前のファイルを作成します。これにより、コンテンツを変更するたびにサイトがビルドおよびデプロイされます

yaml

image: node:18
pages:
  cache:
    paths:
      - node_modules/
  script:
    # - apk add git # Uncomment this if you're using small docker images like alpine and have lastUpdated enabled
    - npm install
    - npm run docs:build
  artifacts:
    paths:
      - public
  only:
    - main

Azure Static Web Apps

公式ドキュメントに従ってください。
設定ファイルでこれらの値を設定します（`api_location`など、不要な値は削除します）
- **`app_location`**：`/`
- **`output_location`**：`docs/.vitepress/dist`
- **`app_build_command`**：`npm run docs:build`

Firebase

プロジェクトのルートに`firebase.json`と`.firebaserc`を作成します

firebase.json:

json

{
  "hosting": {
    "public": "docs/.vitepress/dist",
    "ignore": []
  }
}

.firebaserc:

json

{
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}

`npm run docs:build`を実行した後、次のコマンドを実行してデプロイします
sh
```
firebase deploy
```

サージ

`npm run docs:build`を実行した後、次のコマンドを実行してデプロイします
sh
```
npx surge docs/.vitepress/dist
```

Heroku

`heroku-buildpack-static`に記載されているドキュメントとガイドに従ってください。
プロジェクトのルートに、以下の内容の`static.json`という名前のファイルを作成します
json
```
{
  "root": "docs/.vitepress/dist"
}
```

Edgio

EdgioへのVitePressアプリの作成とデプロイを参照してください。

Kinsta Static Site Hosting

これらの手順に従って、KinstaにVitepress Webサイトをデプロイできます。

Stormkit

これらの手順に従って、VitePressプロジェクトをStormkitにデプロイできます。

Nginx

Nginxサーバーブロック設定の例を以下に示します。この設定には、一般的なテキストベースのアセットのgzip圧縮、適切なキャッシュヘッダーを使用してVitePressサイトの静的ファイルを提供するためのルール、および`cleanUrls: true`の処理が含まれています。

nginx

server {
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    listen 80;
    server_name _;
    index index.html;

    location / {
        # content location
        root /app;

        # exact matches -> reverse clean urls -> folders -> not found
        try_files $uri $uri.html $uri/ =404;

        # non existent pages
        error_page 404 /404.html;

        # a folder without index.html raises 403 in this setup
        error_page 403 /404.html;

        # adjust caching headers
        # files in the assets folder have hashes filenames
        location ~* ^/assets/ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}

この構成では、ビルドされたVitePressサイトがサーバーの`/app`ディレクトリにあると想定しています。サイトのファイルが別の場所にある場合は、`root`ディレクティブを適宜調整してください。

index.htmlをデフォルトにしないでください

try_files解決は、他のVueアプリケーションのようにindex.htmlをデフォルトにすることはできません。これにより、無効なページ状態が発生します。

詳細については、公式nginxドキュメント、#2837、#3235の問題、およびMehdi Merahによるブログ記事を参照してください。

VitePressサイトのデプロイ ​

ローカルでのビルドとテスト ​

パブリックベースパスの設定 ​

HTTPキャッシュヘッダー ​

プラットフォームガイド ​

Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render ​

GitHub Pages ​

GitLab Pages ​

Azure Static Web Apps ​

Firebase ​

サージ ​

Heroku ​

Edgio ​

Kinsta Static Site Hosting ​

Stormkit ​

Nginx ​

VitePressサイトのデプロイ

ローカルでのビルドとテスト

パブリックベースパスの設定

HTTPキャッシュヘッダー

プラットフォームガイド

Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render

GitHub Pages

GitLab Pages

Azure Static Web Apps

Firebase

サージ

Heroku

Edgio

Kinsta Static Site Hosting

Stormkit

Nginx