Skip to content

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

Direct Upload

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

Direct Upload を使うと、ビルド済みアセットを Pages にアップロードし、Cloudflare のグローバルネットワークへデプロイできます。独自のビルド基盤を連携 したい場合や、手元のコンピューターからアップロードしたい場合は、Git 連携より Direct Upload を選んでください。

このガイドでは、Wrangler またはドラッグアンドドロップでアセットをアップロードする手順を説明します。

前提条件

Direct Upload でプロジェクトをデプロイする前に、適切な ビルドコマンド を実行してプロジェクトをビルドします。

アップロード方法

ビルド済みアセットの準備ができたら、次の 2 通りでアップロードを開始できます。

対応しているファイル種別

Direct Upload の各方法で対応しているファイル種別は次のとおりです。

  • Wrangler: アセットのフォルダー 1 つ。（Zip ファイルは非対応です。）
  • ドラッグアンドドロップ: Zip ファイル、またはアセットのフォルダー 1 つ。

Wrangler CLI

Wrangler をセットアップする

まず npm ↗ をインストールします。次に Developer Platform CLI の Wrangler をインストール します。

プロジェクトを作成する

wrangler login コマンド で Wrangler にログインします。次に pages project create コマンド を実行します。

npx wrangler pages project create

プロジェクト名の指定を求められます。プロジェクトは <PROJECT_NAME>.pages.dev で配信されます（名前が既に使われている場合は、プロジェクト名にランダムな文字が付きます）。本番ブランチの指定も求められます。

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

アセットをデプロイする

ここまでで空のプロジェクトができています。本番環境の初回デプロイと、以降のすべてのデプロイでアセットをデプロイできます。次の wrangler pages deploy コマンドを実行します。

npx wrangler pages deploy <BUILD_OUTPUT_DIRECTORY>

プロジェクトに合うビルド出力ディレクトリは、Framework presets の Build directory で確認できます。

本番デプロイは <PROJECT_NAME>.pages.dev で利用できます。

プレビュー環境へアセットをデプロイするには、次を実行します。

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

作成したブランチごとに、<BRANCH_NAME>.<PROJECT_NAME>.pages.dev でブランチエイリアスが使えます。

プロジェクト作成とアセットデプロイをまとめて行うには、deploy コマンドで作成とデプロイを同時に実行できます。このコマンドを先に実行した場合も、プロジェクト名と本番ブランチの指定を求められます。これらの値は、上記のとおり以降のデプロイ向けにキャッシュされます。キャッシュが既にあり、新しいプロジェクトを作成したい場合は create コマンド を実行する必要があります。

その他の便利なコマンド

Wrangler で Direct Upload 向けの利用可能なプロジェクト一覧を取得するには、pages project list を使います。

npx wrangler pages project list

プログラムやスクリプト向けに JSON で出力するには、--json フラグを使います。

npx wrangler pages project list --json

Wrangler で特定プロジェクトの一意なプレビュー URL 一覧を取得するには、pages deployment list を使います。

npx wrangler pages deployment list

Wrangler と GitHub Actions、Circle CI、Travis CI などの継続的インテグレーションツールを組み合わせて継続的デプロイする手順は、Direct Upload を継続的インテグレーションと一緒に使う を参照してください。

ドラッグアンドドロップ

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

ドラッグアンドドロップでデプロイする手順は次のとおりです。

  1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application > Get started > Drag and drop your files を選びます。

  3. 指定の欄にプロジェクト名を入力し、アセットをドラッグアンドドロップします。

  4. Deploy site を選びます。

プロジェクトは <PROJECT_NAME>.pages.dev から配信されます。次に、ビルド出力ディレクトリをアップロード枠へドラッグアンドドロップします。ファイルのアップロードが完了したら Save and Deploy を選び、新しくデプロイしたプロジェクトへ進みます。

新しいデプロイを作成する

プロジェクトを作成したあと、Create a new deployment を選ぶとサイトの新しいバージョンを開始できます。次に、新しいデプロイを本番環境とプレビュー環境のどちらにするかを選びます。プレビューを選ぶ場合は、新しいデプロイブランチを作成するか、既存のブランチを入力できます。

トラブルシュート

制限

アップロード方法 ファイル数の上限 ファイルサイズ
Wrangler 20,000 ファイル 25 MiB
ドラッグアンドドロップ 1,000 ファイル 25 MiB

ドラッグアンドドロップを使う場合、アセットが大きすぎてアップロードに失敗すると、赤い警告記号が付きます。この場合、そのアセットを削除することはできますが、置き換えることはできません。置き換えるには、プロジェクト全体を再アップロードする必要があります。

本番ブランチの設定

プロジェクトが Direct Upload プロジェクトの場合、本番ブランチの制御を設定するオプションはありません。本番ブランチを更新するには、API の Update Project エンドポイントを手動で呼び出します。

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\"}"

Functions

Cloudflare ダッシュボードからのドラッグアンドドロップデプロイは、現在 Pages Functions の functions フォルダーのコンパイルに対応していません。functions フォルダーをデプロイするには、Wrangler を使う必要があります。Wrangler でプロジェクトをデプロイするとき、コマンドを実行した場所に functions フォルダーがあると、その functions フォルダーもプロジェクトと一緒にアップロードされます。

一方、_worker.js ファイルは Wrangler と、ダッシュボードからのドラッグアンドドロップデプロイの両方で使えます。

役に立ちましたか？