はじめに

このブログ（日産アリアの電費データ分析ブログ「KoroutoAI」）を含めた記事数が35件を超え、そろそろ管理画面（/admin）が欲しくなってきました。

「認証システムが必要だな」と思い、最近流行りの Clerk を導入することにしました。Astroとの親和性が高いという噂を聞いていたので、サクッと終わるだろうと高を括っていたのですが……。

それが悪夢の始まりでした。

謎の文字列 [object Object] の正体

Clerkの導入自体はスムーズに進みました。公式ドキュメント通りにパッケージをインストールし、環境変数を設定。そして、ユーザーアイコンを表示するために <UserButton /> コンポーネントをヘッダーに配置しました。

「さあ、これでログインボタンが表示されるはず！」

意気揚々とブラウザを確認すると、そこには信じられない光景が。

[object Object]

画面の右上に、虚しく表示される文字列。アイコン画像も、ドロップダウンメニューもありません。ただ冷徹に [object Object] とだけ書かれています。

「えっ……？」

パッケージのバージョンを変えてみたり、レイアウトファイルを変えてみたり、キャッシュをクリアしてみたり……。数時間を費やしても直りません。まさに13日の金曜日の呪いです。

解決の糸口

原因は、Astroの アイランドアーキテクチャ と Clerkのコンポーネントの特性にありました。

1. Reactコンポーネントとして読み込む必要がある 当初、私は @clerk/astro/components からインポートしていました。しかし、インタラクティブな動作（クリックしてメニューを開くなど）が必要な場合、@clerk/astro/react から読み込む必要があったのです。

2. client:load という魔法の言葉 そして決定打がこれです。AstroはデフォルトでJavaScriptを排除してHTMLだけを出力します。Reactコンポーネントを動的に（JavaScriptとして）動作させるには、client:load ディレクティブが必要です。

// Before (呪われしコード)
import { UserButton } from '@clerk/astro/components';
<UserButton />;

// After (浄化されたコード)
import { UserButton } from '@clerk/astro/react';
<UserButton client:load />;

これを修正した瞬間、[object Object] は消え去り、見慣れた丸いアイコンが表示されました。

本番環境の罠（DNSと鍵）

「ローカルで動いた！完璧だ！」

意気揚々と Cloudflare Pages にデプロイしました。しかし、本番環境にアクセスすると、またしても問題が発生。

1. 画像が消える ローカル (npm run dev) では表示されていた画像が、本番環境ではリンク切れに。 原因は画像パスの書き方でした。src/ 以下のパスを指定していましたが、ビルド後のファイル構成ではパスが変わってしまいます。public フォルダに画像を移動し、/ (ルートパス) から指定することで解決しました。 教訓：npm run dev は優しいが、npm run build は冷徹な裁判官である。

2. 管理画面に入れない（ラスボス：DNS） ログインして /admin にアクセスしようとすると、開発用のURLに飛ばされたり、警告が出たりしてどうしても入れません。

   原因は DNS設定 と 環境変数の切り替え でした。

   • 環境変数: Cloudflare側の環境変数を、開発用 (pk_test_...) から本番用 (pk_live_...) に書き換えるのを忘れていました。
   • DNS: Clerkを本番運用するには、CNAMEレコード を設定する必要があります。CloudflareのDNS設定画面で、Clerkが指定する5つのCNAMEレコードを追加しました。この時、プロキシステータスを「DNSのみ」（灰色の雲）にする のが重要ポイントです。

まとめ

土曜日の朝、ついに全ての呪いが解けました。

• [object Object] は消え、ユーザーアイコンが表示された。
• 本番環境でも画像が表示された。
• 管理画面 (/admin) に安全にログインできるようになった。

AstroでReactコンポーネントを使うときは client:load を忘れないこと。そして、本番デプロイ時はDNSと環境変数を指差し確認すること。

今回の奮闘で、AstroとClerk、そしてCloudflareへの理解が深まりました。これで安心してアリアの電費データを更新できそうです。

このブログも、苦労の数だけ強くなる…はず。

執筆時点のAstroのバージョンは4.10.1、Clerkのバージョンは0.20.1、Cloudflare Pagesのバージョンは最新です。

（執筆協力：Gemini / 編集・監修：古老）