VitePressサイトのデプロイ

原文

https://github.com/vuejs/vitepress/blob/3c40e9d9a8443433f49599111ee571d569de530d/docs/en/guide/deploy.md

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

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をhttp://localhost:4173で提供します。これにより、本番環境にプッシュする前に、すべてが正しく表示されていることを確認できます。
--port引数を指定してサーバーのポートを設定できます。
json
```
{
  "scripts": {
    "docs:preview": "vitepress preview docs --port 8080"
  }
}
```
これで、docs:previewメソッドはサーバーをhttp://localhost: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ファイルはpublicディレクトリに配置する必要があります。今回の例では、docs/public/_headersに配置され、出力ディレクトリにそのままコピーされます。

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

Vercelのvercel.json設定例

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
Nodeバージョン: 18（またはそれ以上）

WARNING

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

GitHub Pages

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

yaml

# VitePressサイトをGitHub Pagesにデプロイするためのサンプルワークフロー
#
name: Deploy VitePress site to Pages

on:
  # `main`ブランチにプッシュされたときに実行されます。デフォルトブランチが`master`の場合は、`master`に変更してください。
  push:
    branches: [main]

  # Actionsタブから手動でこのワークフローを実行できるようにします
  workflow_dispatch:

# GitHub Pagesへのデプロイを許可するためのGITHUB_TOKENの権限を設定します
permissions:
  contents: read
  pages: write
  id-token: write

# 同時に進行中の実行をスキップして、最後のキューに入った実行を続行します。
# ただし、進行中の実行はキャンセルせず、これらのプロダクションデプロイが完了するようにします。
concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  # ビルドジョブ
  build:
    runs-on: ubuntu-latest
    steps:
      - name: チェックアウト
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # lastUpdatedが有効でない場合は不要です
      # - uses: pnpm/action-setup@v3 # pnpmを使用している場合はこの行を有効にします
      # - uses: oven-sh/setup-bun@v1 # Bunを使用している場合はこの行を有効にします
      - name: Nodeのセットアップ
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm # またはpnpm / yarn
      - name: Pagesのセットアップ
        uses: actions/configure-pages@v4
      - name: 依存関係のインストール
        run: npm ci # またはpnpm install / yarn install / bun install
      - name: VitePressでビルド
        run: npm run docs:build # またはpnpm docs:build / yarn docs:build / bun run docs:build
      - name: アーティファクトのアップロード
        uses: actions/upload-pages-artifact@v3
        with:
          path: docs/.vitepress/dist

  # デプロイジョブ
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: デプロイ
    steps:
      - name: GitHub Pagesへのデプロイ
        id: deployment
        uses: actions/deploy-pages@v4

WARNING

VitePressのbaseオプションが適切に設定されていることを確認してください。詳細は公開ベースパスの設定を参照してください。

リポジトリの設定の「Pages」メニュー項目で、「ビルドとデプロイ > ソース」で「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で「ユニークドメインを使用」設定が有効になっている場合は、baseは不要です。

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

yaml

image: node:18
pages:
  cache:
    paths:
      - node_modules/
  script:
    # - apk add git # 小さいDockerイメージ（例：alpine）を使用していて、lastUpdatedが有効な場合はこの行を有効にします
    - 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
```

Surge

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サイトをデプロイするには、これらの手順に従ってください。

Stormkit

StormkitにVitePressプロジェクトをデプロイするには、これらの手順に従ってください。

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 / {
        # コンテンツの場所
        root /app;

        # 正確な一致 -> クリーンURLのリバース -> フォルダ -> 見つからない
        try_files $uri $uri.html $uri/ =404;

        # 存在しないページ
        error_page 404 /404.html;

        # この設定ではindex.htmlがないフォルダは403を返します
        error_page 403 /404.html;

        # キャッシュヘッダーを調整
        # assetsフォルダ内のファイルにはハッシュ付きファイル名があります
        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 ​

Surge ​

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

Surge

Heroku

Edgio

Kinsta Static Site Hosting

Stormkit

Nginx