Vue 3 を GitHub Pages へデプロイ [GitHub Actions]

• URL: https://zenn.dev/snowcait/articles/80f646e0d70495
• 日付: 2026-06-26
• Tier: Tier 3
• 要旨: Vue 3 プロジェクトを GitHub Pages にデプロイする方法として、アプリケーションとしてビルドする方式と CDN を使う方式の 2 通りがある。ビルド方式では GitHub Actions のカスタムワークフローを使い、Vite のビルドコマンドと成果物パスを指定してデプロイする。GitHub Pages のベース URL が / でない場合は Vite の Public Base Path 設定が必要で、build コマンドに –base=// を付けることで対応できる。CDN 方式では docs フォルダに HTML を直接置くだけでデプロイできるが、単一ファイルコンポーネントの構文は使えない。

詳細

ビルド方式でのデプロイ手順:

1. リポジトリ Settings > Pages で Source: GitHub Actions を選択
2. Static HTML テンプレートを Configure
3. ワークフローに npm ci && npm run build を追加
4. upload-pages-artifact の path を dist フォルダに変更

Vite のベース URL 設定（サブパスにデプロイする場合必須）:

• package.json の build コマンドを vite build –base=// に変更
• または vite.config.js で base を設定

CDN 方式:

• docs フォルダに index.html を作成して Vue を CDN から読み込む
• Settings > Pages で Source: Deploy from a branch + Branch: main /docs を設定
• 単一ファイルコンポーネント（SFC）は使用不可

使い分けの目安: アプリ規模が小さく TypeScript や SFC を使わない場合は CDN 方式が簡単。本格的なアプリはビルド方式を選ぶ。