SvelteKitをCloudflare Pagesにデプロイした話

SvelteKitで作ったTODOアプリを実際に公開するため、Cloudflare Pages へのデプロイ設定を行いました。 アダプターの役割と環境変数の扱いを中心に整理します。

このシリーズの記事

1. SvelteKitで記事一覧・詳細ページを作った話
2. SvelteKitでTODOアプリを作った話
3. SvelteKitで認証・セッション管理を実装した話
4. SvelteKitをCloudflare Pagesにデプロイした話（この記事）

アダプターとは

SvelteKitはビルド時に「どの環境で動かすか」を知る必要があります。アダプターはSvelteKitアプリを各プラットフォームが理解できる形式に変換する役割を担います。

SvelteKitアプリ
      ↓
  アダプター（変換）
      ↓
各プラットフォームが理解できる形式

各プラットフォームはサーバーの起動方法やリクエストの受け取り方が異なるため、+page.server.ts や +server.ts の処理をアダプターが変換します。

主なアダプター

adapter-auto はVercel・Cloudflare・Netliteなどの環境変数を見て自動判断しますが、ローカルではNode.jsにフォールバックします。本番では専用アダプターを明示することでビルドの挙動が確実になります。

アダプターの設定

npm install -D @sveltejs/adapter-cloudflare

svelte.config.js でアダプターを切り替えます：

import adapter from '@sveltejs/adapter-cloudflare';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  compilerOptions: {
    runes: ({ filename }) => (filename.split(/[/\\]/).includes('node_modules') ? undefined : true)
  },
  kit: {
    adapter: adapter()
  }
};

export default config;

adapter-auto から adapter-cloudflare に変えるだけです。

環境変数の扱い

コードにパスワードを直書きしていた部分を環境変数に切り出します。

.env ファイル

SECRET_PASSWORD=1234

SvelteKitの環境変数モジュール

SvelteKitでは環境変数を用途に応じて使い分けます：

$env/static/private からインポートするだけで、クライアントへの漏洩をSvelteKitが防いでくれます。

// src/routes/login/+page.server.ts
import { redirect } from '@sveltejs/kit';
import { SECRET_PASSWORD } from '$env/static/private';
import type { Actions } from './$types';

export const actions: Actions = {
  default: async ({ request, cookies }) => {
    const data = await request.formData();
    const password = data.get('password') as string;

    if (password === SECRET_PASSWORD) {
      cookies.set('session_id', 'logged-in', {
        path: '/',
        httpOnly: true,
        maxAge: 60 * 60 * 24,
      });
      redirect(303, '/todo');
    }
  },
};

ビルドと確認

# 本番用ビルド
npm run build

# ビルド結果をローカルで確認
npm run preview

npm run preview は http://localhost:4173 で本番ビルドをそのまま動かします。デプロイ前の最終確認に使います。

Cloudflare Pages へのデプロイ手順

1. プロジェクトを GitHub にプッシュ
2. Cloudflare Pages ダッシュボードで「新しいプロジェクト」→ GitHub リポジトリを選択
3. ビルド設定を入力：
   • ビルドコマンド：npm run build
   • 出力ディレクトリ：.svelte-kit/cloudflare
4. 環境変数 SECRET_PASSWORD をCloudflareのダッシュボードで設定

.env ファイルはGitにコミットしないようにします。.gitignore に .env が含まれていることを確認してください。

実際のデプロイ手順と躓いたポイントは別記事にまとめています。

👉 SvelteKitアプリをGitHubからCloudflare Workersにデプロイした話

まとめ

アダプターを切り替えるだけでデプロイ先を変えられるのがSvelteKitの特徴のひとつです。開発中は adapter-auto のまま進め、デプロイ先が決まったタイミングで専用アダプターに切り替えるのが効率的です。

前の記事：SvelteKitで認証・セッション管理を実装した話