ほとんどのフロントエンドアプリケーションでは、フレームワークを使います。Workers は、すぐに使えるコンポーネント、あらかじめ決まった構成、コミュニティサポートを備えた、多くの人気 フレームワーク をサポートします。フレームワークの利用を始めるには、フレームワーク別ガイド を参照してください。
一方、次のような場合は、サイトを一から作る方が向いていることがあります。
- 中核機能を自分で実装して学びたい。
- フレームワークが不要な、簡単なプロジェクトである。
- 外部依存を減らしてパフォーマンスを最適化したい。
- アプリケーションのあらゆる側面を完全に制御したい。
- 自分でフレームワークを作りたい。
このガイドでは、フレームワークなしで静的サイトまたはフルスタックアプリケーションをセットアップし、Workers にデプロイする手順を説明します。
このガイドでは、Workers 上で静的サイトをセットアップしてデプロイする手順を説明します。
C3（create-cloudflare-cli） ↗ は、Cloudflare 向けの新しいアプリケーションのセットアップとデプロイを助けるコマンドラインツールです。ターミナルを開き、C3 を実行して Worker プロジェクトを作成します。
npm create cloudflare@latest -- my-static-siteyarn create cloudflare my-static-sitepnpm create cloudflare@latest my-static-siteセットアップでは、次のオプションを選びます。
- What would you like to start with? では、
Hello World exampleを選びます。 - Which template would you like to use? では、
Static siteを選びます。 - Which language do you want to use? では、
TypeScriptを選びます。 - Do you want to use git for version control? では、
Yesを選びます。 - Do you want to deploy your application? では、
Noを選びます（デプロイ前にいくつか変更します）。
プロジェクトのセットアップ後、次のコマンドでディレクトリを切り替えます。
cd my-static-siteWorker を作成したら、プロジェクトディレクトリで wrangler dev を実行してローカルサーバーを起動します。開発中にプロジェクトをローカルでプレビューできます。
npx wrangler devプロジェクトは、自分のマシンからも、Cloudflare 独自の CI/CD を含む任意の CI/CD システムからも、*.workers.dev サブドメインまたは カスタムドメイン にデプロイできます。
wrangler deploy は、プロジェクトをビルドしてデプロイします。CI を使う場合は、デプロイコマンド の設定を適切に更新してください。
npx wrangler deployこのガイドでは、動的で対話的なサーバーサイドレンダリング（SSR）アプリケーションを Cloudflare Workers にセットアップしてデプロイする手順を説明します。
フルスタックアプリケーションを作るときは、任意の Workers バインディング（アセット自身のバインディング を含む）を使い、Cloudflare Developer Platform 上のリソースとやり取りできます。
C3（create-cloudflare-cli） ↗ は、Cloudflare 向けの新しいアプリケーションのセットアップとデプロイを助けるコマンドラインツールです。
ターミナルを開き、C3 を実行して Worker プロジェクトを作成します。
npm create cloudflare@latest -- my-dynamic-siteyarn create cloudflare my-dynamic-sitepnpm create cloudflare@latest my-dynamic-siteセットアップでは、次のオプションを選びます。
- What would you like to start with? では、
Hello World exampleを選びます。 - Which template would you like to use? では、
SSR / full-stack appを選びます。 - Which language do you want to use? では、
TypeScriptを選びます。 - Do you want to use git for version control? では、
Yesを選びます。 - Do you want to deploy your application? では、
Noを選びます（デプロイ前にいくつか変更します）。
プロジェクトのセットアップ後、次のコマンドでディレクトリを切り替えます。
cd my-dynamic-siteWorker を作成したら、プロジェクトディレクトリで wrangler dev を実行してローカルサーバーを起動します。開発中にプロジェクトをローカルでプレビューできます。
npx wrangler dev生成されたプロジェクトが動いている状態で、プロジェクトの編集を始められます。
src/index.tsファイルにはサンプルコードが入っています。内容を変更すると、Worker のサーバー側の動作が変わります。public/index.htmlファイルにはサンプルコードが入っています。この内容、またはpublic/内のほかのファイルを変更すると、Worker の静的アセットが変わります。
ファイルを保存してページを再読み込みします。変更内容に応じて、プロジェクトの出力が変わります。
プロジェクトは、自分のマシンからも、Cloudflare 独自の CI/CD を含む任意の CI/CD システムからも、*.workers.dev サブドメインまたは カスタムドメイン にデプロイできます。
wrangler deploy は、プロジェクトをビルドしてデプロイします。CI を使う場合は、デプロイコマンド の設定を適切に更新してください。
npx wrangler deploy