第4回 AstroブログをCloudflare Workersへ公開してGitHubと接続する


GitHubへの初回pushが終わったら、Cloudflare Workersへの公開へ進む。

独自ドメインはまだ使わず、Cloudflareが提供するworkers.devのURLを利用。先にサイトの動作と更新経路を確立し、正式なドメインは後から接続する計画になる。

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エラー。

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_devpreview_urlsに関する警告も表示。

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

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

"workers_dev": true,
"preview_urls": true

GitHubリポジトリとの接続

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

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

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

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

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

設定項目 設定値
Gitアカウント hs1900705
リポジトリ yumaru-site
本番ブランチ main
プレビュービルド 有効
ビルドコマンド npm run build
デプロイコマンド npx wrangler deploy

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

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