AstroをCloudflare Workersへデプロイする方法|Wrangler・GitHub自動公開まで

WranglerによるAstroサイトの公開、Cloudflareのメール認証エラー、workers.devの警告、GitHub自動デプロイ設定をまとめます。

公開:更新:
AstroをCloudflare Workersへデプロイする方法|Wrangler・GitHub自動公開まで

AstroをCloudflare Workersへ公開したいものの、「Wranglerで何を設定すればいいのか分からない」「wrangler deployでエラーが出た」「workers.devまでどうつなげればいいのか不安」という方に向けた記事です。

ゆまラボでは、実際の初回デプロイでCloudflare APIの10034が発生しました。最初は設定ミスを疑いましたが、原因はCloudflareアカウントのメールアドレスが未認証だったことです。この記事では、Wranglerへのログイン、Astroのビルド、初回デプロイ、10034の解消、workers.devでの公開、GitHub連携までを実際の流れに沿って紹介します。

WranglerでCloudflareへログイン#

Astroプロジェクトでログインコマンドを実行。

cd C:\000pj\astro\yumaru-site
npx wrangler login

ブラウザ上でCloudflareへの接続を許可。PowerShellへSuccessfully logged in.が表示されたら、Astroのビルドとデプロイを実行する。

npm run build
npx wrangler deploy

エラーコード10034:メールアドレス未認証#

最初のデプロイ結果はCloudflare APIエラー。Astroのビルド自体は通っていたので、ここで止まるのは少し意外だった。

You need to verify your email address to use Workers.
code: 10034

Wranglerの設定ミスではなく、Cloudflareアカウントのメール認証が未完了という内容。

対応は次の2段階。

  1. Cloudflareから届いた認証メールを開く
  2. Verify email addressを選択

認証完了後、再度デプロイを実行。

npx wrangler deploy

workers.devサブドメインの登録#

初回デプロイ時には、workers.devサブドメインを登録するか確認される。希望した名前が使用できない場合は別の名前を入力。

今回登録したサブドメインはyumaru。Worker名yumaru-siteと組み合わせ、公開URLは次の形になる。

https://yumaru-site.yumaru.workers.dev

デプロイ成功#

認証後の実行では39個の静的ファイルを認識。アップロード、Workerのデプロイ、公開URLの発行まで正常終了。

Building list of assets...
Read 39 files from the assets directory ...\dist
Uploaded yumaru-site
Deployed yumaru-site triggers
https://yumaru-site.yumaru.workers.dev

Cloudflare Workersへのデプロイ成功とAstroのビルド結果

表示された2つの警告#

デプロイ時にはworkers_devとpreview_urlsに関する警告も表示。

内容は、設定ファイルに明示がないため両機能を既定で有効にするという通知。デプロイ失敗ではない。

警告を消して設定を明確にする場合は、wrangler.jsoncへ次を追加する。

"workers_dev": true,
"preview_urls": true

GitHubリポジトリとの接続#

手動デプロイの成功後、GitHubへのpushを起点に自動公開する設定へ移行。

Cloudflare管理画面での移動先はこちら。

Workers & Pages
→ yumaru-site
→ 画面上部の「設定」
→ ビルド
→ Gitリポジトリを接続

接続画面への入力内容は以下のとおり。

Cloudflare WorkersとGitHubリポジトリの接続設定

横にスクロールできます
設定項目設定値
Gitアカウントyour-name
リポジトリyumaru-site
本番ブランチmain
プレビュービルド有効
ビルドコマンドnpm run build
デプロイコマンドnpx wrangler deploy

この接続により、mainブランチへのpushをCloudflareが検知。AstroのビルドとWorkersへのデプロイが自動的に始まる。

次回はMarkdown記事を1件追加。ローカル確認、GitHubへのpush、公開サイトへの反映まで通して確認する。