Angular

このガイドでは、新しい Angular ↗ アプリケーションを作成し、Cloudflare Workers にデプロイします（新しい Workers Assets を使用）。

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

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

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

yarn create cloudflare my-angular-app --framework=angular

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

プロジェクトのセットアップ後、次のコマンドでディレクトリを移動します。

cd my-angular-app

プロジェクトを作成したら、プロジェクトディレクトリで次のコマンドを実行してローカルサーバーを起動します。開発中にプロジェクトをローカルでプレビューできます。

npm run start

yarn run start

pnpm run start

プロジェクトは *.workers.dev サブドメイン、または カスタムドメイン にデプロイできます。自分のマシンからでも、Cloudflare の CI/CD を含む任意の CI/CD システムからでもデプロイできます。

次のコマンドでプロジェクトをビルドしてデプロイします。CI を使う場合は、"デプロイコマンド" の設定を適切に更新してください。

npm run deploy

yarn run deploy

pnpm run deploy

デフォルトでは、Cloudflare はまずリクエストパスを静的アセットのパスと照合します。このパスは、アップロードしたアセットディレクトリのファイル構造に基づきます。対象は、Wrangler 設定の assets.directory で指定したディレクトリ、または Cloudflare Vite plugin の場合はクライアントビルドの出力ディレクトリです。一致しない場合は、Worker があれば呼び出します。Worker がない場合、または Worker がアセットバインディングを使う場合、Cloudflare は not_found_handling で設定した動作にフォールバックします。

静的アセットでのルーティングの仕組みと、この動作のカスタマイズについては、ルーティングのドキュメント を参照してください。