Posted inDevelopment

SvelteKitをCloudflare Pagesにデプロイ：コスト$0で「超高速」なフルスタックWebアプリを構築

Development tutorial - IT technology blog
Development tutorial - IT technology blog

なぜNext.jsではなくSvelteKitとCloudflare Pagesを選ぶのか？

半年間、ランディングページからダッシュボードまで様々なプロジェクトを経験する中で、Next.jsは軽量なニーズに対しては少しオーバースペックだと感じるようになりました。そこで、SvelteKitは非常に価値のある代替案となります。SvelteはVirtual DOM（仮想DOM）を使用せず、ビルド時にコードをコンパイルするため、バンドルサイズを大幅に削減できます。基本的なSvelteKitアプリのサイズはわずか15-20KB程度ですが、React/Next.jsでは通常70KBを超えます。

Cloudflare Pagesと組み合わせることで、グローバルなエッジコンピューティング（Edge Computing）インフラ上で動作するフルスタックアプリを手に入れることができます。このシステムはSSR（サーバーサイドレンダリング）をスムーズにサポートしており、小中規模のプロジェクトであればほぼ無料で利用可能です。実際の経験では、Cloudflare上のSvelteKitのレスポンス速度（TTFB）は、従来のホスティングと比較して30-40%高速化しました。

知っておくべき2つの重要な概念

1. SvelteKit Adapter

SvelteKitは、各サーバー環境に適応するために「Adapter」という仕組みを利用します。Cloudflare Pagesで動作させるには、@sveltejs/adapter-cloudflareが必要です。このツールは、コードをCloudflare Workersに変換し、ユーザーに最も近いネットワークノードで実行させます。

2. SSR tại Edge (Edge Functions)

通常、SSRには24時間稼働する Node.jsサーバーが必要です。しかしCloudflareでは、バックエンドのロジック（APIクエリやデータロードなど）がエッジインフラ上で直接実行されます。これにより、サーバーとユーザー間の物理的な距離による遅延が解消されます。

実践的なデプロイ手順

ステップ1：プロジェクトの初期化

ターミナルを開き、新しいプロジェクトを作成します。コード構造を整理しやすく、最初からコントロールしやすいSkeletonプロジェクトを選択することをお勧めします。

npm create svelte@latest my-awesome-app
cd my-awesome-app
npm install

TypeScriptを選択して、コードをクリーンに保ち、些細なエラーを防ぎましょう。ローカルで動作を確認するには、以下のコマンドを実行します：

npm run dev -- --open

ステップ2：Cloudflare Adapterのインストール

デフォルトではSvelteKitはadapter-autoを使用しますが、最適化のためにCloudflare専用版に切り替えます：

npm i -D @sveltejs/adapter-cloudflare

次に、svelte.config.jsファイルを以下のように更新します：

import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter()
	}
};

export default config;

ステップ3：最初のAPIエンドポイントを作成

SvelteKitではフロントエンドとバックエンドを並行して記述できます。SSR機能をテストするために、src/routes/api/hello/+server.tsファイルを作成してみましょう：

import { json } from '@sveltejs/kit';

export const GET = async () => {
    return json({
        message: "SvelteKit on Cloudflareへようこそ！",
        timestamp: new Date().toISOString()
    });
};

複雑なJSON構造を確認する必要がある場合は、toolcraft.appを使用して素早くフォーマットできます。ブラウザ拡張機能をインストールする必要がないため、非常に便利です。

ステップ4：Cloudflare Pagesへのデプロイ

GitHub経由のデプロイプロセスは非常にシンプルです。以下の5つのステップで行います：

  1. 個人のGitHubリポジトリにコードをプッシュします。
  2. Cloudflareのダッシュボードで、Workers & Pages > Create application > Pages に移動します。
  3. GitHubアカウントを連携し、対象のリポジトリを選択します。
  4. Build settings で、Framework presetとして SvelteKit を選択します。その他の設定値はCloudflareが自動的に正しく入力してくれます。
  5. Save and Deploy をクリックします。

わずか60〜90秒ほどで、アプリは無料の .pages.dev ドメインでオンラインになります。

バグを回避するための重要な注意点

非常に優れた環境ですが、Cloudflare Pagesには特有の制限があるため注意が必要です：

  • Node.js APIの制限： CloudflareのV8アイソレート環境は fs や path をサポートしていません。Web標準（Web Standards）のライブラリを優先して使用してください。
  • 環境変数の管理： APIキーをローカルの .env ファイルに置くだけでは不十分です。Cloudflareのダッシュボード（Settings > Functions > Environment variables）で宣言する必要があります。
  • 無料プランの制限： 各Workerのスクリプトは圧縮後1MBを超えてはいけません。通常のSvelteKitアプリであれば十分な余裕がありますが、バックエンドに重いライブラリを大量に組み込む場合は注意が必要です。

最後に

SvelteKitとCloudflare Pagesは、速さ、簡潔さ、効率性を求める人にとって完璧な組み合わせです。重量級のフレームワークからSvelteKitへの移行は、最初は少し戸惑うかもしれません。しかし、Lighthouseのパフォーマンススコアで100点満点を達成したとき、その努力が報われることを実感するはずです。ぜひ、次のプロジェクトでデプロイを試してみてください！

Share:
Tags: