ClerkのFrontend APIを独自ドメイン（clerk.wp-kyoto.net）で動かすため、production環境のカスタムドメインをCloudflareのDNSで設定しました。バリデーションが一度失敗したり、反映まで待ち時間があったりしたので、実際に踏んだ手順と気づいた点を記録しておきます。

Domains設定画面から確認する

Clerkダッシュボードの Domains には、Frontend API用のDNS設定（clerk.wp-kyoto.net）と、Account Portal用のDNS設定（accounts.wp-kyoto.net）が並びます。どちらも初期状態では Unverified です。

Cloudflare側のDNS設定画面を見ると、Statusは Inactive。Validate configuration も一度失敗していました。

CloudflareにCNAMEレコードを追加する

Clerkが指定するCNAMEレコードを、Cloudflareのダッシュボードから登録します。ここでは名前を clerk、ターゲットを frontend-api.clerk.services とし、プロキシステータスは「DNSのみ」にしています。

コメント欄に「clerk.com (production)」と残しておきました。同様に、Account Portal用の accounts、DKIM用の clk._domainkey ・ clk2._domainkey、メール用の clkmail も追加し、最終的に5つのCNAMEレコードがすべて「DNSのみ」で並びました。

反映を待ってValidate

DNSの反映を待ってから再度 Validate configuration を実行すると、今度は成功しました。SSL証明書の発行とメール設定の検証はPending中です。

しばらく待つと、Statusが「Active」に切り替わりました。

完了。

本番ドメインでしか動かないので注意

Prodは指定したドメインでしか使えないことに注意。stagingとかリニューアル前は特に要注意。とはいえAPIキーもStripeっぽいところを見るに、Stripeと同様APIキー差し替えだけでいけるやつっぽい。なのでテストで動けば大体いけるとは思う。

実際、登録したドメインと一致しない状態でリクエストすると、以下のようなエラーが返ってきました。

{
  "errors": [
    {
      "message": "Invalid HTTP Origin header",
      "long_message": "The Request HTTP Origin header must be equal to or a subdomain of the requesting URL.",
      "code": "origin_invalid"
    }
  ]
}

不安な人は、テスト用のドメインで一度productionを設定しよう。

Danger タブでは、現在デプロイされているドメイン（Currently deployed on https://wp-kyoto.net）を確認でき、Change domain ボタンから切り替えもできるようです。