コンテンツにスキップ

直接アップロード

直接アップロードを使用すると、事前に構築したアセットを Pages にアップロードし、Cloudflare のグローバルネットワークにデプロイできます。このガイドでは、Wrangler またはドラッグアンドドロップ方式を使用してアセットをアップロードする方法を説明します。

前提条件

直接アップロードでプロジェクトをデプロイする前に、適切な ビルドコマンド を実行してプロジェクトをビルドしてください。

アップロード方法

事前に構築したアセットの準備ができたら、アップロードを開始する方法は2つあります：

サポートされているファイルタイプ

以下は、各直接アップロードオプションのサポートされているファイルタイプです：

  • Wrangler: アセットの単一フォルダー。（Zipファイルはサポートされていません。）
  • ドラッグアンドドロップ: Zipファイルまたはアセットの単一フォルダー。

Wrangler CLI

Wranglerのセットアップ

まず、npm ↗ をインストールします。次に、Wrangler、開発者プラットフォーム CLI をインストールします。

プロジェクトの作成

wrangler login コマンド を使用して Wrangler にログインします。次に、pages project create コマンド を実行します：

Terminal window
npx wrangler pages project create

プロジェクト名を指定するように求められます。あなたのプロジェクトは <PROJECT_NAME>.pages.dev で提供されます（または、プロジェクト名がすでに使用されている場合は、プロジェクト名にいくつかのランダムな文字が追加されます）。また、プロダクションブランチを指定するように求められます。

その後のデプロイメントでは、これらの値（node_modules/.cache/wrangler フォルダーに保存されます）を再利用します。

アセットのデプロイ

ここから、空のプロジェクトを作成し、最初のデプロイメントおよびすべての後続のデプロイメントのためにアセットをデプロイできます。これを行うには、wrangler pages deploy コマンドを実行します：

Terminal window
npx wrangler pages deploy <BUILD_OUTPUT_DIRECTORY>

プロジェクトに適切なビルド出力ディレクトリを見つけるには、フレームワークプリセットの下のビルドディレクトリ を参照してください。

あなたのプロダクションデプロイメントは <PROJECT_NAME>.pages.dev で利用可能になります。

プレビュー環境にアセットをデプロイするには、次のコマンドを実行します：

Terminal window
npx wrangler pages deploy <OUTPUT_DIRECTORY> --branch=<BRANCH_NAME>

作成するすべてのブランチに対して、ブランチエイリアスが <BRANCH_NAME>.<PROJECT_NAME>.pages.dev で利用可能になります。

プロジェクトの作成とアセットのデプロイ手順を簡素化したい場合は、デプロイコマンドを使用してアセットを同時に作成およびデプロイすることもできます。このコマンドを最初に実行すると、プロジェクト名とプロダクションブランチを指定するように求められます。これらの値は、上記のように後続のデプロイメントのためにキャッシュされます。キャッシュがすでに存在し、新しいプロジェクトを作成したい場合は、create コマンド を実行する必要があります。

その他の便利なコマンド

Wrangler を使用して直接アップロードのために利用可能なすべてのプロジェクトのリストを取得したい場合は、pages project list を使用します：

Terminal window
npx wrangler pages project list

特定のプロジェクトのすべてのユニークなプレビュ URL のリストを取得したい場合は、pages deployment list を使用します：

Terminal window
npx wrangler pages deployment list

Wrangler と GitHub Actions、Circle CI、Travis CI などの継続的インテグレーションツールを一緒に使用して継続的デプロイを行う方法については、継続的インテグレーションで直接アップロードを使用する を参照してください。

ドラッグアンドドロップ

ドラッグアンドドロップでプロジェクトをデプロイ

ドラッグアンドドロップでデプロイするには：

  1. Cloudflare ダッシュボード ↗ にログインします。
  2. アカウントホーム で、アカウントを選択 > Workers & Pages。
  3. アプリケーションを作成 > Pages > アセットをアップロード を選択します。
  4. 提供されたフィールドにプロジェクト名を入力し、アセットをドラッグアンドドロップします。
  5. デプロイ を選択します。

あなたのプロジェクトは <PROJECT_NAME>.pages.dev から提供されます。次に、ビルド出力ディレクトリをアップロードフレームにドラッグアンドドロップします。ファイルが正常にアップロードされたら、保存してデプロイ を選択し、新しくデプロイされたプロジェクトに進みます。

新しいデプロイメントの作成

プロジェクトを作成した後、新しいデプロイメントを作成 を選択してサイトの新しいバージョンを開始します。次に、新しいデプロイメントがプロダクション環境またはプレビュー環境に作成されるかを選択します。プレビューを選択した場合、新しいデプロイメントブランチを作成するか、既存のものを入力できます。

トラブルシューティング

制限

アップロード方法ファイル制限ファイルサイズ
Wrangler20,000ファイル25 MiB
ドラッグアンドドロップ1,000ファイル25 MiB

ドラッグアンドドロップ方式を使用している場合、ファイルが大きすぎてアップロードに失敗した場合、アセットの横に赤い警告シンボルが表示されます。この場合、そのアセットを削除することはできますが、置き換えることはできません。置き換えるには、プロジェクト全体を再アップロードする必要があります。

プロダクションブランチの設定

If your project is a Direct Upload project, you will not have the option to configure production branch controls. To update your production branch, you will need to manually call the Update Project endpoint in the API.

Terminal window
curl --request PATCH \
"https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}" \
--header "Authorization: Bearer <API_TOKEN>" \
--header "Content-Type: application/json" \
--data "{\"production_branch\": \"main\"}"

関数

Cloudflare ダッシュボードから行われたドラッグアンドドロップデプロイメントは、現在 functions フォルダーの Pages Functions をコンパイルすることをサポートしていません。functions フォルダーをデプロイするには、Wrangler を使用する必要があります。Wrangler を使用してプロジェクトをデプロイする際、コマンドが実行される場所に functions フォルダーが存在する場合、その functions フォルダーがプロジェクトと共にアップロードされます。

ただし、_worker.js ファイルは、Wrangler とダッシュボードからのドラッグアンドドロップデプロイメントの両方でサポートされています。

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings