Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Vue

最終更新 Markdown で表示Agent セットアップ

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

1. 新しいプロジェクトを用意する

create-cloudflare ↗ CLI（C3）で新しいプロジェクトを用意します。C3 は新しいプロジェクトディレクトリを作成し、公式の Vue テンプレートのコードを使い、すぐにデプロイする選択肢も提示します。

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

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

このプロジェクトの構成は？

以下は、プロジェクトの簡略化したファイルツリーです。

  • my-vue-app
    • src/
      • App.vue
    • server/
      • index.ts
    • index.html
    • vite.config.ts
    • wrangler.jsonc

wrangler.jsonc は Wrangler 設定ファイル です。 このファイルでは次のように設定されています。

  • main は server/index.ts を指します。これが Worker で、バックエンド API として動きます。
  • assets.not_found_handling は single-page-application です。Vue SPA が処理するルートは Worker に送られないため、課金対象になりません。
  • Cloudflare の開発者向けプラットフォーム上のリソースへの bindings を追加する場合は、ここで設定します。詳しくは bindings を参照してください。

vite.config.ts は Cloudflare Vite plugin を使うように設定されています。Worker を Cloudflare Workers ランタイムで実行し、ローカル開発環境を本番に近づけます。

server/index.ts はバックエンド API です。テキストを返すエンドポイント /api/ が 1 つあります。 src/App.vue では、Vue アプリがこのエンドポイントを呼び出してメッセージを取得し、表示します。

2. Cloudflare Vite plugin でローカル開発する

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

npm run dev

ローカル開発では何が起きているか

このプロジェクトは、ローカル開発とビルドに Vite を使うため、ホットモジュールリプレースメント（HMR）を含む Vite の機能をすべて使えます。加えて、vite.config.ts は Cloudflare Vite plugin を使うように設定されています。アプリケーションは本番と同じ Cloudflare Workers ランタイムで動き、bindings のローカルエミュレーションにもアクセスできます。

3. プロジェクトをデプロイする

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

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

npm run deploy

アセットのルーティング

Vue を SPA として使う場合は、Wrangler 設定ファイルで not_found_handling = "single_page_application" を設定します。

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

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

Vue で bindings を使う

新しいプロジェクトには ./server/index.ts に Worker もあります。Vue アプリケーションのバックエンド API として使えます。Vue アプリケーションから Workers の bindings に直接アクセスすることはできませんが、この Worker 経由で利用できます。Vue アプリケーションから Worker へ fetch() リクエスト を送り、Worker 側でリクエストを処理して bindings を使えます。

バインディングを使うと、アプリケーションを Cloudflare Developer Platform と完全に統合でき、コンピュート、ストレージ、AI などへアクセスできます。

役に立ちましたか？