Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

SvelteKit

最終更新 Markdown で表示Agent セットアップ

SvelteKit は、Svelte ↗ でモダンな Web アプリケーションを作る公式フレームワークです。Svelte は、ユーザーインターフェース向けのオープンソースツールとして利用が増えています。多くのフレームワークと異なり、SvelteKit はコンパイラーである Svelte を使います。コンポーネントコードを効率的な JavaScript に変換するため、アプリケーションの状態変化に合わせて DOM を局所的に更新する、高速でリアクティブなアプリを届けられます。

このガイドでは、新しい SvelteKit アプリケーションを作成し、Cloudflare Pages でデプロイします。 あらゆる規模の Web アプリケーション向けの公式 Svelte フレームワークである SvelteKit ↗ を使います。

新しいプロジェクトをセットアップする

create-cloudflare ↗ CLI（C3）で新しいプロジェクトをセットアップします。C3 は新しいプロジェクトディレクトリを作成し、SvelteKit の公式セットアップツールを起動し、すぐにデプロイするかどうかを選べます。

create-cloudflare で新しい SvelteKit プロジェクトを作成するには、次のコマンドを実行します。

npm create cloudflare@latest -- my-svelte-app --framework=svelte --platform=pages

SvelteKit はカスタマイズの選択肢を尋ねます。テンプレートは、アプリケーション／プロジェクト向けの選択肢から選びます。残りの回答はこのガイドの以降の手順には影響しません。プロジェクトに合うものを選んでください。

create-cloudflare は、Wrangler CLI と SvelteKit の @sveltejs/adapter-cloudflare adapter を含む依存関係をインストールし、セットアップの質問を表示します。

プロジェクトの依存関係をインストールしたら、アプリケーションを起動します。

npm run dev

続ける前に

すべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。

SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。

詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。

GitHub リポジトリを作成する

repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub へプッシュします。

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

SvelteKit の Cloudflare 設定

SvelteKit を Cloudflare Pages で使うには、アプリケーションに Cloudflare adapter ↗ を追加します。

  1. ターミナルで npm i --save-dev @sveltejs/adapter-cloudflare を実行し、Cloudflare Adapter をインストールします。
  2. svelte.config.js に adapter を含めます。
- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-cloudflare';

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

export default config;
  1. （TypeScript を使う場合に必要）環境変数のサポートを追加します。KV 名前空間などのストレージオブジェクトを含む env オブジェクトは、context および caches とともに platform プロパティ経由で SvelteKit に渡されます。フックとエンドポイントからアクセスできます。例:
declare namespace App {
    interface Locals {}

+   interface Platform {
+       env: {
+           COUNTER: DurableObjectNamespace;
+       };
+       context: {
+           waitUntil(promise: Promise<any>): void;
+       };
+       caches: CacheStorage & { default: Cache }
+   }

    interface Session {}

    interface Stuff {}
}
  1. 追加した KV または Durable Objects（一般には任意の バインディング）には、エンドポイントで env からアクセスします。
export async function post(context) {
	const counter = context.platform.env.COUNTER.idFromName("A");
}

Cloudflare Pages でデプロイする

create-cloudflare CLI（C3）でデプロイする

create-cloudflare（C3） ↗ で新しい Svelte プロジェクトを作成すると、C3 はプロジェクトに必要な依存関係をすべてインストールし、CLI からデプロイするかどうかを尋ねます。デプロイするとサイトが公開され、デプロイ URL が渡されます。

Cloudflare ダッシュボードからデプロイする

サイトを Pages にデプロイする手順は次のとおりです。

  1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application を選択します。

  3. Pages タブを選択します。

  4. Import an existing Git repository を選択します。

  5. 作成した新しい GitHub リポジトリを選択し、Begin setup を選択します。

  6. Build settings セクションで、Framework preset に SvelteKit を選びます。選ぶと、次の情報が表示されます。

設定項目値
本番ブランチmain
ビルドコマンドnpm run build
ビルドディレクトリ.svelte-kit/cloudflare

任意で Project name フィールドを変更できます。デフォルトは GitHub リポジトリ名ですが、一致している必要はありません。Project name の値が *.pages.dev サブドメインになります。

設定が終わったら、Save and Deploy を選びます。

最初のデプロイパイプラインが進行中であることが分かります。Pages は指定どおりに依存関係をすべてインストールし、プロジェクトをビルドします。

新しいコミットをプッシュするたびに、Cloudflare Pages は SvelteKit プロジェクトを自動で再ビルドしてデプロイします。

加えて、プレビューデプロイ も使えます。プルリクエストに対して同じビルドとデプロイを繰り返します。本番に出す前に、実際の URL で変更を確認できます。

Functions のセットアップ

SvelteKit では、関数はエンドポイントとして書きます。プロジェクトルートの /functions ディレクトリにある関数はデプロイに含まれません。デプロイは単一の _worker.js ファイルにコンパイルされます。

Pages Functions の onRequests と同等の機能にするには、SvelteKit の標準リクエストハンドラーを書きます。たとえば、次の TypeScript ファイルは onRequestGet のように振る舞います。

import type { RequestHandler } from "./$types";

export const GET = (({ url }) => {
	return new Response(String(Math.random()));
}) satisfies RequestHandler;

さらに学ぶ

このガイドを完了すると、Svelte サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。

役に立ちましたか？