SvelteKitビルドとデプロイ

Cloudflare Workers

Cloudflare Workers にデプロイするには、adapter-cloudflare-workers を使用してください。

adapter-cloudflare-workers を使用する特別な理由がない限り、代わりに adapter-cloudflare を使用することをお勧めします。どちらのアダプターも同等の機能を備えていますが、Cloudflare Pages は、GitHub との統合による自動ビルドとデプロイ、プレビューデプロイ、インスタントロールバックなどの機能を提供しています。

使用方法

npm i -D @sveltejs/adapter-cloudflare-workers でインストールし、svelte.config.js にアダプターを追加します。

svelte.config

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

export default {
	kit: {
    adapter: any;
}kit: {
		adapter: anyadapter: import adapteradapter({
			config: stringconfig: 'wrangler.toml',
			platformProxy: {
    configPath: string;
    environment: undefined;
    experimentalJsonConfig: boolean;
    persist: boolean;
}platformProxy: {
				configPath: stringconfigPath: 'wrangler.toml',
				environment: undefinedenvironment: var undefinedundefined,
				experimentalJsonConfig: booleanexperimentalJsonConfig: false,
				persist: booleanpersist: false
			}
		})
	}
};

オプション

config

カスタム wrangler.toml 設定ファイルへのパス。

platformProxy

エミュレートされた platform.env ローカルバインディングの設定。オプションの完全なリストについては、getPlatformProxy Wrangler API ドキュメントを参照してください。

基本設定

このアダプターは、プロジェクトルートに wrangler.toml ファイルがあることを想定しています。以下のような内容になります。

wrangler

name = "<your-service-name>"
account_id = "<your-account-id>"

main = "./.cloudflare/worker.js"
site.bucket = "./.cloudflare/public"

build.command = "npm run build"

compatibility_date = "2021-11-12"
workers_dev = true

<your-service-name> は任意の値を指定できます。 <your-account-id> は、Cloudflare ダッシュボードにログインし、URL の末尾から取得できます。

https://dash.cloudflare.com/<your-account-id>

.cloudflare ディレクトリ (または main と site.bucket に指定したディレクトリ) を .gitignore に追加する必要があります。

まだインストールしていない場合は、wrangler をインストールしてログインする必要があります。

npm i -g wrangler
wrangler login

その後、アプリケーションをビルドしてデプロイできます。

wrangler deploy

カスタム設定

wrangler.toml 以外の設定ファイルを使用する場合は、config オプションを使用して指定できます。

Node.js 互換性を有効にする場合は、wrangler.toml に "nodejs_compat" フラグを追加できます。

wrangler

compatibility_flags = [ "nodejs_compat" ]

ランタイム API

env オブジェクトには、プロジェクトのバインディング (KV/DO 名前空間など) が含まれています。これは platform プロパティを介して SvelteKit に渡され、context、caches、cf と 함께 전달되어 후크 및 엔드포인트에서 액세스할 수 있음을 의미합니다.

export async function function POST({ request, platform }: {
    request: any;
    platform: any;
}): Promise<void>POST({ request, platform }) {

	const const x: anyx = platform: anyplatform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}

環境変数には、SvelteKit の組み込み $env モジュールを使用することをお勧めします。

バインディングの型宣言を含めるには、src/app.d.ts で参照します。

src/app.d

import { interface KVNamespace<Key extends string = string>KVNamespace, interface DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace } from '@cloudflare/workers-types';

declare global {
	namespace App {
		interface interface App.PlatformIf your adapter provides platform-specific context via event.platform, you can specify it here.
Platform {
			App.Platform.env?: {
    YOUR_KV_NAMESPACE: KVNamespace;
    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
} | undefinedenv?: {
				type YOUR_KV_NAMESPACE: KVNamespace<string>YOUR_KV_NAMESPACE: interface KVNamespace<Key extends string = string>KVNamespace;
				type YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace<undefined>YOUR_DURABLE_OBJECT_NAMESPACE: interface DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace;
			};
		}
	}
}

export {};

ローカルでのテスト

platform プロパティの Cloudflare Workers 固有の値は、開発モードとプレビューモードでエミュレートされます。ローカルバインディングは、wrangler.toml ファイルの設定に基づいて作成され、開発とプレビュー中に platform.env にデータを入力するために使用されます。アダプター設定の platformProxy オプションを使用して、バインディングの設定を変更します。

ビルドをテストするには、wrangler **バージョン 3** を使用する必要があります。サイトをビルドしたら、wrangler dev を実行します。

トラブルシューティング

ワーカーのサイズ制限

ワーカーにデプロイする場合、SvelteKit によって生成されたサーバーは単一のファイルにバンドルされます。縮小後にサイズ制限を超えると、Wrangler はワーカーの公開に失敗します。通常はこの制限に達することはありませんが、一部の大規模なライブラリが原因で発生する可能性があります。その場合は、クライアント側でのみそのようなライブラリをインポートすることで、ワーカーのサイズを縮小してみてください。詳細については、FAQ を参照してください。

ファイルシステムへのアクセス

Cloudflare Workers では fs を使用できません。該当するルートをプリレンダリングする必要があります。

GitHub でこのページを編集

前へ次へ

Cloudflare Pages Netlify