Cloudflareで独自ドメインを取得しAstroサイトへ設定する方法

Cloudflare Registrarで独自ドメインを検索・取得し、Cloudflare Workersで公開中のAstroサイトへ接続するまでの手順をまとめます。

公開：更新：
Cloudflareで独自ドメインを取得しAstroサイトへ設定する方法

Cloudflare Workersのworkers.devまでは公開できたのに、「独自ドメインはどこで取得すればいいのか」「取得したドメインをWorkerへどう接続するのか」「接続したあと、HTTPSやサイトマップまで何を確認すればいいのか」と迷っていないでしょうか。サイト公開とドメイン管理を別々に考えると、最初はどこを設定すればよいのか分かりにくいところです。

ゆまラボではCloudflare Registrarでbringain.comを実際に取得し、そのままCloudflare Workersで公開していたAstroサイトへ接続しました。

この記事では、ドメイン検索・購入・Workersへの接続から、HTTPS、サイトマップ、RSSのURL確認まで、独自ドメインで正常に公開できたと判断するところまでを画面付きで紹介します。

公開先として使ってきたURLは、Cloudflare Workersから発行された次のアドレス。

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

サイトの作成、GitHubとの連携、記事の自動公開まで確認できたため、次の段階として独自ドメインを取得。ドメインの購入先には、サイトの公開先と同じCloudflareを利用する。

今回取得したドメインはこちら。

bringain.com

Cloudflareのドメイン登録画面を開く#

Cloudflareへログインし、左側のメニューから「ドメイン」→「登録」を選択。

まだCloudflareでドメインを取得していない場合は、「まだCloudflareに登録されたドメインはありません」と表示される。画面右上の「ドメインを購入」、または中央の検索欄から登録手続きへ進む。

Cloudflare Registrarでドメインを新規登録する画面

Cloudflare Registrarは、Cloudflare上でドメインの検索、取得、更新、DNS管理まで行えるサービス。サーバーとドメインを同じCloudflareアカウントで管理できるため、今回の構成と相性がよい。

候補名と取得費用を確認#

最初に検討した名前はyuma-labo。検索欄へ入力すると、.com、.net、.org、.aiなど、取得可能な候補と年額が一覧表示される。

yuma-laboで検索したドメイン候補と年間料金

同じ文字列でも、末尾のトップレベルドメインによって料金は大きく異なる。検索時点ではyuma-labo.comが年額10.46ドル、yuma-labo.netが年額11.86ドル。.aiや.ioは比較的高額な設定。

候補を比較した結果、最終的には以前使っていた「ブリングイン」という名称を再利用。表記をbringainとして、取得可能だったbringain.comを選択する。

bringain.comの登録内容を確認#

購入画面で確認したのは以下。

横にスクロールできます
項目内容
ドメインbringain.com
登録期間1年
登録時の表示価格10.46ドル
有効期限2027年9月5日
自動更新有効

bringain.comの登録期間、料金、自動更新設定の確認画面

登録者情報と支払情報を入力し、購入を確定。自動更新は有効のまま進めた。更新忘れによるドメイン失効を防げる一方、不要になった場合は更新日前に設定の見直しが必要になる。

なお、記事用画像には氏名、住所、メールアドレス、カード情報などが写らない範囲だけを使用している。

ドメイン取得処理の完了を待つ#

決済後は「ドメインは取得手続き中です。」という画面へ移動。bringain.comに緑色のチェックが表示され、管理画面からDNSやWHOISプライバシー、自動更新の設定へ進める状態になる。

bringain.comの取得手続き中画面

この時点でドメインの購入操作は完了。続いて、公開中のWorkerへドメインを割り当てる。

Workersへ独自ドメインを追加#

Cloudflareの「Workers & Pages」からyumaru-siteを開き、上部の「ドメイン」を選択。

追加前の画面には、従来のWorker URLとプレビューURLだけが表示されている。「カスタムドメインとルーティングする」の右側にある「ドメインを追加」を選択する。

独自ドメイン追加前のyumaru-siteドメイン設定

入力欄へbringain.comを指定して追加。CloudflareのCustom Domainでは、対象ドメインのDNSレコードと必要な証明書が自動的に作成される。

Workersとの接続を確認#

追加後、カスタムドメイン一覧へbringain.comが表示された。

yumaru-siteへbringain.comを追加した後のドメイン一覧

画面上にはこの内容が表示された。

名前：bringain.com
タイプ：本番
ゾーン：bringain.com

これで、Cloudflare上のドメインとyumaru-siteの関連付けが完了。追加直後は既存のyumaru-site.yumaru.workers.devも有効な状態。独自ドメインの表示確認後、記事末尾の手順で旧URLを無効化する。

Astro側のサイトURLを変更#

独自ドメインで運用する場合は、Astroのastro.config.mjsにあるsiteも確認する。

export default defineConfig({
  site: 'https://bringain.com',
});

siteはサイトマップ、RSS、canonical URLなどの生成に使われる。以前のworkers.devまたはサンプルURLが設定されている場合は、https://bringain.comへ変更してからビルドとpushを実行する。

npm run build
git add .
git commit -m "独自ドメインにサイトURLを変更"
git push

GitHub連携による自動デプロイ完了後、次の項目を確認する。

  • https://bringain.comでトップページが開くこと
  • 記事ページへ移動できること
  • ブラウザにHTTPSの警告が表示されないこと
  • サイトマップとRSSのURLが独自ドメインになっていること

bringain.comで公開できた#

  • Cloudflare Registrarでbringain.comを取得
  • 登録期間1年、自動更新を有効化
  • yumaru-siteの本番カスタムドメインとして追加
  • DNSとHTTPS証明書をCloudflare側で管理
  • 独自ドメインの確認後、workers.devの本番URLとプレビューURLを無効化

ドメインの購入からWorkerへの追加まで、別サービスのネームサーバー設定や証明書発行作業は不要。Astro、GitHub、Cloudflare Workersに独自ドメインが加わり、サイト公開の基本構成が一通りそろった。

追記：workers.devの旧URLを無効化#

https://bringain.comでサイトが開くことを確認した後、Cloudflareのyumaru-siteに残っていたworkers.devのURLを無効化。

操作場所は「Workers & Pages」→yumaru-site→「ドメイン」。Worker URL欄にある次の2つのスイッチをOFFにする。

  • プロダクション：yumaru-site.yumaru.workers.dev
  • プレビュー：*-yumaru-site.yumaru.workers.dev

workers.devのプロダクションURLとプレビューURLをOFFにした画面

画面下のカスタムドメイン一覧には、bringain.comが「本番」のまま表示されている。Worker本体やカスタムドメインは削除せず、Cloudflareから発行された旧URLだけを停止する設定になる。

今後のデプロイでも無効状態を明示する場合は、wrangler.jsoncへ次の設定を追加する。

{
  "workers_dev": false,
  "preview_urls": false
}

これで公開URLをhttps://bringain.comへ一本化。workers.devのアドレスを知っている人が、旧URLから直接アクセスする経路も閉じられた。