SvelteKit

Svelte ↗は、ユーザーインターフェースやWebアプリケーションを構築するための、ますます人気のあるオープンソースのフレームワークです。ほとんどのフレームワークとは異なり、Svelteは主にコンパイラであり、コンポーネントコードを効率的なJavaScriptに変換し、アプリケーションの状態が変化したときにDOMを外科的に更新します。

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

新しいプロジェクトの設定

create-cloudflare ↗ CLI (C3)を使用して新しいプロジェクトを設定します。C3は新しいプロジェクトディレクトリを作成し、Svelteの公式セットアップツールを開始し、即座にデプロイするオプションを提供します。

create-cloudflareを使用して新しいSvelteプロジェクトを作成するには、次のコマンドを実行します：

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

yarn create cloudflare@latest my-svelte-app --framework=svelte

pnpm create cloudflare@latest my-svelte-app --framework=svelte

SvelteKitはカスタマイズの選択肢を求めます。テンプレートオプションでは、アプリケーション/プロジェクトオプションのいずれかを選択します。残りの回答は、このガイドの残りの部分には影響しません。プロジェクトに適したオプションを選択してください。

create-cloudflareは、その後、Wrangler CLIや@sveltejs/adapter-cloudflareアダプターを含む依存関係をインストールし、設定に関する質問をします。

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

npm run dev

Before you continue

All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.

Create a GitHub repository

Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:

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アダプター ↗を追加する必要があります。

ターミナルでnpm i --save-dev @sveltejs/adapter-cloudflareを実行してCloudflareアダプターをインストールします。
svelte.config.jsにアダプターを含めます：

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

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

export default config;

(TypeScriptを使用している場合に必要) 環境変数のサポートを含めます。KV名前空間やその他のストレージオブジェクトを含むenvオブジェクトは、プラットフォームプロパティを介して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 {}
}

エンドポイントでenvを使用して追加されたKVまたはDurableオブジェクト（または一般的に任意のバインディング）にアクセスします：

export async function post(context) {
  const counter = context.platform.env.COUNTER.idFromName("A");
}

Cloudflareアダプターに加えて、プロジェクトで使用できる他のアダプターを確認してください：

@sveltejs/adapter-auto ↗

SvelteKitのデフォルトアダプターは、現在の環境に適したアダプターを自動的に選択します。このアダプターを使用する場合、設定は不要です ↗。ただし、デフォルトアダプターは、アプリケーションがデプロイされるプラットフォームを知る方法がないため、ローカル開発にいくつかの不利な点をもたらします。

この問題を解決するために、SvelteKitにCF_PAGES変数を提供して、アダプターがPagesプラットフォームを検出できるようにします。例えば、アプリケーションをローカルでビルドする際には：CF_PAGES=1 vite build。

@sveltejs/adapter-static ↗ クライアントサイドの静的アセットのみを生成し（サーバーサイドレンダリングなし）、Cloudflare Pagesと互換性があります。アダプターの設定方法については、公式SvelteKitドキュメント ↗を確認してください。このアダプターを使用することに決めた場合、ビルドディレクトリは.svelte-kit/cloudflareではなくbuildになります。また、Cloudflare Pagesアプリケーションのビルドディレクトリをそれに応じて設定する必要があります。

Cloudflare Pagesでデプロイ

Deploy via the `create-cloudflare` CLI (C3)

If you use create-cloudflare(C3) ↗ to create your new Svelte project, C3 will install all dependencies needed for your project and prompt you to deploy your project via the CLI. If you deploy, your site will be live and you will be provided with a deployment URL.

Cloudflareダッシュボード経由でデプロイ

Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
アカウントホームで、Workers & Pages > アプリケーションを作成 > Pages > Gitに接続を選択します。

まだ行っていない場合は、GitHubアカウントへのアクセスを承認するよう求められます。Cloudflareは、GitHubアカウントからプロジェクトをデプロイするためにこの承認が必要です。Cloudflareのアクセスを特定のリポジトリに絞ることができます。ただし、Cloudflare Pagesに追加のリポジトリを追加したい場合は、手動でこのリストをGitHub設定 ↗内で更新する必要があります。

作成した新しいGitHubリポジトリを選択し、ビルドとデプロイの設定で次の情報を提供します：

Configuration option	Value
Production branch	`main`
Build command	`npm run build`
Build directory	`.svelte-kit/cloudflare`

オプションで、プロジェクト名フィールドをカスタマイズできます。デフォルトではGitHubリポジトリの名前が使用されますが、一致する必要はありません。プロジェクト名の値は、*.pages.devサブドメインとして割り当てられます。

設定が完了したら、保存してデプロイボタンをクリックします。

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

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

さらに、プルリクエストのためにビルドとデプロイのプロセスを繰り返すプレビュー展開にアクセスできます。これにより、プロダクションにデプロイする前に、実際のURLでプロジェクトの変更をプレビューできます。

関数の設定

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;

Learn more

By completing this guide, you have successfully deployed your Svelte site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings