slidev-deployment

Slidev プレゼンテーションのデプロイ

このスキルでは、Slidev プレゼンテーションを静的ウェブサイトとしてさまざまなホスティングプラットフォームにデプロイし、オンラインでアクセスできるようにする方法を説明します。

このスキルを使う場面

• URL でプレゼンテーションを共有する
• カンファレンスやイベント向けにホスティングする
• プレゼンテーションの恒久的なアーカイブを作成する
• プレゼンテーション用の CI/CD を設定する
• プレゼンテーションをウェブサイトに埋め込む

本番環境向けのビルド

ビルドコマンド

npx slidev build

または npm スクリプトを使用します：

npm run build

出力

次の内容を含む dist/ ディレクトリが作成されます：

• index.html
• JavaScript バンドル
• CSS ファイル
• アセットファイル

ビルドオプション

# Custom output directory
npx slidev build --out public

# With base path (for subdirectories)
npx slidev build --base /presentations/my-talk/

# Enable PDF download
npx slidev build --download

# Exclude presenter notes (security)
npx slidev build --without-notes

GitHub Pages

方法 1：GitHub Actions（推奨）

1. GitHub Pages を有効にする：

   • Settings → Pages に移動します
   • ソース：GitHub Actions

2. ワークフローファイル .github/workflows/deploy.yml を作成します：

name: Deploy Slidev

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build -- --base /${{ github.event.repository.name }}/

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: dist

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

3. プッシュしてデプロイを開始します

4. 次の URL からアクセスします：https://<username>.github.io/<repo>/

方法 2：gh-pages ブランチ

npm install -D gh-pages

package.json に追加します：

{
  "scripts": {
    "deploy": "slidev build --base /repo-name/ && gh-pages -d dist"
  }
}

続いて：

npm run deploy

Netlify

方法 1：Netlify UI

1. コードを GitHub/GitLab にプッシュします
2. Netlify ダッシュボードでリポジトリを接続します
3. 次のように設定します：
   • ビルドコマンド：npm run build
   • 公開ディレクトリ：dist

方法 2：netlify.toml

netlify.toml を作成します：

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

プッシュすると、Netlify が自動的にデプロイします。

カスタムドメイン

Netlify ダッシュボードで次の操作を行います：

1. ドメイン設定を開きます
2. カスタムドメインを追加します
3. DNS を設定します

Vercel

方法 1：Vercel CLI

npm install -g vercel
vercel

方法 2：vercel.json

vercel.json を作成します：

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": null,
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

自動デプロイ

1. Vercel ダッシュボードでプロジェクトをインポートします
2. GitHub リポジトリを接続します
3. Vercel が自動的に検出してデプロイします

Cloudflare Pages

セットアップ

1. Cloudflare Pages でリポジトリを接続します
2. 次のように設定します：
   • ビルドコマンド：npm run build
   • 出力ディレクトリ：dist
3. デプロイします

wrangler.toml（任意）

name = "my-presentation"
compatibility_date = "2024-01-01"

[site]
bucket = "./dist"

Docker

Dockerfile

FROM node:20-alpine as builder

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

ビルドと実行

docker build -t my-presentation .
docker run -p 8080:80 my-presentation

Docker Compose

version: '3.8'
services:
  presentation:
    build: .
    ports:
      - "8080:80"
    restart: unless-stopped

セルフホスト（静的サーバー）

serve を使用する

npm install -g serve
npm run build
serve dist

http-server を使用する

npm install -g http-server
npm run build
http-server dist

Python を使用する

npm run build
cd dist
python -m http.server 8080

ベースパスの設定

サブディレクトリの場合

https://example.com/slides/ でホスティングする場合：

npx slidev build --base /slides/

または frontmatter に記述します：

---
base: /slides/
---

ルートパスの場合

ルートの https://example.com/ でホスティングする場合：

npx slidev build --base /

セキュリティ上の考慮事項

発表者ノートを除外する

npx slidev build --without-notes

ビルドしたバージョンから発表者ノートを削除します。

パスワード保護

非公開のプレゼンテーションの場合：

Netlify： Netlify Identity またはパスワード保護機能を使用します。

Vercel： Vercel Authentication を使用します。

カスタム設定： サーバー設定に基本認証を追加します。

ビルドにリモートコントロールは含まれない

ビルドしたプレゼンテーションには、デフォルトでリモートコントロールは含まれません。

環境変数

ビルド時

.env を作成します：

VITE_API_URL=https://api.example.com

スライドでアクセスします：

<script setup>
const apiUrl = import.meta.env.VITE_API_URL
</script>

プラットフォーム固有の設定

プラットフォームのダッシュボード（Netlify、Vercel など）で設定します。

カスタムドメインの設定

DNS 設定

タイプ	名前	値
CNAME	www	platform-subdomain
A	@	Platform IP

SSL/HTTPS

ほとんどのプラットフォームでは無料の SSL が提供されます：

• Netlify：自動
• Vercel：自動
• Cloudflare：自動
• GitHub Pages：自動

CI/CD ワークフロー

GitHub Actions（全体例）

name: Build and Deploy

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install
        run: npm ci

      - name: Build
        run: npm run build

      - name: Export PDF
        run: npm run export

      - name: Upload Build
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/

      - name: Upload PDF
        uses: actions/upload-artifact@v4
        with:
          name: pdf
          path: '*.pdf'

  deploy:
    needs: build
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - name: Download Build
        uses: actions/download-artifact@v4
        with:
          name: dist
          path: dist/

      - name: Deploy to Production
        # Add your deployment step

トラブルシューティング

ビルドに失敗する

1. Node のバージョンを確認します（≥18）
2. node_modules をクリアします：rm -rf node_modules && npm install
3. スライドに構文エラーがないか確認します

アセットが読み込まれない

1. ベースパスの設定を確認します
2. アセットのパスを確認します（public/ では / を先頭に付けます）
3. 正しいベースパスで再ビルドします

フォントが見つからない

1. ウェブフォントを使用します
2. スタイルでのフォント読み込みを確認します

デプロイ後にページが真っ白になる

1. ブラウザーのコンソールでエラーを確認します
2. SPA のルーティング設定を確認します
3. ベースパスが URL と一致しているか確認します

ベストプラクティス

1. ローカルでビルドをテストする：

   npm run build && npx serve dist
   

2. CI/CD を使用する：デプロイを自動化します

3. デプロイにバージョンを付ける：git タグを使用します

4. パフォーマンスを監視する：読み込み時間を確認します

5. URL を安定させる：パスを頻繁に変更しないでください

Output Format

When deploying:

PLATFORM: [GitHub Pages | Netlify | Vercel | Docker]

BUILD COMMAND:
npm run build --base [path]

CONFIGURATION FILES:
- [config file name and content]

DEPLOYMENT URL:
https://[your-domain]/[path]/

CHECKLIST:
- [ ] Build succeeds locally
- [ ] Assets load correctly
- [ ] Base path configured
- [ ] SSL/HTTPS enabled
- [ ] (Optional) Custom domain
- [ ] (Optional) Password protection