Svelte入門：リファレンス CLI -sveltekit-adapter-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景
CLIツール（sv）
sveltekit-adapterとは
おわりに

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

CLIツール（sv）

コマンドラインインターフェース（CLI）であるsvは、Svelteアプリケーションの作成と保守のためのツールキットです。

sveltekit-adapterとは

SvelteKitアダプターを使用すると、さまざまなプラットフォームにサイトをデプロイできます。このアドオンでは、公式に提供されているSvelteKitアダプターを設定できますが、コミュニティが提供する多数のアダプターも利用可能です。

使用方法

npx sv add sveltekit-adapter

導入されるもの

選択したSvelteKitアダプターがインストールされ、svelte.config.jsに設定されます

adapter

使用するSvelteKitアダプターを指定します：

auto — @sveltejs/adapter-auto 適切なアダプターを自動的に選択しますが、設定の柔軟性は低いです
node — @sveltejs/adapter-node スタンドアロンのNodeサーバーを生成します
static — @sveltejs/adapter-static SvelteKitを静的サイトジェネレーター（SSG）として使用できます
vercel — @sveltejs/adapter-vercel Vercelへのデプロイを可能にします
cloudflare — @sveltejs/adapter-cloudflare Cloudflareへのデプロイを可能にします
netlify — @sveltejs/adapter-netlify Netlifyへのデプロイを可能にします

npx sv add --sveltekit-adapter=node

解説

SvelteKitアダプターは、SvelteKitアプリケーションを異なるホスティング環境にデプロイするためのブリッジとして機能します。アダプターごとにターゲットプラットフォームに最適化された出力を生成します。

1. adapter-auto

最も簡単に始められるアダプターで、デプロイ環境を自動検出します。

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';

export default {
  kit: {
    adapter: adapter()
  }
};

2. adapter-node

Node.jsサーバーとして実行する場合に使用します。

// svelte.config.js
import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter({
      // オプション
      out: 'build',       // 出力ディレクトリ
      precompress: true,  // gzipとbrotliで事前圧縮
      envPrefix: 'APP_'   // 環境変数のプレフィックス
    })
  }
};

ビルド後、以下のように実行できます：

node build

3. adapter-static

完全な静的サイトを生成するアダプターです。

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      pages: 'build',     // HTMLページの出力先
      assets: 'build',    // アセットの出力先
      fallback: '200.html', // SPA用のフォールバックページ
      precompress: true,  // 事前圧縮
      strict: true        // 動的ルートがある場合にエラー
    })
  }
};

4. adapter-vercel

Vercelプラットフォーム用のアダプターです。

// svelte.config.js
import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter({
      // オプション
      external: [],       // 外部依存関係
      edge: false,        // Edgeランタイムを使用するかどうか
      split: false        // ルートごとに別々の関数を作成するかどうか
    })
  }
};

5. adapter-cloudflare

Cloudflare Pages用のアダプターです。

// svelte.config.js
import adapter from '@sveltejs/adapter-cloudflare';

export default {
  kit: {
    adapter: adapter({
      // オプション
      routes: {
        include: ['/*'],   // 含めるルート
        exclude: ['<all>'] // 除外するルート
      }
    })
  }
};

6. adapter-netlify

Netlify用のアダプターです。

// svelte.config.js
import adapter from '@sveltejs/adapter-netlify';

export default {
  kit: {
    adapter: adapter({
      // オプション
      edge: false,       // Edgeランタイムを使用するかどうか
      split: false       // ルートごとに別々の関数を作成するかどうか
    })
  }
};