静的アセット

このガイドでは、静的アセットの扱いのうち、Vite プラグイン固有の点を説明します。 一般的な説明は 静的アセット を参照してください。

Vite プラグインでは、アセットを有効にするために assets フィールドを書く必要はありません。代わりに、client 環境がビルドされたかどうかでアセットを含めるかを決めます。デフォルトでは、次のいずれかを満たすと client 環境がビルドされます。

• プロジェクトのルートに index.html がある
• Vite の設定で build.rollupOptions.input または environments.client.build.rollupOptions.input が指定されている
• 空でない public ディレクトリ ↗ がある
• Worker が アセットを URL としてインポート ↗ している

vite build を実行すると、ビルド出力の一部として出力用の wrangler.json 設定ファイルが生成されます。 このファイルの assets.directory フィールドには、client のビルド出力パスが自動で入ります。 そのため、入力側の Worker 設定に assets.directory を書く必要はありません。

ただし、ルーティング設定 を指定する場合や、アセットバインディング を有効にする場合は、assets 設定を使います。 次の例は、シングルページアプリケーション向けに not_found_handling を設定し、フォールバックを常にルートの index.html にします。

{
	"assets": {
		"not_found_handling": "single-page-application"
	}
}

[assets]
not_found_handling = "single-page-application"

Vite プラグインは、Vite の 静的アセット処理 ↗ の機能を、フロントエンドだけでなく Worker でも使えるようにします。 URL としてのインポート、文字列としてのインポート、public ディレクトリからのインポート、アセットのインライン化が含まれます。

URL としてインポート ↗ したアセットは、アセットバインディング で取得できます。 バインディングの fetch メソッドは完全な URL を必要とするため、リクエスト URL を base にすることを推奨します。 次の例で示します。

import myImage from "./my-image.png";

export default {
	fetch(request, env) {
		return env.ASSETS.fetch(new URL(myImage, request.url));
	},
};

Worker で URL としてインポートしたアセットは、自動でクライアントのビルド出力に移されます。 vite build を実行すると、移動したアセットのパスがコンソールに表示されます。

カスタムの ヘッダー と リダイレクト は、_headers と _redirects ファイルを public ディレクトリ ↗ に置くと、ビルド、プレビュー、デプロイ時に使えます。 これらのファイル内のパスは、クライアントのビルド出力の構造に合わせてください。 たとえば、生成されたアセットは通常 assets サブディレクトリ ↗ に置かれます。