メインコンテンツまで移動する

Wrangler を使い Cloudflare Pages に直接アップロード

  • 公開日

Akira Web デザイナー

ビルドで生成する静的サイトの成果物を Cloudflare Pages に公開するには 3 つの方法があります。

  • Git との統合
  • Cloudflare のダッシュボードからドラッグアンドドロップでの直接アップロード（1,000 ファイルまでアップロードが可能）
  • コマンドラインで Wrangler を使用し直接アップロード（Cloudflare Pages のファイル数の制限 20,000 ファイルまでアップロードが可能）

最後の Wrangler を使って、プロジェクトの作成から直接アップロードまでを行った方法をメモとして残しておきます。公式の説明は Direct Upload で確認できます。

前提として、Cloudflare のアカウントの作成は終わっているとします。また、GitHub または GitLab でリポジトリの作成も終わっているとします。

最初にすることは、Wrangler のインストールです。

npm install wrangler --save-dev

次に、インストールした Wrangler を Cloudflare アカウントで認証します。

npx wrangler login

コマンドの実行後は、自動的にブラウザが開き Cloudflare アカウントでログインしようとします。Cloudflare にログインしていない場合は、ログインページが開きます。

ログイン後は、認証するかを確認するページが開きます。1 番下にある Allow ボタンのクリックで認証が完了し、Wrangler と Cloudflare アカウントが結びつきます。

確認ページでは「Wrangler による Cloudflare アカウントへの変更を許可するか？」と聞かれます。内容を確認後に Allow ボタンをクリックします。

認証が正常にできていれば、以下のコマンドで Cloudflare アカウントのユーザー情報を取得できます。

npx wrangler whoami

認証後は、Cloudflare Pages にプロジェクトを作成します。

npx wrangler pages project create

コマンドの実行後は、Enter the name of your new project と聞かれるためプロジェクト名を入力します。さらに、Enter the production branch name と聞かれるため、GitHub または GitLab のブランチ名（main や master など）を入力します。

この段階まで終われば、プロジェクトを作成できているはずです。作成したプロジェクトは、Cloudflare ダッシュボードのメニューにある Workers & Pages から確認できます。また、必要に応じて 独自ドメインの設定 などを Cloudflare ダッシュボードから行います。

最後に、ビルドで生成した成果物をプロジェクトにアップロードします。

npx wrangler pages deploy dist --project-name sample-name

dist には、ビルドで生成した成果物が出力されるディレクトリを入力します。プロジェクトに合わせて変更します。sample-name には、先ほど作成した Cloudflare Pages のプロジェクト名を入力します。

以前までアップロードに使っていた publish は、Wrangler のバージョン 3 から非推奨になりました。また、バージョン 4 では削除される予定です。そのため、deploy を使いアップロードします。

アップロードする前にビルドをすることになるはずですので、package.json の scripts にビルド後にアップロードするように書いておくと楽です。以下の scripts は、Astro を使っている場合に npm-run-all でコマンドを書いた例です。これで npm run deploy だけでビルドとアップロードができます。

"scripts": {
  "check": "astro check",
  "build:astro": "astro build",
  "build": "run-s check build:astro",
  "deploy:wrangler": "wrangler pages deploy dist --project-name firstlayout",
  "deploy": "run-s build deploy:wrangler"
}

Wrangler を使った直接アップロードは、差分でのアップロードです。新規のファイルや変更のあったファイルのみアップロードするため、あまり時間はかからずアップロードは終わります。

アップロードの完了後は、ターミナルに完了メッセージが表示されます。

✨ Success! Uploaded 94 files (1745 already uploaded) (6.96 sec)

✨ Uploading _headers
✨ Uploading _redirects
✨ Deployment complete! Take a peek over at https://xxxxxxxx.sample-name.pages.dev

最後の行にある URL は、プレビュー用の URL です。デプロイ毎に xxxxxxxx の部分が異なる URL が作られます。また、そのデプロイ時点のサイトの状態を確認できます。そのため、デプロイ前とデプロイ後のサイトをブラウザで比較することが可能です。過去に作られたプレビュー用の URL は、Cloudflare ダッシュボードのメニューにある Workers & Pages の「すべてのデプロイ」で確認できます。

なお、完了メッセージにある _headers は、レスポンスヘッダーを設定するためのファイルです。詳しい説明は Headers で確認できます。また、_redirects は、リダイレクトを設定するためのファイルです。詳しい説明は Redirects で確認できます。

フォローする