静的アセット

runlot.json の assets が指すディレクトリにあるファイルは、デプロイ時にすべてアップロードされます。

{ "name": "my-app", "main": "src/index.ts", "assets": "public" }

ワーカーから静的アセットを提供する

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
    if (url.pathname.startsWith("/static/")) {
      return env.assets.fetch(
        new Request(new URL(url.pathname.slice("/static".length), url), request),
      );
    }
    return new Response("hello");
  },
};

パスはアセットディレクトリを基準に解決します。上の例では、/static/logo.svg は public/logo.svg ファイルを指します。

アセットファイルが自動的に優先して処理されることはありません。どのパスでアセットを提供するかは、ワーカーのコードで明示的に決めてください。こうすることで、/about のようにアセットのパスとアプリケーションのルートが重なる問題を避けられます。

アセットのみのデプロイ

main を指定せず assets だけを指定すると、すべてのリクエストを静的アセットに転送するエントリーポイントが自動的に作成されます。

{ "name": "my-site", "assets": "dist" }

同じ動作を自分で実装すると、次のようになります。

export default {
  fetch(request, env) {
    return env.assets.fetch(request);
  },
};

バンドルに含められない項目

• シンボリックリンク。 バンドルには実ファイルのみが入ります。
• プロジェクトルートの外。 "assets": "../dist" は拒否されます。
• 重複した項目。 同じパスが 2 回入っているバンドルは拒否されます。

アセットディレクトリ内の node_modules やビルドキャッシュもすべてアップロードされます。バンドルのサイズが想定より大きい場合は、まずこれらのファイルが含まれていないか確認してください。サイズの制限はバンドルのルールで確認できます。